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

Question

我想在UWP上更改窗口大小（Window.Current.SizeChanged）时更改GridViewItem的width属性。

<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上调整窗口大小时更改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的width属性：

<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的示例。