ImageButton control for Windows Phone 7

To build an image button in WPF or Silverlight is a commen task. Also in Windows Phone 7 but here we have an additional problem, the themes. The basics I found in this nice article.

What's not handled there is the themes. In the dark theme everything works fine but in the light theme the button is invisible because of the color (white in white). Therefore two more images are needed.

First I added two more dependency properties to the ImageButton class. And then I extended the template to look like that.

     <ControlTemplate x:Key="ImageButtonControlTemplate" TargetType="local:ImageButton">
       <Grid>
         <VisualStateManager.VisualStateGroups>
           <VisualStateGroup x:Name="CommonStates">
             <VisualState x:Name="Normal"/>
             <VisualState x:Name="MouseOver"/>
             <VisualState x:Name="Pressed">
               <Storyboard>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedImage">
                   <DiscreteObjectKeyFrame KeyTime="0">
                     <DiscreteObjectKeyFrame.Value>
                       <Visibility>Visible</Visibility>
                     </DiscreteObjectKeyFrame.Value>
                   </DiscreteObjectKeyFrame>
                 </ObjectAnimationUsingKeyFrames>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NormalImage">
                   <DiscreteObjectKeyFrame KeyTime="0">
                     <DiscreteObjectKeyFrame.Value>
                       <Visibility>Collapsed</Visibility>
                     </DiscreteObjectKeyFrame.Value>
                   </DiscreteObjectKeyFrame>
                 </ObjectAnimationUsingKeyFrames>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PressedLightThemeImage">
                   <DiscreteObjectKeyFrame KeyTime="0">
                     <DiscreteObjectKeyFrame.Value>
                       <Visibility>Visible</Visibility>
                     </DiscreteObjectKeyFrame.Value>
                   </DiscreteObjectKeyFrame>
                 </ObjectAnimationUsingKeyFrames>
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="NormalLightThemeImage">
                   <DiscreteObjectKeyFrame KeyTime="0">
                     <DiscreteObjectKeyFrame.Value>
                       <Visibility>Collapsed</Visibility>
                     </DiscreteObjectKeyFrame.Value>
                   </DiscreteObjectKeyFrame>
                 </ObjectAnimationUsingKeyFrames>
               </Storyboard>
             </VisualState>
             <VisualState x:Name="Disabled"/>
           </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
         <StackPanel Visibility="{StaticResource PhoneDarkThemeVisibility}">
           <Image x:Name="NormalImage" Source="{TemplateBinding Image}"/>
           <Image x:Name="PressedImage" Source="{TemplateBinding PressedImage}" Visibility="Collapsed"/>
         </StackPanel>
         <StackPanel Visibility="{StaticResource PhoneLightThemeVisibility}">
           <Image x:Name="NormalLightThemeImage" Source="{TemplateBinding ImageLightTheme}"/>
           <Image x:Name="PressedLightThemeImage" Source="{TemplateBinding PressedImageLightTheme}" Visibility="Collapsed"/>
         </StackPanel>
       </Grid>
     </ControlTemplate>  

The magic are the two StackPanels and there visibility bound to the static resources PhoneDarkThemeVisibility and PhoneLightThemeVisibility which are part of the wp7 framework.

Hope that helps!