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.

 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, MCSD, MCAD
PageBrooks.com | RSS Feed

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>

sladapter
Software Engineer
Aprimo, Inc

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

 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.

 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 ?

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}"/>

sladapter
Software Engineer
Aprimo, Inc

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