UWP XAML - 将 GridView 的大小调整为 ListViewItem 父项的全宽

Question

我正在开发一个 UWP Twitter 应用程序，我正在使用 VisualStateManager 根据应用程序窗口的宽度更改布局（主要用于平板电脑和移动设备支持）。

我已经阅读了一点，听起来像HorizontalAlignment="Stretch"是我需要将 GridView 大小调整为包含它的 ListViewItem 父级的宽度。

然而，这并没有发生。 在调试时查看实时 XAML 视图，我的 ListView 和 ListViewItem 占据了应用程序窗口的整个宽度，但 GridView 没有。 它根据它包含的内容调整大小。

这是我用于下面显示的页面的 XAML：

<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>

以及来自我的 DataTemplate 的相关 XAML：

<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>

编辑所以我刚刚找到了ListViewItem的HorizontalContentAlignment属性，但是由于我在设置 ListView 的 ItemsSource 时我的 ListViewItems 是动态创建的，因此我不确定如何设置此属性。

我在哪里可以设置这个？

正在发生的事情的屏幕截图：

Answer 1

我发现我可以在ListViewItem本身上使用样式设置器。

我将此添加到我的DataTemplate上方的样式中，并且它起作用了。

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

Answer 2

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

Answer 3

最好的方法是创建一个ObservableCollection<T>并将其绑定到 ListView 的 itemsource，这样您将只动态创建 T 类型的项目并不断将它们添加到您的集合以及列表视图及其样式的所有数据模板和样式中列表视图项可以由 xaml 控制。

这里要指出的主要事情是不要从 c# 创建listviewItems ，因为这会使它的样式难以维护。