Designing with Silverlight

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

sladapter — Mon, 25 Aug 2008 18:10:32 GMT

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.

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

Danuz — Mon, 25 Aug 2008 18:04:39 GMT

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 ?

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

Danuz — Mon, 25 Aug 2008 18:01:57 GMT

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.

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

sladapter — Mon, 25 Aug 2008 16:47:29 GMT

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>

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

pbrooks — Mon, 25 Aug 2008 16:25:19 GMT

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.

Applying the same style / template / Animation to Buttons

Danuz — Mon, 25 Aug 2008 13:39:27 GMT

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.