UWP XAML - sizing a GridView to the full width of the ListViewItem parent

Question

I'm working on a UWP Twitter app, and I'm making use of the VisualStateManager to change the layout based on the width of the app window (mostly for tablet and mobile support).

I've read up on this a bit, and it sounds like HorizontalAlignment="Stretch" is what I need to resize a GridView to the width of the ListViewItem parent that contains it.

However, this isn't happening. Looking in the live XAML view while debugging, my ListView and ListViewItem is taking up the full width of the app window, but the GridView is not. It's sizing based on the content it contains.

Here's my XAML for the page displayed below:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="mobile">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="bladeView.BladeMode" Value="Fullscreen" />
                    <Setter Target="lstFeed.HorizontalAlignment" Value="Stretch"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="desktop">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="640" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="bladeView.BladeMode" Value="Normal" />
                    <Setter Target="bldHome.Width" Value="430"/>
                    <Setter Target="lstFeed.Width" Value="430"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <ct:BladeView x:Name="bladeView" BladeClosed="UnloadBlade">
        <ct:BladeItem x:Name="bldHome" Tag="blade-00" IsOpen="True" TitleBarVisibility="Collapsed" BorderThickness="0" Style="{StaticResource BladeStyle}" Margin="0 28 0 0">
            <ListView x:Name="lstFeed" VerticalAlignment="Top" Padding="0 0 0 0" 
                SelectionChanged="LoadBlade" ItemTemplate="{StaticResource TweetTemplate}" />
        </ct:BladeItem>
    </ct:BladeView>

</Grid>

And the relevant XAML from my DataTemplate:

<Style x:Key="BladeStyle" TargetType="ct:BladeItem">
    <Setter Property="Width" Value="430"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="BorderThickness" Value="0"/>
</Style>
<Style x:Key="ListItemStyle" TargetType="Grid">
    <Setter Property="Width" Value="400" />
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="MinHeight" Value="50" />
</Style>
<Style x:Key="MetaButtons" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="FontFamily" Value="{StaticResource FontAwesome}"/>
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>

<DataTemplate x:Key="TweetTemplate" x:DataType="tweeter:Tweet2">
    <Grid Style="{StaticResource ListItemStyle}" Tag="{x:Bind Path=Tweet.Id}" x:Name="grdTweets" HorizontalAlignment="Stretch">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="mobile">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="bladeView.BladeMode" Value="Fullscreen" />
                        <Setter Target="grdTweets.HorizontalAlignment" Value="Stretch" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="desktop">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="640" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="bladeView.BladeMode" Value="Normal" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>

Edit So I just found the HorizontalContentAlignment attribute of ListViewItem , but since my ListViewItems are being created dynamically when I set the ItemsSource of my ListView, I'm not sure how to set this property.

Where can I set this?

Screenshot of what's happening:

Answer 1

I figured out that I can use a style setter on ListViewItem itself.

I added this to the styles above my DataTemplate and it worked.

<Style TargetType="ListViewItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>

Answer 2

您始终可以为 Grid 设置 Max width ，以便您可以适应 Grid 视图

Answer 3

The best way is to create an ObservableCollection<T> and bind it to the itemsource of the ListView, this way you will create only the T type items dynamically and keep adding them to your collection and all the data template and styling of listview and its listview items can be controlled by xaml.

The main thing to point out here is that do not created listviewItems from c# because that can make its styling hard to maintain.