Windows Phone Image Button

Silverlight for Windows Phone 7 has no Image Button control. Of course you can subclass an Image or create a UserControl, but it is much easier through the great Silverlight Styling & Templating. In this video I’ll show you how it’s done.

Do you want the style?

If you like the ImageButton style, just copy the following XAML to your project:

 <Style x:Key="ButtonStyleIB" TargetType="Button">
  <Setter Property="Background" Value="Transparent"/>
  <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
  <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
  <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
  <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
  <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
  <Setter Property="Padding" Value="10,3,10,5"/>
  <Setter Property="Template">
   <Setter.Value>
    <ControlTemplate TargetType="Button">
     <Grid x:Name="grid" Background="Transparent">
      <Grid.Projection>
       <PlaneProjection/>
      </Grid.Projection>
      <VisualStateManager.VisualStateGroups>
       <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal"/>
        <VisualState x:Name="MouseOver"/>
        <VisualState x:Name="Pressed">
         <Storyboard>
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
          </ObjectAnimationUsingKeyFrames>
          <DoubleAnimation Duration="0" To="-25" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
          <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
         </Storyboard>
        </VisualState>
        <VisualState x:Name="Disabled">
         <Storyboard>
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
           <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
          </ObjectAnimationUsingKeyFrames>
         </Storyboard>
        </VisualState>
       </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
     </Grid>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>