將GridViewItem拉伸爲完整的GridView寬度

Question

我正在制定Windows 10的計劃應用程序並使用GridView來顯示課本。當窗口很寬時，它們應該具有固定的寬度，並且在狹窄時使用完整的GridView寬度（實際上，它應該看起來像ListView）。

我使用VisualStateManager來設置固定GridViewItem寬度在Wide狀態，但我不明白如何使它伸展。

這裏是我的風格：

<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加設了ItemsPanel屬性爲NarrowState：

<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以任何方式。