Applying the same style / template / Animation to Buttons : The Official Microsoft Silverlight.NET Forums

Applying the same style / template / Animation to Buttons

Aug 25, 2008 01:39 PM | LINK

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.

Re: Applying the same style / template / Animation to Buttons

Aug 25, 2008 04:25 PM | LINK

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.

If this has answered your question, please click on "Mark as Answer" on this post.

Thanks,
Page Brooks
PageBrooks.com | @pbrooks

Re: Applying the same style / template / Animation to Buttons

Aug 25, 2008 04:47 PM | LINK

Try this:

OR:

<Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Grid.Resources>
                                <SolidColorBrush x:Key="BorderBrush" Color="#FFFFFF"/>
                                
                            </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>

Sally Xu
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Danuz

Member

2 Points

3 Posts

Reply

Re: Re: Applying the same style / template / Animation to Buttons

Aug 25, 2008 06:01 PM | LINK

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.

Danuz

Member

2 Points

3 Posts

Reply

Re: Re: Applying the same style / template / Animation to Buttons

Aug 25, 2008 06:04 PM | LINK

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 ?

sladapter

All-Star

43609 Points

7910 Posts

Reply

Re: Re: Applying the same style / template / Animation to Buttons

Aug 25, 2008 06:10 PM | LINK

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.

Sally Xu
Software Engineer
Aprimo, Inc

Please remember to mark the replies as answers if they answered your question

Applying the same style / template / Animation to Buttons RSS

5 replies

Danuz