UWP VisualStates in UserControl

Question

UWP VisualStateManagerを正しく使用する方法を理解するのが苦労しています。後ろの私のコードでは

<UserControl 
    x:Class="BingSearch.Views.UserControls.VerticalsTabHeader" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    Margin="8 0 8 0" 
    mc:Ignorable="d" IsTabStop="False"> 
    <UserControl.Resources> 
     <VisualStateGroup x:Name="CommonStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition From="Normal" To="Minimal" 
          GeneratedDuration="0:0:0.2"> 
       </VisualTransition> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Normal"> 
      </VisualState> 
      <VisualState x:Name="Minimal"> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetName="BubbleGrid" 
        Storyboard.TargetProperty="Opacity" From="1" To="0" /> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </UserControl.Resources> 
    <StackPanel> 
     <Grid x:Name="BubbleGrid"> 
      <Ellipse Width="60" Height="60" Fill="Black" Stroke="White" StrokeThickness="1" /> 
      <FontIcon 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       Glyph="{Binding Glyph}" 
       Foreground="White" 
       FontSize="26" /> 
     </Grid> 
    </StackPanel> 
</UserControl> 

、私はVisualStateManager.GoToState(this, "Minimal", true);またはVisualStateManager.GoToState(this, "Normal", true);を呼び出すときに、何も起こりません：私は、XAMLはここで、いくつかの簡単なビジュアル国を含むユーザーコントロールを定義しています。呼び出しの戻り値は常にfalseで、CommonStates.CurrentStateは常にnullです。私のビジュアルステートがUserControlに決して夢中にならないようです。これは、UserControlsのVisual Statesを定義する正しい方法ではありませんか？

Answer 1

あなたはユーザーコントロールで正しくVisualStateManagerを使用する場合は、以下の2つのことを行う必要があります。

まず、あなたがする必要があるとした後

<VisualStateManager.VisualStateGroups> 
... 
</VisualStateManager.VisualStateGroups> 

の内側にあなたのVisualStateGroupをラップする必要があります

<StackPanel> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="CommonStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition From="Normal" To="Minimal" 
         GeneratedDuration="0:0:0.2"> 
       </VisualTransition> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Normal"> 
      </VisualState> 
      <VisualState x:Name="Minimal"> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetName="BubbleGrid" 
       Storyboard.TargetProperty="Opacity" From="1" To="0" /> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Grid x:Name="BubbleGrid"> 
     <Ellipse Width="60" Height="60" Fill="Black" Stroke="White" StrokeThickness="1" /> 
     <FontIcon 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center" 
      Glyph="{Binding Glyph}" 
      Foreground="White" 
      FontSize="26" /> 
    </Grid> 
</StackPanel> 

を結果：次のようにユーザーコントロールのルート制御の直接の子であることをVisualStateManagerを置きます