Geek Answers Handbook

Silverlight 4 - How do I change the background color of a button when focusing using an implicit button style?

I have a lot of difficulties trying to achieve something that should be trivial. I use the implicit button style defined in the global XAML resource file. I just want to change the background color of the focused button to red using ColorAnimation. I tried several different combinations in Storyboard.TargetProperty and Storyboard.TargetName , and nothing worked. How can I achieve this?

Thanks in advance.

 <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> ...
+4
source share
2 answers

Since I don't have the rest of the style, I did this with two Borders and ContentPresenter. This enlivens the background of the green to red button after focusing.

 <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>
+6
source

More articles: