Silverlight 4 - Como posso alterar a cor do botão quando focada com um estilo implícito do botão?
-
27-09-2019 - |
Pergunta
Estou tendo muita dificuldade tentando alcançar algo que deve ser trivial. Estou usando um estilo implícito de botão definido em um arquivo de recursos XAML global. Eu só quero mudar a cor de fundo do botão focado vermelho com uma coloranimação. Eu tentei várias combinações diferentes em Storyboard.TargetProperty
e Storyboard.TargetName
E nada funcionou. Como posso conseguir isso?
Desde já, obrigado.
<Style TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused" >
<Storyboard>
<ColorAnimation Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Button" From="Green" To="Red" Duration="00:00:01" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
Solução
Como não tenho o resto do seu estilo, fiz isso com duas fronteiras e um apresentador de conteúdo. Isso anima o plano de fundo do botão de verde para vermelho uma vez focado.
<Style TargetType="Button" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ColorAnimation Storyboard.TargetName="border"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
From="Green"
To="Red"
Duration="0:0:1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="4">
<Border x:Name="border" Background="White" BorderBrush="Black" BorderThickness="1" CornerRadius="4">
</Border>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Outras dicas
Algumas boas respostas aqui:
Estilize o mouseOver em um botão Silverlight/WPF http://forums.silverlight.net/forums/p/186402/427878.aspx