Previously, I received an excellent answer here:
https://docs.microsoft.com/en-us/answers/questions/517550/how-to-display-several-groups-of-photos-on-a-page.html?childToView=520236#comment-520236
It uses a collection view that is grouped to display a Room Name and then a number of photos of that room on the rows beneath it with a max of 4 photos per row. Then when there is a new group (room) it displays the Room Name on a new line followed by photos on subsequent lines.
It looks like this:
A)
First Room
pic1 Pic2 Pic3 Pic4
Pic5 Pic6
Second Room
Pic7 Pic 8
Third Room
Pic9 picA PicB PicC
PicD
etc.
What I am now tasked with is to let the rows with Pictures extend off the page. So that it looks like this:
B)
First Room
pic1 Pic2 Pic3 Pic4 Pic5 Pic6
Second Room
Pic7 Pic 8
Third Room
Pic9 picA PicB PicC PicD
etc.
Easy enough, I thought, just tell it to expand Horizontally with this code:
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal"/>
</CollectionView.ItemsLayout>
Yeah - but that gives me:
C)
First Room Pic1 Pic2 Pic3 Pic4 Pic5 Pic6 Second Room Pic7 Pic 8 Third Room Pic9 picA PicB PicC PicD
I guess technically, it is correct, but not what I want.
How do I tell it what I want?
Thanks!
BTW, here is a snippet of the XAML I am using:
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<Label Text="{Binding Name}"
BackgroundColor="{DynamicResource BackgroundColor}"
FontSize="Large"
FontAttributes="Bold"
TextColor="{DynamicResource TextColor}"/>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
</CollectionView.ItemsLayout>-->
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame
HeightRequest="120"
CornerRadius="0"
Padding="0"
BackgroundColor="{StaticResource ThemePrimary}"
Visual="Material"
HasShadow="True"
>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0"
Source="{Binding Path}"
Aspect="AspectFit"
HeightRequest="60"
WidthRequest="90"/>
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
@LeonLu-MSFT Thought you may be interested in this one.
