Using the Visual State Manager in Silverlight Templates: Listing 2

<Style x:Key="ButtonFlatStyle" TargetType="Button">
  <Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="Button">
      <Grid>
        <vsm:VisualStateManager.VisualStateGroups>
	    <vsm:VisualStateGroup x:Name="CommonStates">
	      <vsm:VisualState x:Name="Normal"/>
		<vsm:VisualState x:Name="MouseOver">
	        <Storyboard>
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00"           
                  Duration="00:00:00.0010000" 
                  Storyboard.TargetName="border"                  
                  Storyboard.TargetProperty="(Border.Background).
                  (SolidColorBrush.Color)">
                  <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFBFC1F2"/>
                  </ColorAnimationUsingKeyFrames>
		  </Storyboard>
            </vsm:VisualState>
            <vsm:VisualState x:Name="Pressed">
              <Storyboard>									 
                <ColorAnimationUsingKeyFrames BeginTime="00:00:00" 
                  Duration="00:00:00.0010000" Storyboard.TargetName="border"  
                  Storyboard.TargetProperty="(Border.Background).
                 (SolidColorBrush.Color)">
                  <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFF43D3D"/>
                </ColorAnimationUsingKeyFrames>
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                  Duration="00:00:00.0010000" 
                  Storyboard.TargetName="border"                
                  Storyboard.TargetProperty="(UIElement.RenderTransform).
                  (TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                  <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/>
                  </DoubleAnimationUsingKeyFrames>
                  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                  Duration="00:00:00.0010000"           
                  Storyboard.TargetName="border" 
                  Storyboard.TargetProperty="(UIElement.RenderTransform).
                  (TransformGroup.Children)[0].(ScaleTransform.ScaleY)">	               
                  <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.9"/>
                  </DoubleAnimationUsingKeyFrames>
		  </Storyboard>
	      </vsm:VisualState>
	      <vsm:VisualState x:Name="Disabled">
	        <Storyboard/>
	      </vsm:VisualState>
	    </vsm:VisualStateGroup>
          <vsm:VisualStateGroup x:Name="FocusStates">
	      <vsm:VisualState x:Name="Focused">
	        <Storyboard/>
	      </vsm:VisualState>
	      <vsm:VisualState x:Name="Unfocused"/>
	    </vsm:VisualStateGroup>
	  </vsm:VisualStateManager.VisualStateGroups>
	  <Border CornerRadius="10,10,10,10" Background="#FFE4E1E1" 
          BorderBrush="#FF000000" BorderThickness="1,1,1,1" 
          x:Name="border" RenderTransformOrigin="0.5,0.5">
	    <Border.RenderTransform>
	      <TransformGroup>
		   <ScaleTransform/>
		   <SkewTransform/>
		   <RotateTransform/>
		   <TranslateTransform/>
	      </TransformGroup>
	    </Border.RenderTransform>
	    <ContentPresenter x:Name="contentPresenter" 
            ContentTemplate="{TemplateBinding ContentTemplate}" 
            VerticalAlignment="Center" HorizontalAlignment="Center"/>
	  </Border>
      </Grid>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
</Style>
comments powered by Disqus
Upcoming Events

.NET Insight

Sign up for our newsletter.

I agree to this site's Privacy Policy.