Flat Button Styles in silverlight

This blog demonstrates how we can create Flat Button Styles in silverlight.

Introduction : This blog demonstrates how we can create Flat Button Styles in silverlight.
 
We can create flat button style in silverlight for Button control.
 
Step 1 : Create Style for Button control as below.
 

 <Style TargetType="Button">
         <Setter Property="Foreground" Value="Black"/>
         <Setter Property="FontStyle" Value="Normal"/>
         <Setter Property="FontFamily" Value="Arial"/>
         <Setter Property="FontWeight" Value="SemiBold"/>
          <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="Button">
                     <Grid>
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommomStates">
  
                               <VisualState x:Name="Normal"/>
                                  <VisualState x:Name="MouseOver">
                                     <Storyboard>
                                         <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle"/>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="Pressed">
                                     <Storyboard>
                                         <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle"/>
                                     </Storyboard>
                                 </VisualState>
                                 <VisualState x:Name="Disabled" >
                                     <Storyboard>
                                         <ColorAnimation Duration="0" To="LightGray" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle"/>
                                     </Storyboard>
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
                         <Rectangle x:Name="rectangle" Fill="#FFF4F4F4" StrokeThickness="1" Stroke="Black"/>
                             <!--#FFF4F4F4light gray shade-->
                         <!--#7d9fb4-->
                     
                         <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
         </Setter>
     </Style>

 
Step 2 : Applying style for Button control in Mainpage.xaml as below.
 
 <Grid x:Name="LayoutRoot" Background="White">
         <Button Content="Button" Height="25" HorizontalAlignment="Left" Margin="62,22,0,0" Name="button1" VerticalAlignment="Top" Width="100" />
 </Grid>
 
Step 3 : Output look like as below.
 
On Mouseover as well as on pressed event we can set the colors.


 
Summary : We can create Flat button style for button control in silverlight.