A Windows 8 Look and Feel for WPF, Part 3
In Part 1 of this article you learned how to create a Windows 8 look and feel for your WPF applications. In Part 2 of this article you learned to create a few of the user controls that went into making the shell application. In this final article in this series, you will learn how to create the last few user controls that I used to create the Windows 8 Shell application. In this article, you will learn to put together a WPF Image button, an Image button with text and finally the main Tiles used for the primary navigation system. A WPF Image Button Instead of a normal button with just some text, sometimes you want a button that is just graphical. Yes, you can put an Image control in the Content of a normal Button control, but you still need to modify the button outline, and you might need to change the button style to suit your needs. A user control that simulates a button but contains just an image gives you this flexibility. Figure 1 shows an example of three of these custom Image button user controls to represent Minimize, Maximize and Close buttons for a borderless window. Notice the highlighted Image button has a gray rectangle around it. In addition to learning how to build this Image user control, you will also learn how to highlight using the VisualStateManager. 
Figure 1: Creating a custom user control for things like Image buttons gives you complete control over the look and feel.This Image user control is similar to the Button user control you built in Part 2 of this article. If you are not familiar with building user controls, you should go back and read Part 2 of this article series. Building the WPF Image Button User Control The XAML for this Image button user control contains a Border, an Image, and a Visual State Manager control. The code snippet listed below shows the definition for the Border and the Image. I’ll show the Visual State Manager later in this article. <Border Grid.Row="0" Name="borMain"
Style="{StaticResource pdsaButtonImageBorderStyle}"
MouseEnter="borMain_MouseEnter"
MouseLeave="borMain_MouseLeave"
MouseLeftButtonDown="borMain_MouseLeftButtonDown">
<VisualStateManager.VisualStateGroups>
... MORE XAML HERE ...
</VisualStateManager.VisualStateGroups>
<Image
Style="{StaticResource pdsaButtonImageImageStyle}"
Visibility="{Binding Path=Visibility}"
Source="{Binding Path=ImageUri}"
ToolTip="{Binding Path=ToolTip}" />
</Border>
The Border control, named borMain, is the parent control that contains the Visual State Manager and the Image that makes up this user control. The definition for this user control is in a DLL named PDSA.WPF that comes with the sample code for this article. The style definitions for both the Border and the Image controls are contained in a resource dictionary named PDSAButtonStyles.xaml. By placing all of your styles in a resource dictionary you can have a default set of styles while allowing a developer to override the dictionary with their dictionary of styles. The Image control has bindings linked to the Visibility, Source and Tooltip properties. These bindings are created as dependency properties in the user control. Using properties allows you to specify what image and tooltip gets displayed and whether or not this button is visible. The Visual State Manager Controls the Highlighting The Visual State Manager (VSM) control is used to highlight the border of your button as your mouse hovers over it. Two different states are created within the VSM; MouseEnter and MouseLeave. In the MouseEnter state you create a ColorAnimation to modify the BorderBrush color of the Border control. In the sample application, the color to animate is set to DarkGray; however, you can set this to any color you want within your own resource dictionary. <VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="MouseStates">
<VisualState Name="MouseEnter">
<Storyboard>
<ColorAnimation To="DarkGray"
Duration="0:0:00.1"
Storyboard.TargetName="borMain"
Storyboard.TargetProperty=
"BorderBrush.Color" />
</Storyboard>
</VisualState>
<VisualState Name="MouseLeave" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
This code sets the duration it takes to move from no highlight to the dark gray highlight to less than a second but feel free to modify this value. The TargetName of this storyboard is the name of the Border control which is borMain. Since you are specifying a single color for the border, you need to set the TargetProperty to BorderBrush.Color. You do not need a storyboard for the MouseLeave state. Leave this Visual State empty to put everything back the way it was before the MouseEnter event. | & | | 
By: Paul D. Sheriff
Paul D. Sheriff is the President of PDSA, Inc. (www.pdsa.com), a Microsoft Partner in Southern California. Paul acts as the Microsoft Regional Director for Southern California assisting the local Microsoft offices with several of their events each year and being an evangelist for them. Paul has authored several books, webcasts, videos and articles on .NET, SQL Server and SharePoint. You can reach Paul via email at PSheriff@pdsa.com or at Paul Sheriff’s Inner Circle (www.PaulSheriffInnerCircle.com).
PSheriff@pdsa.com |