Изменение значения максимума WrapGrid по максимумуRowsOrColums с помощью триггеров visualState не работает

Question

Я делаю адаптивный макет для моего универсального приложения win 10. По какой-то причине, когда я пытаюсь изменить значение maximumRowsOrColumns wrapGrid в триггерах visualState, это работает некорректно.

Ну, это действительно работает, если пользователь меняет размер окна, но при запуске программы кажется, что adaptiveTrigger не влияет на это значение.

Вот код:

<Hub> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="wideView"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="720" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="WrapPanel.MaximumRowsOrColumns" Value="3" /> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="narrowView"> 
       <VisualState.Setters> 
        <Setter Target="WrapPanel.MaximumRowsOrColumns" Value="2" /> 
       </VisualState.Setters> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0" /> 
       </VisualState.StateTriggers> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <HubSection> 
     <DataTemplate> 
      <GridView> 
       <GridView.ItemsPanel> 
        <ItemsPanelTemplate> 
         <WrapGrid Orientation="Horizontal" 
            x:Name="WrapPanel"/> 
        </ItemsPanelTemplate> 
       </GridView.ItemsPanel> 
       <GridViewItem> 
        <Rectangle Width="250" Height="100" Fill="Red" Margin="6" /> 
       </GridViewItem> 
       <GridViewItem> 
        <Rectangle Width="250" Height="100" Fill="Yellow" Margin="6" /> 
       </GridViewItem> 
       <GridViewItem> 
        <Rectangle Width="250" Height="100" Fill="Green" Margin="6" /> 
       </GridViewItem> 
       <GridViewItem> 
        <Rectangle Width="250" Height="100" Fill="Blue" Margin="6" /> 
       </GridViewItem> 
      </GridView> 
     </DataTemplate> 
    </HubSection> 
</Hub> 

Answer 1

Если вы хотите, чтобы триггер работать при запуске вы можете попытаться заставить приложение для запуска с определенной шириной и высотой. Таким образом, ваши визуальные состояния могут быть активированы. Ниже приведен фрагмент кода, вам нужно будет поместить в yourfile.xaml.cs:

ApplicationView.PreferredLaunchWindowingMode != ApplicationViewWindowingMode.Auto; 
ApplicationView.PreferredLaunchViewSize = new Size { Width = 600, Height = 500 }; 
ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize; 

Также хорошая практика кодирования, чтобы взять ваш Визуальная State Manager, XAML из ваших < Hub> </Hub> Теги и место их в конце вашего кода (но внутри < Сетка> </Сетка>)

<Hub> 
     <HubSection x:Name="HubSection" Header="Test"> 
      <DataTemplate> 
       <GridView> 
        <GridView.ItemsPanel> 
         <ItemsPanelTemplate> 
          <WrapGrid Orientation="Horizontal" 
           x:Name="WrapPanel1" MaximumRowsOrColumns="3"/> 
         </ItemsPanelTemplate> 
        </GridView.ItemsPanel> 
        <GridViewItem > 
         <Rectangle Width="250" Height="100" Fill="Red" Margin="6" /> 
        </GridViewItem> 
        <GridViewItem> 
         <Rectangle Width="250" Height="100" Fill="Yellow" Margin="6" /> 
        </GridViewItem> 
        <GridViewItem> 
         <Rectangle Width="250" Height="100" Fill="Green" Margin="6" /> 
        </GridViewItem> 
        <GridViewItem> 
         <Rectangle Width="250" Height="100" Fill="Blue" Margin="6" /> 
        </GridViewItem> 
        <GridViewItem> 
         <Rectangle Width="250" Height="100" Fill="Orange" Margin="6" /> 
        </GridViewItem> 
       </GridView> 
      </DataTemplate> 
     </HubSection> 
    </Hub> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="wideView"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="700" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="WrapPanel1.MaximumRowsOrColumns" Value="3"/> 
        <Setter Target="HubSection.Header" Value="WideView" /> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState x:Name="narrowView"> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="WrapPanel1.MaximumRowsOrColumns" Value="2" /> 
        <Setter Target="HubSection.Header" Value="Vertical" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Grid>