The list contains thumbnails with captions. Signatures should be aligned at the bottom, and thumbnails at the upper edge of their container. For this you need to somehow calculate and set the height of the container for each element:

enter image description here

The WrapPanel container is used for the list, the entire panel with elements can be stretched through the GridSplitter , which leads to elements jumping to the next / next line. Therefore, the number of elements in the rows can vary and it is necessary to adjust their height each time.

enter image description here

Markup:

 <ListBox Grid.Row="1" Padding="15" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding Previews}" SelectionMode="Extended"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <WrapPanel IsItemsHost="True" Orientation="Horizontal"></WrapPanel> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <DataTemplate> <Grid Background="Aqua"> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition Height="25" /> </Grid.RowDefinitions> <Image Grid.Row="0" MaxHeight="80" HorizontalAlignment="Center" VerticalAlignment="Top" Stretch="Uniform" Source="{Binding Path}" /> <Label Grid.Row="1" Content="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Bottom" MaxWidth="90px" /> </Grid> </DataTemplate> </ListBox.ItemTemplate> </ListBox>

Tell me how to do?

    1 answer 1

    You can do the top alignment in the WrapPanel .

    According to this answer in English, SO, for this you need to set the ListBoxItem property to set the VerticalContentAlignment property to Top or Stretch .

     <Style TargetType="{x:Type ListBoxItem}"> <Setter Property="VerticalContentAlignment" Value="Stretch" /> </Style>
    • Thanks, it helped. Top does not fit, only Stretch - tretetex