WPF/XAML VisualStateManagerイベントを処理するのは誰ですか？私CustomControlで

Question

は、私はこのようVisualStateManagerを使用しています：

... 
<ControlTemplate TargetType="{x:Type local:MyCustomControl}"> 
    <Grid x:Name="rootGrid" > 
     <Grid.RowDefinitions> 
      <RowDefinition Height="65"></RowDefinition> 
      <RowDefinition Height="*"></RowDefinition> 
     </Grid.RowDefinitions> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CheckStates"> 
       <VisualState x:Name="Checked"> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="toggleRegionContent" 
             Storyboard.TargetProperty="Height" 
             From="0" 
             To="{TemplateBinding ContentHeight}" 
             Duration="0:0:.7" /> 
         <DoubleAnimation Storyboard.TargetName="arrowIcon" 
             Storyboard.TargetProperty="(Path.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" 
             From="0" 
             To="180" 
             Duration="0:0:.1" /> 
         </Storyboard> 
       <VisualState> 
       <!-- Some other States --> 
      </VisualStateGroup> 
     </VisualStateManager> 
    <ToggleButton> 
<!-- The Rest of the Control --> 

私の質問は今チェックイベントが処理される方法であるか、誰がそれを処理します。 ToggleButtonがクリックされると、VisualStateManagerは自動的に状態を切り替えますか？または私は私のトグルボタンチェックのイベントを提供し、このようなもので背後にあるコードでボタンの状態を割り当てる必要がありません：あなたの助けを

VisualStateManager.GoToElementState(Control, "Checked", true); 

感謝。

Answer 1

または私が私のトグルボタンにチェック済みのイベントを提供し、このようなもので背後にあるコードでボタンの状態を割り当てる必要があります：はい、カスタムコントロールは、電流を設定する責任がある

VisualStateManagerクラスとそのGoToStateメソッドを使用してコントロールの視覚的な状態。

あなたはMSDNでこの詳細を読むことができます：https://msdn.microsoft.com/en-us/library/ee330302(v=vs.110).aspx

Answer 2

あなたはGoToStateActionの動作やDataStateBehaviorのいずれかを使用して状態を切り替える必要があります。

DataStateBehaviorは、2つの状態を切り替えるだけの場合に便利です。 複数の状態を切り替える場合は、GoToStateActionが便利です。

まず、DataStateBehaviorを使用した非常に簡単な例を示します。チェックボックスをクリックすると、矩形の色が切り替わります。

<Grid> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="MyStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="0:0:0.3" 
            To="Checked"> 
        <VisualTransition.GeneratedEasingFunction> 
         <CubicEase EasingMode="EaseInOut" /> 
        </VisualTransition.GeneratedEasingFunction> 
       </VisualTransition> 
       <VisualTransition GeneratedDuration="0:0:0.3" 
            To="Unchecked"> 
        <VisualTransition.GeneratedEasingFunction> 
         <CubicEase EasingMode="EaseInOut" /> 
        </VisualTransition.GeneratedEasingFunction> 
       </VisualTransition> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Checked"> 
       <Storyboard> 
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
                Storyboard.TargetName="myRect"> 
         <EasingColorKeyFrame KeyTime="0" 
              Value="#FF6F6FFF" /> 
        </ColorAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Unchecked" /> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <i:Interaction.Behaviors> 
     <ei:DataStateBehavior Binding="{Binding IsChecked, ElementName=myCheckBox}" 
           Value="True" 
           TrueState="Checked" 
           FalseState="Unchecked" /> 
    </i:Interaction.Behaviors> 
    <Rectangle x:Name="myRect" 
       Fill="#FFF4F4F5" 
       HorizontalAlignment="Left" 
       Margin="43.166,74.07,0,153.968" 
       Stroke="Black" 
       Width="104.438" /> 
    <CheckBox x:Name="myCheckBox" 
       Content="CheckBox" 
       Height="20.776" 
       Margin="239.69,88.668,192.524,0" 
       VerticalAlignment="Top" /> 

</Grid> 

次に、GoToStateActionを使用した例を示します。もう一度、チェックボックスをオンにして矩形の色を変更しています。

<Grid> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="MyStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="0:0:0.3" 
            To="Checked"> 
        <VisualTransition.GeneratedEasingFunction> 
         <CubicEase EasingMode="EaseInOut" /> 
        </VisualTransition.GeneratedEasingFunction> 
       </VisualTransition> 
       <VisualTransition GeneratedDuration="0:0:0.3" 
            To="Unchecked"> 
        <VisualTransition.GeneratedEasingFunction> 
         <CubicEase EasingMode="EaseInOut" /> 
        </VisualTransition.GeneratedEasingFunction> 
       </VisualTransition> 
      </VisualStateGroup.Transitions> 
      <VisualState x:Name="Checked"> 
       <Storyboard> 
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" 
                Storyboard.TargetName="myRect"> 
         <EasingColorKeyFrame KeyTime="0" 
              Value="#FF6F6FFF" /> 
        </ColorAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Unchecked" /> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Rectangle x:Name="myRect" 
       Fill="#FFF4F4F5" 
       HorizontalAlignment="Left" 
       Margin="43.166,74.07,0,153.968" 
       Stroke="Black" 
       Width="104.438" /> 
    <CheckBox x:Name="myCheckBox" 
       Content="CheckBox" 
       Height="20.776" 
       Margin="239.69,88.668,192.524,0" 
       VerticalAlignment="Top"> 
     <i:Interaction.Triggers> 
      <ei:DataTrigger Binding="{Binding IsChecked, ElementName=myCheckBox}" 
          Value="True"> 
       <ei:GoToStateAction StateName="Checked" /> 
      </ei:DataTrigger> 
      <ei:DataTrigger Binding="{Binding IsChecked, ElementName=myCheckBox}" 
          Value="False"> 
       <ei:GoToStateAction StateName="Unchecked" /> 
      </ei:DataTrigger> 
     </i:Interaction.Triggers> 
    </CheckBox> 

</Grid> 

EDIT： あなたが動作するように、上記の方法のためのブレンドSDKへの参照を追加することを確認してください。

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"