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>

修改因此，我只是找到了HorizontalContentAlignment的{{1}}属性，但是由于在设置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 并将其绑定到ListView的itemsource，这样，您将动态地仅创建T型项目并将其继续添加到ur集合和所有数据中xaml可以控制listview的模板和样式以及listview的样式。这里要指出的主要问题是，不要从c＃bcz创建 lisviewItems ，这会使其样式难以维护。

UWP XAML-将GridView调整为ListViewItem父级的完整宽度

3 个答案: