CODEWITHSUNDEEP
xamlxamaringridviewuwp
James Hogle
James Hogle

Reputation: 3040

Xaml Grid not filling parent despite setting horizontal / vertical align to stretch

I am attempting to use a grid view in XAML to create a vertical stack of tiles with spacing between each one. I am able to render the items vertically, and mousing over the items shows the boundary I would expect, however the Grid layout inside of my GridViewItem does not seem to align properly. I have set both HorizontalAlignment and VerticalAlignment to stretch, but the Grid layout remains in the center of the GridViewItem as you can see below:

enter image description here

The outline of the item, and the spacing between items is exactly what I would expect. However, based on my XAML, I would also expect the black box to fill the entire item. 

<GridView ItemsSource="{x:Bind myItems}">
    <GridView.ItemTemplate>
        <DataTemplate>
            <UserControl>
                <Grid
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Background="Black"
                    Padding="10">
                </Grid>
            </UserControl>
        </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsStackPanel
                    Orientation="Vertical">
                </ItemsStackPanel>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>

What am I missing here?

Upvotes: 2

Views: 367

Answers (2)

MrCSharp
MrCSharp

Reputation: 1143

You need to look into the GridView.ItemContainerStyle where you can define a style that stretches the content of the gridview item like this:

<GridView.ItemContainerStyle>
   <Style Target="GridViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
   </Style>
</GridView.ItemContainerStyle>

It is a good idea to have this in a dedicated resource dictionary file so you can reference the style from other listviews/gridviews.

Upvotes: 2

Michael Hawker - MSFT
Michael Hawker - MSFT

Reputation: 1580

There's an intermediary container created by the GridView's ItemPresenter. That container is a GridViewItem and can be seen in the VisualTree in the debugger.

That's what needs its content alignment set to stretch. Like Rafael said, you can do that with the ItemContainer Style, here's your modified code:

<GridView ItemsSource="{x:Bind myItems}">
    <GridView.ItemTemplate>
        <DataTemplate>
            <UserControl>
                <Grid
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Background="Black"
                    Padding="10">
                </Grid>
            </UserControl>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel
                Orientation="Vertical">
            </ItemsStackPanel>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
        </Style>
    </GridView.ItemContainerStyle>
</GridView>

Upvotes: 2

Related Questions