Using Images as Buttons on Windows Phone 7

Using Images as Buttons on Windows Phone 7

Doug
Holland

22 Apr 2011 5:32 PM

0

Within the Windows Phone 7 marketplace there are more than 12,000 applications and one such application is theStopwatch that
I published sometime ago, the free version is one of the most popular health and fitness applications.
Initially the user interface used buttons within the ApplicationBar to
start, pause, stop, and reset the stopwatch; unfortunately these buttons were quite small and more than a few reviews of the application commented that the application needed larger buttons.
It is arguable that the most popular applications on Windows Phone 7 use the Pivot and Panorama controls,
therefore the Stopwatch user interface was redesigned to use the Pivot control.
Using the Pivot control would
then allow the laps to move to a second pivot item (see the PivotItem class)
which would allow larger buttons to be used although, instead of using buttons that look like buttons, I decided to resize the ApplicationBar icons.



Stopwatch Professional 4.2
ApplicationBar icons
are installed along with the Windows Phone SDK in light, dark, and vector formats; the light and dark icons are in the PNG graphics format while the vector icons are provided in Adobe
Illustrator format.
After opening the basic_shellcommon_vectors.ai document in Adobe Illustrator CS5 the required icons were resized and the opacity was set to 50% and the icons were now ready to be used in the Stopwatch Pivot control.



Adobe Illustrator CS5 - basic_shellcommon_vectors.ai (from the Windows Phone SDK)
You can find the basic_shellcommon_vectors.ai file within the Windows Phone 7 SDK installed here:
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Icons\vector
It is possible to use an Image as
the content for a Button as
in the following example:
<Button x:Name="StartButton">

<Grid>

<Image x:Name="StartButtonImage"Source="Stopwatch;component/Images/Start.png"/>

</Grid>

</Button>
Unfortunately when the user clicks the Button in this example the button will turn white as in the following example where the Stopwatch reset button has clicked. In this example the issue is all the more apparent to the user because
the button will remain white until the user clicks either the ok or cancel buttons.



Reset Button Version 1 – Button Becomes White When Clicked
Instead of defining the Button with
the Image, as in the above
example, we instead define a Style that can be
applied to one or more other elements, specifically the Button type
as per the specified TargetType. Expression
Blend make it easy to define the Style so
don’t worry necessarily about having to write all the following XAML each time you need to define another Style,
we’ll look at how to do this in just a moment.
<phone:PhoneApplicationPage

x:Class="Stopwatch.MainPage">

<phone:PhoneApplicationPage.Resources>

<Style x:Key="StartButtonStyle" TargetType="Button">

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="Button">

<Grid>

<Image x:Name="StartButtonImage"Source="Stopwatch;component/Images/Start.png"/>

<ContentPresenter HorizontalAlignment="{TemplateBindingHorizontalContentAlignment}"

VerticalAlignment="{TemplateBindingVerticalContentAlignment}"

Content=""/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</phone:PhoneApplicationPage.Resources>

</phone:PhoneApplicationPage>
With the Style defined
the Button can now be defined
using that Style as in the following XAML definition:
<Button x:Name="StartButton" Style="{StaticResource StartButtonStyle}"/>
Using the Style the Image within
the Button remains visible
when the Button is clicked.



Reset Button Version 2 – Button Image Remains When Clicked
Expression Blend provides
the easiest way to create the Style from any Button.
Within the Visual Studio Solution Explorer simply right click on the page containing the Button definition
and select Open in Expression Blend.
With the page opened within Expression
Blend simply select the Button within
the designer or the Objects and Timeline, the ResetButton is highlighted within the Objects and Timeline below, and right click and select Make Into Control.



Expression Blend – Selecting Make Into Control
After selecting Make Into Control… within Expression
Blend the Make Into Control dialog appears allowing you to name the Style and
determine where the Style should reside. Select This
document unless the Style should be available
application wide.



Expression Blend – Make Into Control Dialog
With the Style created Expression
Blend the Button has
been updated to be based upon that Style however
the Content of the Button now
contains the string “Button” which need to be removed. Simply select the Content of the Button and
remove the string “Button” within the Common Properties.



Expression Blend – Removing Button Content String “Button”
Using Expression Blend and Visual
Studio together in this way can be immensely productive and if you’re using Visual Studio Team
Foundation Server you’ll be able to perform source control operations in both Visual
Studioand Expression Blend. You’ll also
be more productive using multiple displays on your PC too!
If your phone is a Windows Phone 7 device then also download either the free Stopwatch from
the marketplace orStopwatch
Professional which adds the ability to send the elapsed time and laps by either email or text message, let me know what you think of the application and of course this blog post.