Skip to main content
Home Forums Silverlight Design Designing with Silverlight Applying the same style / template / Animation to Buttons
5 replies. Latest Post by sladapter on August 25, 2008.
(0)
Danuz
Member
2 points
3 Posts
08-25-2008 9:39 AM |
Hi all,
I have a problem that I can't solve concerning style, template and animation. I created this template
<UserControl.Resources> <vsm:Style x:Key="BtnStyle" TargetType="Button"> <vsm:Setter Property="Cursor" Value="Arrow"/> <vsm:Setter Property="Background" Value="Transparent"/> <vsm:Setter Property="Template"> <vsm:Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Grid.Resources> <SolidColorBrush x:Key="BorderBrush" Color="#FFFFFF"/> <!-- Grid.Resources Here --> </Grid.Resources> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualStateGroup.Transitions> <vsm:VisualTransition Duration="0:0:0.3" To="MouseOver"/> </vsm:VisualStateGroup.Transitions> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="MouseOver"> <Storyboard x:Name="MouseOverAnimation" > <ColorAnimation BeginTime="00:00:00" Duration="0" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" To="#444444" /> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"/> <vsm:VisualState x:Name="Disabled"/> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Rectangle x:Name="Background" Fill="{TemplateBinding Background}" RadiusX="4" RadiusY="4"/> <Rectangle x:Name="BackgroundGradient" Stroke="{StaticResource BorderBrush}" StrokeThickness="1" RadiusX="4" RadiusY="4"/> <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> </Grid> </ControlTemplate> </vsm:Setter.Value> </vsm:Setter> </vsm:Style></UserControl.Resources>
When Working with only a button instance, it works.
<Button Grid.Column="0" x:Name="btnFirst" Style="{StaticResource BtnStyle}" Width="30" HorizontalAlignment="Left" Margin="0 2 0 2"> <Image Source="../Images/Controls/btnFirst.png" Height="15" Width="15" /></Button>
But with Two, Not .
<Button Grid.Column="0" x:Name="btnFirst" Style="{StaticResource BtnStyle}" MouseLeave="btnFirst_MouseLeave" Width="30" HorizontalAlignment="Left" Margin="0 2 0 2"> <Image Source="../Images/Controls/btnFirst.png" Height="15" Width="15" /></Button> <Button Grid.Column="1" x:Name="btnFastRewind" Style="{StaticResource BtnStyle}" MouseLeave="btnFastRewind_MouseLeave" Width="30" HorizontalAlignment="Left" Margin="0 2 0 2"> <Image Source="../Images/Controls/btnFastRewind.png" Height="15" Width="15" /></Button>
I tried to stop / restart animation on MouseLeave Event on Button, but nothing happen. Is There anyway to make that working ?
I found a part a solution there : http://silverlight.net/forums/p/22310/79023.aspx#79023 but, if I have 100 buttons, I will need 100 ColorAnimation Element ?
Thanks.
pbrooks
Contributor
2671 points
355 Posts
08-25-2008 12:25 PM |
I don't know if this is the problem or not, but I know there are some issues with the Color Animation working with the Visual State Manager. Maybe one of the MS guys can chime in and verify this.
sladapter
All-Star
17181 points
3,133 Posts
08-25-2008 12:47 PM |
Try this:
<Style x:Key="BtnStyle" TargetType="Button"> <Setter Property="Cursor" Value="Arrow"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Grid.Resources> <SolidColorBrush x:Key="BorderBrush" Color="#FFFFFF"/> <!-- Grid.Resources Here --> </Grid.Resources> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualStateGroup.Transitions> <vsm:VisualTransition Duration="0:0:0.3" To="MouseOver"/> </vsm:VisualStateGroup.Transitions> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="MouseOver"> <Storyboard > <ColorAnimation BeginTime="00:00:00" Duration="0" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="MouseOverColor" Storyboard.TargetProperty="Color" To="#444444" /> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"/> <vsm:VisualState x:Name="Disabled"/> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Rectangle x:Name="Background" RadiusX="4" RadiusY="4"> <Rectangle.Fill> <SolidColorBrush x:Name="MouseOverColor" Color="White"></SolidColorBrush> </Rectangle.Fill> </Rectangle> <Rectangle x:Name="BackgroundGradient" Stroke="{StaticResource BorderBrush}" StrokeThickness="1" RadiusX="4" RadiusY="4"/> <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
OR:
<Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Grid.Resources> <SolidColorBrush x:Key="BorderBrush" Color="#FFFFFF"/> <!-- Grid.Resources Here --> </Grid.Resources> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualStateGroup.Transitions> <vsm:VisualTransition Duration="0:0:0.3" To="MouseOver"/> </vsm:VisualStateGroup.Transitions> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="MouseOver"> <Storyboard > <ColorAnimation BeginTime="00:00:00" Duration="0" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="#444444" /> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"/> <vsm:VisualState x:Name="Disabled"/> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <Rectangle x:Name="Background" RadiusX="4" RadiusY="4"> <Rectangle.Fill> <SolidColorBrush Color="White"></SolidColorBrush> </Rectangle.Fill> </Rectangle> <Rectangle x:Name="BackgroundGradient" Stroke="{StaticResource BorderBrush}" StrokeThickness="1" RadiusX="4" RadiusY="4"/> <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
08-25-2008 2:01 PM |
HI,
I tried your code, but I got a Javascript Error :(. I don't understand really why I got an error, and why it is not still working :(. That is strange because, if i create single control with its own style, and i use on a grid numerous instances of this countrol, it works, but, like I am trying to do now (easier method), it does not work.
Any idea again ? I am also trying to solve this issue.
08-25-2008 2:04 PM |
Oh! Your second method is working !!! Thanks! But, before to mark this post as resolved, would you please explain me why this is working and not what I tried to do ?
08-25-2008 2:10 PM |
You can also keep your original Style definition, but you need to set Background in your Button xaml because you rely on the TemplateBinding for the Rectangle.Fill property which can be any kind of Brush. So you'd better initialize it with Solid color Brush. Otherwise, the animation does not find the target.
<Rectangle x:Name="Background" Fill="{TemplateBinding Background}" RadiusX="4" RadiusY="4"/>
<Button x:Name="Bnt1" Content="Test1" Background="AliceBlue" Style="{StaticResource BtnStyle}"/> <Button x:Name="Bnt2" Content="Test2" Background="Aqua" Style="{StaticResource BtnStyle}"/>
Applying the same style / template / Animation to Buttons