CODEWITHSUNDEEP
c#xamluwpuwp-xaml
Josh Hunt
Josh Hunt

Reputation: 14521

Align GridView children to top of cell in UWP XAML

I am using GridView to display a grid of variable-height items, except each cell is aligned to the middle of the row.

enter image description here

My markup is

<GridView ItemsSource="{x:Bind Bounties}" SelectionMode="None" HorizontalAlignment="Left"
          VerticalAlignment="Top" >
  <GridView.ItemTemplate>
    <DataTemplate x:DataType="local:Bounty">
      <Grid>
        <TextBlock Margin="12" MaxWidth="350" HorizontalAlignment="Left"
                   Text="{x:Bind ItemDefinition.DisplayProperties.Description}"
                   Style="{ThemeResource BodyTextBlockStyle}" TextWrapping="WrapWholeWords" />
      </Grid>
    </DataTemplate>
  </GridView.ItemTemplate>
</GridView>

How can I get each cell to align to the top left of its row?

Upvotes: 1

Views: 621

Answers (1)

Anran Zhang
Anran Zhang

Reputation: 7737

The internal content of the GridViewItem is vertically centered, this is the default style, if you want to modify it, please try this:

<GridView ...>
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="VerticalContentAlignment" Value="Top" />
        </Style>
    </GridView.ItemContainerStyle>
    <GridView.ItemTemplate>
        ...
    </GridView.ItemTemplate>
</GridView>

In addition, if you want to make the elements in the GridView adaptive height (the default is the height of the first element or the preset height as the height of all items), you can try StaggeredPanel in Windows Community Toolkit.

Thanks.

Upvotes: 2

Related Questions