状態に応じてボタンのノーマル/ホバー外観が異なるようにする

Question

私はUWPを使ってC＃でシンプルなティックタックトーを作ることに取り組んでいます。

マウスをセルの上に置くと、シンボルのゴーストが表示されるように、いくつかのエフェクトを追加したいと思います。しかし、シンボルがすでに配置されている場合は、シンボルをわずかに消す必要があります。

これを達成するにはどうすればよいでしょうか？所望の効果の

例：

トップセンターは、マウスではない上、シンボルに配置されます。
センターがシンボル配置されている、マウスオーバー。
センター右はシンボルが配置されていない、マウスオーバーしています。
他のセルはシンボルが配置されていない、マウスは上に配置されていません。

現在、私のような定義されたControlTemplateがあります。そして、

<VisualStateGroup x:Name="CommonStates"> 
    <VisualState x:Name="NormalSolid" > 
     <Storyboard> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PlayerIcon"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="0.75"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </VisualState> 
    <VisualState x:Name="PointerOverSolid"> 
     <Storyboard> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PlayerIcon"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.75"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </VisualState> 
    <VisualState x:Name="Normal" > 
     <Storyboard> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PlayerIcon"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="0.25"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </VisualState> 
    <VisualState x:Name="PointerOver"> 
     <Storyboard> 
      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PlayerIcon"> 
       <EasingDoubleKeyFrame KeyTime="0" Value="0"/> 
       <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.25"/> 
      </DoubleAnimationUsingKeyFrames> 
     </Storyboard> 
    </VisualState> 
</VisualStateGroup> 

を、それはそうのように変更されます。GameButtonは簡単なサブクラスである

private void GameButton_PointerExited(object sender, PointerRoutedEventArgs e) 
{ 
    GameButton button = sender as GameButton; 
    VisualStateManager.GoToState(button, "Normal" + (!this.ShapePlaced ? "" : "Solid"), true); 

} 

private void GameButton_PointerEntered(object sender, PointerRoutedEventArgs e) 
{ 
    GameButton button = sender as GameButton; 
    VisualStateManager.GoToState(button, "PointerOver" + (!this.ShapePlaced ? "" : "Solid"), true); 
} 

（ボタン、PlayerIconは描画される形状を表す形状）

しかし、これは、ボタンの周りをクリック+ドラッグすることに問題があり、信頼性がありません。異なるVisualStateGroupに2組の状態（配置されていない状態と配置されていない状態）を配置し、現在の状態に応じて「アクティブ」グループを切り替えることは可能でしょうか？

基本的には、2つの標準状態、2つのPointerOver状態、およびそれらを切り替える方法が必要です。

Answer 1

デフォルトのボタンスタイルを自由に変更できます。すでにすべての状態と遷移を定義しているため、コード内のイベントを使用する必要はありません。 Visual Studioで

<Style x:Key="ButtonStyle1" TargetType="Button"> 
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/> 
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/> 
<Setter Property="Padding" Value="8,4,8,4"/> 
<Setter Property="HorizontalAlignment" Value="Left"/> 
<Setter Property="VerticalAlignment" Value="Center"/> 
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/> 
<Setter Property="FontWeight" Value="Normal"/> 
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/> 
<Setter Property="UseSystemFocusVisuals" Value="True"/> 
<Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="Button"> 
      <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup x:Name="CommonStates"> 
         <VisualState x:Name="Normal"> 
          <Storyboard> 
           <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
          </Storyboard> 
         </VisualState> 
         <VisualState x:Name="PointerOver"> 
          <Storyboard> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
           </ObjectAnimationUsingKeyFrames> 
           <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/> 
          </Storyboard> 
         </VisualState> 
         <VisualState x:Name="Pressed"> 
          <Storyboard> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/> 
           </ObjectAnimationUsingKeyFrames> 
           <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/> 
          </Storyboard> 
         </VisualState> 
         <VisualState x:Name="Disabled"> 
          <Storyboard> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/> 
           </ObjectAnimationUsingKeyFrames> 
           <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter"> 
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/> 
           </ObjectAnimationUsingKeyFrames> 
          </Storyboard> 
         </VisualState> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 
       <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
      </Grid> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 

このスタイルを取得する最も簡単な方法（および任意のコントロールのデフォルトスタイル）2015あなたは「ドキュメントアウトライン」ツールウィンドウを使用します。ウィンドウのツリービューでコントロールを選択し、右クリックして[テンプレートの編集] - > [コピーの編集]を選択します。これにより、コントロールの既定のスタイルが公開され、コントロールを変更してコントロールに適用することができます。