将 GridViewItem 拉伸到完整的 GridView 宽度

Question

我正在开发适用于 Windows 10 的计划应用程序并使用 GridView 来显示课程卡片。当窗口很宽时它们应该有固定宽度，当窗口很窄时它们应该使用完整的 GridView 宽度（实际上应该看起来像 ListView）。

我正在使用 VisualStateManager 在 Wide 状态下设置固定的 GridViewItem 宽度，但我不明白如何使其伸展。

这是我的风格：

    <Style x:Key="GridViewItemStyle" TargetType="GridViewItem">
        <Setter Property="Margin" Value="10, 10, 10, 10" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
    </Style>

    <Style x:Key="NarrowGridViewItemStyle" BasedOn="{StaticResource ResourceKey=GridViewItemStyle}" TargetType="GridViewItem">
        <Setter Property="Width" Value="{Binding ActualWidth, ElementName=TimetableGrid}" />
    </Style>

    <Style x:Key="WideGridViewItemStyle" BasedOn="{StaticResource ResourceKey=GridViewItemStyle}" TargetType="GridViewItem">
        <Setter Property="Width" Value="450"/>
    </Style>

视觉状态：

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="AdaptiveStates" CurrentStateChanged="AdaptiveStates_OnCurrentStateChanged">
            <VisualState x:Name="NarrowState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="TimetableGrid.ItemContainerStyle" Value="{StaticResource ResourceKey=NarrowGridViewItemStyle}" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="600"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="NavigationSplitView.DisplayMode" Value="CompactOverlay"/>
                    <Setter Target="HamburgerButton.Background" Value="#3F51B5"/>
                    <Setter Target="HamburgerButton.Foreground" Value="White"/>
                    <Setter Target="HeaderBorder.Margin" Value="20,0,0,0"/>
                    <Setter Target="TimetableGrid.ItemContainerStyle" Value="{StaticResource ResourceKey=WideGridViewItemStyle}" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

还有 GridView 本身：

 <GridView x:Name="TimetableGrid"
        Margin="20, 0, 20, 10"
        ItemTemplate="{StaticResource LessonTemplate}"
        ItemsSource="{Binding Source={StaticResource TimetableViewSource}}">
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate x:DataType="data:Day">
                    <TextBlock Style="{ThemeResource TitleTextBlockStyle}" Margin="0, 20, 0, 0">
                       <Run Text="{Binding DayOfWeek}" />
                       <Run Text=", " />
                       <Run Text="{Binding Date}" />
                    </TextBlock>
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
        </GroupStyle>
    </GridView.GroupStyle>
</GridView>

实际结果：

宽状态：

窄态：

我是 UWP 开发和 XAML 的新手，感谢任何帮助。谢谢。

Answer 1

您需要替换 ItemsPanelTemplate 才能拉伸项目。

尝试在Page.Resources 中定义一个新资源：

<ItemsPanelTemplate x:Key="NarrowItemsPanelTemplate">
    <ItemsStackPanel />
</ItemsPanelTemplate>

然后修改您的VisualStateManager，为NarrowState额外设置ItemsPanel属性：

<VisualState x:Name="NarrowState">
    <VisualState.StateTriggers>
        <AdaptiveTrigger MinWindowWidth="0" />
    </VisualState.StateTriggers>
    <VisualState.Setters>
        <Setter Target="TimetableGrid.ItemContainerStyle" 
            Value="{StaticResource ResourceKey=NarrowGridViewItemStyle}" />
        <Setter Target="TimetableGrid.ItemsPanel" 
            Value="{StaticResource ResourceKey=NarrowItemsPanelTemplate}" />
    </VisualState.Setters>
</VisualState>

无需以任何方式修改WideState。