Variable image height in Nested Grid UWP

Question

I want to show multiple images one after one vertically. That's why I've implemented Nested grid. It works fine for same height images. but different height images it looks odd because in nested grid height set according to first item height. Here is my code:

<DataTemplate x:Key="ImageTemplate">
            <Grid x:Name="ImageGridViewItem"
                  HorizontalAlignment="Center"
                  Padding="0,0,0,0"
                  Background="#FAFAFA"
                  BorderBrush="#E6E6E6"
                  BorderThickness="0,0,0,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid Background="#FAFAFA"
                      VerticalAlignment="Center"
                      HorizontalAlignment="Center"
                      BorderThickness="1">
                    <Image Source="{Binding ImageSource, Mode=OneWay}"
                           Stretch="Uniform"
                           Width="{Binding ImageSource.PixelWidth, Mode=OneWay}"
                           Height="{Binding ImageSource.PixelHeight, Mode=OneWay}"/>
                </Grid>

                <Grid Grid.Row="1"
                      Background="#F5F5F5"
                      Padding="0,0,0,0">
                    <TextBlock x:Name="ImageNoTxtBox"
                               HorizontalAlignment="Left"
                               VerticalAlignment="Bottom"
                               Margin="0,4,0,0"
                               Padding="0"
                               FontFamily="Segoe UI"
                               FontSize="10"
                               FontWeight="Normal"
                               Foreground="#252525"
                               Text="{Binding ImageNo,Mode=TwoWay}">
                    </TextBlock>
                </Grid>
            </Grid>

<GridView x:Name="ImagesGridView"
      Grid.Row="5"
      Margin="12,0,2,0"
      Padding="10,10,0,0"
      Width="{Binding MainGridViewWidth}"
      ItemsSource="{Binding ImageList, Mode=OneWay}"
      ItemTemplate="{StaticResource ImageTemplate}">
</GridView>

Image

Hi, can the following method help? Have you solved your issue? — Faywang - MSFT, Jul 10 '20 at 08:58

score 0 · Answer 1 · answered Jul 02 '20 at 02:25

As you mentioned, the row height of GridView depends on the first item, if you want to show the Variable height in GridView, you can try to use WrapPanel from Windows Community Toolkit. Before using it, you need to add Microsoft.Toolkit.Uwp.UI.Controls nuget package and then override the ItemsPanel of GridView, for example:

.xaml:

xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"

<GridView x:Name="ImagesGridView"
            Grid.Row="5"
            Margin="12,0,2,0"
            Padding="10,10,0,0"
            Width="{Binding MainGridViewWidth}"
            ItemsSource="{Binding ImageList, Mode=OneWay}"
            ItemTemplate="{StaticResource ImageTemplate}">
    
     <GridView.ItemsPanel>
         <ItemsPanelTemplate>
             <controls:WrapPanel Name="VerticalWrapPanel" Orientation="Vertical" />
         </ItemsPanelTemplate>
     </GridView.ItemsPanel>
    
</GridView>

Variable image height in Nested Grid UWP

1 Answers1

Linked