Diseñe el MouseOver con un botón de Silverlight/WPF

Question

Luchando con el diseño del mouse sobre un botón ... He logrado darle un estilo al botón (rojo fijo), pero me gustaría que cambie a negro continuo cada vez que un mouse sobreviene. Soy nuevo en XAML, y puedo ver que quiere algún tipo de storyboard/animación ... no estoy seguro de cómo hacerlo exactamente.

Cualquier ayuda sería muy apreciada.

Answer 1

Esto es diferente de WPF a Silverlight. En WPF, la respuesta de Rob es correcta.

En Silverlight, esto no funcionará. Silverlight usa VisualStateManager en lugar de desencadenantes. El código para esto es más complejo, pero algunas personas sienten que esto es mejor. Terminas teniendo que crear una plantilla de control en tu estilo. (Para obtener información sobre cómo definir la plantilla de control, consulte This Article. La manera más fácil de crear una plantilla de control similar es usar Expression Blend, que tiene una función para extraer la plantilla existente completa).

En la plantilla de control, defina el VisualState que le importa y lo que quiere que suceda.

<VisualStateGroup x:Name="CommonStateGroup"> 
    <VisualState x:Name="MouseOverState"> 
     <Storyboard> 
      <ColorAnimation Storyboard.TargetName="TopmostElementOfTheTemplate" 
             Storyboard.TargetProperty="Foreground" 
             To="Black" 
             Duration="00:00:00" > 
      </ColorAnimation> 
     </Storyboard> 
    </VisualState> 
</VisualStateGroup> 
... 

Es importante especificar el color de fondo por defecto en el estilo, así, como Rob hizo anteriormente. Si lo especifica en el control, anulará los valores del estilo.

Tenga en cuenta que es posible sacar el VisualStateManager del WPF Toolkit para tener una solución similar en WPF.

Answer 2

En WPF:

definir un guión gráfico en sus recursos (cualquier lugar accesible desde el botón o el estilo):

<Window.Resources> 
    <Storyboard x:Key="buttonAnim"> 
     <ColorAnimation Storyboard.TargetName="_back" Storyboard.TargetProperty="Color" To="Red" /> 
    </Storyboard> 
    </Window.Resources> 

Y en el botón, crear un disparador de evento que pone en marcha la animación:

<Button> 
    <Button.Background> 
     <SolidColorBrush Color="Blue" x:Name="_back" /> 
    </Button.Background> 
    <Button.Triggers> 
     <EventTrigger RoutedEvent="Button.MouseEnter"> 
      <BeginStoryboard Storyboard="{StaticResource buttonAnim}" /> 
     </EventTrigger> 
    </Button.Triggers> 
    Button Text 
</Button> 

Lo que quieras animar debe existir explícitamente. Esta es la razón por la cual el fondo se establece explícitamente como SolidColorBrush, cuyo color es modificado por el guión gráfico.

Por supuesto, esto se debe hacer a través de un Estilo.

Silverlight solo admite el evento Loaded en los desencadenadores, por lo que debe adjuntar un controlador de eventos real al botón y comenzar el guión gráfico mediante programación.

Answer 3

En WPF, no es necesario un guión gráfico a menos que desee una animación:

<Button Content="Hover me"> 
     <Button.Style> 
      <Style TargetType="Button"> 
       <Setter Property="Background" Value="Red"/> 
       <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Background" Value="Black"/> 
        </Trigger> 
       </Style.Triggers> 
      </Style> 
     </Button.Style> 
    </Button> 

Answer 4

Sí, Visual State Manager es la clave aquí. Acabo de subir un tema Silverlight libre a mi blog http://www.blackspike.com/site/silverlight/free-silverlight-4-beta-skin - usted puede ayudarse a sí mismo a los estilos de allí, aquí está el XAML para un botón de estilo

<SolidColorBrush x:Key="Brush_WindowBackground" Color="#FF333333"/> 

<SolidColorBrush x:Key="Brush_Foreground" Color="#FFE5E5E5"/> 

<SolidColorBrush x:Key="Brush_Highlight" Color="White"/> 

<LinearGradientBrush x:Key="Brush_BackgroundGrad" EndPoint="0.5,1" StartPoint="0.5,0"> 
    <GradientStop Color="#FF3F3F3F" Offset="0"/> 
    <GradientStop Color="#FF353535" Offset="0.3"/> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="Brush_BackgroundGrad_Over" EndPoint="0.5,1" StartPoint="0.5,0"> 
    <GradientStop Color="#FF474747" Offset="0"/> 
    <GradientStop Color="#FF2F2F2F" Offset="0.3"/> 
</LinearGradientBrush> 

<LinearGradientBrush x:Key="Brush_BackgroundGrad_Down" EndPoint="0.5,1" StartPoint="0.5,0"> 
    <GradientStop Color="#FF1D1D1D" Offset="0"/> 
    <GradientStop Color="#FF181818" Offset="0.3"/> 
</LinearGradientBrush> 
<SolidColorBrush x:Key="Brush_BorderInner" Color="Black"/> 

<SolidColorBrush x:Key="Brush_BorderOuter" Color="#FF434343"/> 


<Style TargetType="Button"> 
    <Setter Property="Foreground" Value="{StaticResource Brush_Foreground}"/> 
    <Setter Property="FontFamily" Value="Arial"/> 
    <Setter Property="FontSize" Value="12"/> 
    <Setter Property="Padding" Value="15,10"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="Button"> 
       <Grid> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualStateGroup.Transitions> 
           <VisualTransition GeneratedDuration="0:0:0.2"/> 
          </VisualStateGroup.Transitions> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="background_over" d:IsOptimized="True"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Normal"/> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="background_down" d:IsOptimized="True"/> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Disabled"> 
           <Storyboard> 
            <DoubleAnimation Duration="0" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Rectangle x:Name="blackframe" Stroke="{StaticResource Brush_BorderOuter}" Fill="{StaticResource Brush_BorderInner}"/> 
        <Rectangle x:Name="background" Margin="2" Fill="{StaticResource Brush_BackgroundGrad}"/> 
        <Rectangle x:Name="background_over" Margin="2" Opacity="0" Fill="{StaticResource Brush_BackgroundGrad_Over}"/> 
        <Rectangle x:Name="background_down" Margin="2" Opacity="0" Fill="{StaticResource Brush_BackgroundGrad_Down}"/> 
        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>