为 UWP 在 Window.Current.SizeChanged 上更改 GridViewItem.Width

Question

我正在尝试在 UWP 上更改 window 大小 (Window.Current.SizeChanged) 时更改 GridViewItem 的宽度属性。

    <GridView x:Name="gv" Grid.Row="1" Background="Gray">
        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Height" Value="80"/>
                <Setter Property="Width" Value="80"/>
            </Style>
        </GridView.ItemContainerStyle>
        <GridView.ItemTemplate>
            <DataTemplate>
                <Rectangle x:Name="rect" Fill="Red"/>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

我计划在 windows 10 上调整 window 大小时更改 GridViewItem 的宽度，以便末尾没有空格。

P.S。图片供参考。

请帮忙。

Answer 1

我认为更改每个 GridViewItem 的宽度不是合适的方法。

您可以注册 GridView 的 SizeChanged 事件。在事件处理程序中，您可以在 GridView 中获取 ItemsWrapGrid，然后根据需要根据 GridView 的大小更改 ItemsWrapGrid 的 ItemWidth。

private void appView_SizeChanged(object sender, SizeChangedEventArgs e)
{
    ItemsWrapGrid appItemsPanel = (ItemsWrapGrid)appView.ItemsPanelRoot;

    double optimizedWidth = 140.0;
    double margin = 12.0;
    var number = (int)e.NewSize.Width / (int)optimizedWidth;
    appItemsPanel.ItemWidth = (e.NewSize.Width - margin) / (double)number;
}

Answer 2

我建议您使用 AdaptiveTrigger 更改 GridViewItem 的宽度属性，这样您无需处理 Window.Current.SizeChanged 事件，它会更改 GridViewItem 的宽度属性自动：

 <Page.Resources>
    <Style x:Key="GridViewItemStyleBig" TargetType="GridViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Height" Value="80"/>
        <Setter Property="Width" Value="80"/>
    </Style>
    <Style x:Key="GridViewItemStyleSmall" TargetType="GridViewItem">
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Height" Value="30"/>
        <Setter Property="Width" Value="30"/>
    </Style>

</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="GridViewWith">
            <VisualState x:Name="MyVisaulState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="800"></AdaptiveTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="gv.ItemContainerStyle" Value="{StaticResource GridViewItemStyleBig}"></Setter>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="MyVisaulState1">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0"></AdaptiveTrigger>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="gv.ItemContainerStyle" Value="{StaticResource GridViewItemStyleSmall}"></Setter>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <GridView x:Name="gv" Grid.Row="1" Background="Gray">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Rectangle x:Name="rect" Fill="Red"/>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>
</Grid>

更多信息，请参考how to use the AdaptiveTrigger in UWP app。

您还可以在GitHub上下载有关 AdaptiveTrigger 的示例。

为 UWP 在 Window.Current.SizeChanged 上更改 GridViewItem.Width

Change GridViewItem.Width on Window.Current.SizeChanged for UWP

c#

xaml

winrt-xaml

windows-10

uwp