AdaptiveTrigger ne fonctionne pas dans le contrôle de modèle personnalisé UWP

Question

J'ai deux VisualStateGroups dans mon Style. Cela fonctionne bien mais quand j'ajuste la largeur de la fenêtre, le AdaptiveVisualStateGroup ne se déclenche pas. Qu'est-ce que je rate?

<Style TargetType="local:ExpandPanel"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:ExpandPanel"> 
       <Grid>       
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="AdaptiveVisualStateGroup"> 
          <VisualState x:Name="NormalDesktop"> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="720"/> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <Setter Target="HeaderText.(UIElement.Visibility)" Value="Collapsed" /> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="ViewStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="0:0:0.25"/> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="Expanded"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="ContentScaleTransform" Storyboard.TargetProperty="ScaleX" To="1" Duration="0"/> 
            <DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="180" Duration="0"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Collapsed"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="ContentScaleTransform" Storyboard.TargetProperty="ScaleX" To="0" Duration="0"/> 
            <DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="0" Duration="0"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <Border BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         CornerRadius="{TemplateBinding CornerRadius}" 
         Background="{TemplateBinding Background}"> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="*"/> 
          </Grid.RowDefinitions> 

          <Grid Margin="3" x:Name="ExpandCollapseGrid" Background="Transparent"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*"/> 
            <ColumnDefinition Width="Auto"/> 
           </Grid.ColumnDefinitions> 
           <StackPanel Orientation="Horizontal"> 
            <Image x:Name="ImageIcon" Width="{TemplateBinding IconWidth}" Height="{TemplateBinding IconHeight}" Source="{TemplateBinding IconSource}" Margin="0,0,8,0"/> 
            <FontIcon x:Name="FontIcon" Glyph="{TemplateBinding Glyph}" FontSize="{TemplateBinding HeaderFontSize}" Margin="8" /> 
            <ContentPresenter x:Name="HeaderText" VerticalAlignment="Center" Content="{TemplateBinding HeaderContent}" FontSize="{TemplateBinding HeaderFontSize}" /> 
           </StackPanel> 
           <ToggleButton Grid.Column="1" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton" 
               Width="{TemplateBinding ToggleButtonWidth}" 
               Height="{TemplateBinding ToggleButtonHeight}" 
               Margin="{TemplateBinding ToggleButtonMargin}"> 
            <ToggleButton.Template> 
             <ControlTemplate> 
              <Grid> 
               <Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" 
                 Data="M 0 40 L 40 20 L 0 0 Z" 
                 Fill="{ThemeResource ToggleSwitchForegroundThemeBrush}" /> 
              </Grid> 
             </ControlTemplate> 
            </ToggleButton.Template> 
            <ToggleButton.RenderTransform> 
             <RotateTransform x:Name="RotateButtonTransform"/> 
            </ToggleButton.RenderTransform> 
           </ToggleButton> 
          </Grid> 
          <ContentPresenter Grid.Row="1" Margin="5" Content="{TemplateBinding Content}" x:Name="Content" RenderTransformOrigin="1,0.5"> 
           <ContentPresenter.RenderTransform> 
            <ScaleTransform x:Name="ContentScaleTransform"/> 
           </ContentPresenter.RenderTransform> 
          </ContentPresenter> 
         </Grid> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 1

Je l'ai compris. Il n'y a pas besoin de créer un autre groupe. Les œuvres suivantes pour moi

<Style TargetType="local:ExpandPanel"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="local:ExpandPanel"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="ViewStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="0:0:0.25"/> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="Expanded"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="ContentScaleTransform" Storyboard.TargetProperty="ScaleX" To="1" Duration="0"/> 
            <DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="180" Duration="0"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Collapsed"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="ContentScaleTransform" Storyboard.TargetProperty="ScaleX" To="0" Duration="0"/> 
            <DoubleAnimation Storyboard.TargetName="RotateButtonTransform" Storyboard.TargetProperty="Angle" To="0" Duration="0"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="NarrowDesktop"> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}"/> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <!-- TODO: change properties for narrow view --> 
            <Setter Target="HeaderText.(UIElement.Visibility)" Value="Visible" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="NormalDesktop"> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}"/> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <!-- TODO: change properties for normal view --> 
            <Setter Target="HeaderText.(UIElement.Visibility)" Value="Collapsed" /> 
           </VisualState.Setters> 
          </VisualState> 
          <VisualState x:Name="WideDesktop"> 
           <VisualState.StateTriggers> 
            <AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}"/> 
           </VisualState.StateTriggers> 
           <VisualState.Setters> 
            <!-- TODO: change properties for wide view --> 
            <Setter Target="HeaderText.(UIElement.Visibility)" Value="Visible" /> 
           </VisualState.Setters> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 

        <Border BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         CornerRadius="{TemplateBinding CornerRadius}" 
         Background="{TemplateBinding Background}"> 
         <Grid> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="Auto"/> 
           <RowDefinition Height="*"/> 
          </Grid.RowDefinitions> 

          <Grid Margin="3" x:Name="ExpandCollapseGrid" Background="Transparent"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*"/> 
            <ColumnDefinition Width="Auto"/> 
           </Grid.ColumnDefinitions> 
           <StackPanel Orientation="Horizontal"> 
            <Image x:Name="ImageIcon" Width="{TemplateBinding IconWidth}" Height="{TemplateBinding IconHeight}" Source="{TemplateBinding IconSource}" Margin="0,0,8,0"/> 
            <FontIcon x:Name="FontIcon" Glyph="{TemplateBinding Glyph}" FontSize="{TemplateBinding HeaderFontSize}" Margin="8" /> 
            <ContentPresenter x:Name="HeaderText" VerticalAlignment="Center" Content="{TemplateBinding HeaderContent}" FontSize="{TemplateBinding HeaderFontSize}" /> 
           </StackPanel> 
           <ToggleButton Grid.Column="1" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton" 
               Width="{TemplateBinding ToggleButtonWidth}" 
               Height="{TemplateBinding ToggleButtonHeight}" 
               Margin="{TemplateBinding ToggleButtonMargin}"> 
            <ToggleButton.Template> 
             <ControlTemplate> 
              <Grid> 
               <Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform" 
                 Data="M 0 40 L 40 20 L 0 0 Z" 
                 Fill="{ThemeResource ToggleSwitchForegroundThemeBrush}" /> 
              </Grid> 
             </ControlTemplate> 
            </ToggleButton.Template> 
            <ToggleButton.RenderTransform> 
             <RotateTransform x:Name="RotateButtonTransform"/> 
            </ToggleButton.RenderTransform> 
           </ToggleButton> 
          </Grid> 
          <ContentPresenter Grid.Row="1" Margin="5" Content="{TemplateBinding Content}" x:Name="Content" RenderTransformOrigin="1,0.5"> 
           <ContentPresenter.RenderTransform> 
            <ScaleTransform x:Name="ContentScaleTransform"/> 
           </ContentPresenter.RenderTransform> 
          </ContentPresenter> 
         </Grid> 
        </Border> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>