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 ，因為這會使它的樣式難以維護。