VisualStateManager dans Windows Phone 8

Question

J'essaie de modifier l'apparence du bouton lorsque le pointeur de la souris le survole en utilisant VisualStateManager. Mais ça ne marche pas. Aidez-moi, s'il vous plaît!

XAML

<Button x:Name="button" Background="AntiqueWhite" Grid.Row="2" Grid.Column="0" MouseEnter="button_MouseEnter" MouseLeave="button_MouseLeave"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="ColorState"> 
      <VisualState x:Name="MouseEnter"> 
       <Storyboard Storyboard.TargetProperty="Background"> 
        <ColorAnimation To="Aquamarine" Duration="0:1:30"/> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="MouseLeave"/> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
</Button> 

С #

private void button_MouseEnter(object sender, System.Windows.Input.MouseEventArgs e) 
{ 
    bool bol = VisualStateManager.GoToState(this, MouseEnter.Name, true); 
} 

private void button_MouseLeave(object sender, System.Windows.Input.MouseEventArgs e) 
{ 
    bool bol = VisualStateManager.GoToState(this, MouseLeave.Name, true); 
} 

Answer 1

Votre VistualStateManager n'est pas correct. Pour autant que je sache, il n'y a pas de "MouseEnter" mais il y a un MouseOver

Voici le ControlTemplate complet pour un <Button>. Je commente le comportement par défaut pour l'état MouseOver et codé dans votre animation de changement de couleur. Tout ce que vous avez à faire est de définir un style de bouton à ce "Chubs_ButtonStyle" et il mettra en évidence à Aquamarine. Espère que cela aide.

---

<phone:PhoneApplicationPage.Resources> 
    <Style x:Key="Chubs_ButtonStyle" TargetType="Button"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/> 
     <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/> 
     <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/> 
     <Setter Property="Padding" Value="10,5,10,6"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Button"> 
        <Grid Background="Transparent"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <!-- restore it back to original color --> 
             <ColorAnimation To="AntiqueWhite" Storyboard.TargetProperty="(ContentContainer.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" Duration="0"/> 
            </Storyboard> 
           </VisualState> 

           <VisualState x:Name="MouseOver"> 
            <Storyboard> 
             <!-- 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             --> 
             <ColorAnimation To="Aquamarine" Storyboard.TargetProperty="(ContentContainer.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" Duration="0"/> 
            </Storyboard> 
           </VisualState> 

           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}"> 
          <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</phone:PhoneApplicationPage.Resources> 

---

Appliquer le style à un bouton comme si

<Button x:Name="button" Background="AntiqueWhite" Grid.Column="0" Width="100" Height="100" Style="{StaticResource Chubs_ButtonStyle}"/> 

---

Captures d'écran en action