Machen Sie eine Schaltfläche haben verschiedene normale/Hover-Erscheinungen je nach Zustand

Question

Ich arbeite an einem einfachen Tic Tac Toe-Spiel in C# mit UWP.

Ich möchte einige Effekte hinzufügen, so dass, wenn die Maus über eine Zelle schwebt, ein Geist des Symbols angezeigt wird. Aber wenn ein Symbol bereits dort platziert wurde, sollte das Symbol leicht verblassen.

Was wäre ein guter Weg, dies zu erreichen?

Beispiel der gewünschten Wirkungen:

Top Zentrum Symbol platziert, Maus nicht über.
Center ist Symbol platziert, Maus über.
Mitte rechts ist das Symbol nicht platziert, Maus über.
Andere Zellen sind Symbol nicht platziert, Maus nicht vorbei.

Derzeit habe ich ein Control als solche definiert:

<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> 

Dann wird geändert wie folgt:

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); 
} 

(Wo GameButton ist eine einfache Unterklasse Schaltfläche und PlayerIcon ist eine Form, die die gezeichnete Form darstellt)

Aber das führt zu Problemen mit Klick + Ziehen um die Tasten, sowie unzuverlässig. Wäre es möglich, die 2 Sätze von Zuständen (Form platziert vs nicht platziert) in verschiedenen VisualStateGroups zu platzieren und die "aktive" Gruppe abhängig vom aktuellen Status zu wechseln?

Im Wesentlichen brauche ich 2 Normal States, 2 PointerOver Staaten, und eine Möglichkeit, zwischen ihnen zu wechseln.

Answer 1

Sie können den Standard-Schaltflächenstil nach Ihren Wünschen ändern. Es definiert bereits alle Zustände und Übergänge, so dass Sie die Ereignisse im Code nicht verwenden müssen.

<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> 

Der einfachste Weg, diesen Stil (und den Standardstil für jede Kontrolle) in Visual Studio 2015 Sie die ‚Dokumentgliederung‘ Tool-Fenster verwenden zu erhalten. Wählen Sie das Steuerelement in der Baumansicht des Fensters aus, klicken Sie mit der rechten Maustaste und wählen Sie Vorlage bearbeiten -> Kopie bearbeiten. Dadurch wird der Standardstil des Steuerelements verfügbar gemacht, und Sie können es ändern und es wieder auf das Steuerelement anwenden.