UWP XAML - 将 GridView 调整为 ListViewItem 父级的全宽答案

【问题标题】：UWP XAML - sizing a GridView to the full width of the ListViewItem parentUWP XAML - 将 GridView 调整为 ListViewItem 父级的全宽
【发布时间】：2019-01-21 19:20:44
【问题描述】：

我正在开发一个 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属性，但是由于我的ListViewItems是在我设置ListView的ItemsSource时动态创建的，所以我不确定如何设置这个属性。

在哪里可以设置？

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

【问题讨论】：

标签： c# xaml uwp uwp-xaml

【解决方案1】：

您始终可以为 Grid 设置最大宽度，以便您可以适应 Grid 视图

【讨论】：

我需要它是动态的，不过，基于应用程序窗口的宽度。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：