Instead of a normal button with words, 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 have
the button outline, and trying to change
the style can be rather difficult. Instead I like creating a user
control that simulates a button, but just accepts an image. Figure 1 shows an example of three of these custom user controls to represent minimize, maximize and close buttons for a borderless window. Notice
the highlighted image button has a gray rectangle around it. You will learn how to highlight using
the VisualStateManager in this blog post.Figure 1: Creating a custom user
control for things like image buttons gives you complete
control over
the look and feel.I would suggest you read my previous blog post on creating a custom Button user
control as that is a good primer for what I am going to expand upon in this blog post. You can find this blog post at http://weblogs.asp.net/psheriff/archive/2012/08/10/create-your-own-wpf-button-user-controls.aspx.
The User ControlThe XAML for this image button user
control contains just a few controls, plus a Visual State Manager.
The basic outline of
the user
control is shown below:<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>There is a Border
control named borMain and a single Image
control in this user
control. That is all that is needed to display
the buttons shown in Figure 1.
The definition for this user
control is in a DLL named PDSA.WPF.
The Style definitions for both
the Border and
the Image controls are contained in a resource dictionary names PDSAButtonStyles.xaml. Using a resource dictionary allows you to create a few different resource dictionaries, each with a different theme for
the buttons.
The Visual State ManagerTo display
the highlight around
the button as your mouse moves over
the control, you will need to add a Visual State Manager group. Two different states are needed; MouseEnter and MouseLeave. In
the MouseEnter you create a ColorAnimation to modify
the BorderBrush color of
the Border
control. You specify
the color to animate as “DarkGray”. You set
the duration to less than a second.
The TargetName of this storyboard is
the name of
the Border
control “borMain” and since we are specifying a single color, you need to set
the TargetProperty to “BorderBrush.Color”. You do not need
any storyboard for
the MouseLeave state. Leaving this VisualState empty tells
the Visual State Manager to put everything back
the way it was before
the MouseEnter event.<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>Writing
the Mouse EventsTo trigger
the Visual State Manager to run its storyboard in response to
the specified event, you need to respond to
the MouseEnter event on
the Border
control. In
the code behind for this event call
the GoToElementState() method of
the VisualStateManager class exposed by
the user
control. To this method you will pass in
the target element (“borMain”) and
the state (“MouseEnter”).
The VisualStateManager will then run
the storyboard contained within
the defined state in
the XAML.private void borMain_MouseEnter(object sender, MouseEventArgs e){ VisualStateManager.GoToElementState(borMain, "MouseEnter", true);}You also need to respond to
the MouseLeave event. In this event you call
the VisualStateManager as well, but specify “MouseLeave” as
the state to go to.private void borMain_MouseLeave(object sender, MouseEventArgs e){ VisualStateManager.GoToElementState(borMain, "MouseLeave", true);}The Resource DictionaryBelow is
the definition of
the PDSAButtonStyles.xaml resource dictionary file contained in
the PDSA.WPF DLL. This dictionary can be used as
the default look and feel for
any image button
control you add to a window. <ResourceDictionary ... > <!-- ************************* --> <!-- ** Image Button Styles ** --> <!-- ************************* --> <!-- Image/Text Button Border --> <Style TargetType="Border" x:Key="pdsaButtonImageBorderStyle"> <Setter Property="Margin" Value="4" /> <Setter Property="Padding" Value="2" /> <Setter Property="BorderBrush" Value="Transparent" /> <Setter Property="BorderThickness" Value="1" /> <Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="Background" Value="Transparent" /> </Style> <!-- Image Button --> <Style TargetType="Image" x:Key="pdsaButtonImageImageStyle"> <Setter Property="Width" Value="40" /> <Setter Property="Margin" Value="6" /> <Setter Property="VerticalAlignment" Value="Top" /> <Setter Property="HorizontalAlignment" Value="Left" /> </Style></ResourceDictionary>Using
the Button ControlOnce you make a reference to
the PDSA.WPF DLL from your WPF application you will see
the “PDSAucButtonImage”
control appear in your Toolbox. Drag and drop
the button onto a Window or User
Control in your application. I have not referenced
the PDSAButtonStyles.xaml file within
the control itself so you do need to add a reference to this resource dictionary somewhere in your application such as in
the App.xaml.<Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/PDSA.WPF;component/PDSAButtonStyles.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary></Application.Resources>This will give your buttons a default look and feel unless you override that dictionary on a specific Window or User
Control or on an individual button. After you have given a global style to your application and you drag your image button onto a window,
the following will appear in your XAML window.<my:PDSAucButtonImage ... />There will be some other attributes set on
the above XAML, but you simply need to set
the x:Name,
the ToolTip and ImageUri properties. You will also want to respond to
the Click event procedure in order to associate an action with clicking on this button. In
the sample code you download for this blog post you will find
the declaration of
the Minimize button to be
the following:<my:PDSAucButtonImage x:Name="btnMinimize" Click="btnMinimize_Click" ToolTip="Minimize Application" ImageUri="/PDSA.WPF;component/Images/Minus.png" />The ImageUri property is a dependency property in
the PDSAucButtonImage user
control.
The x:Name and
the ToolTip we get for free. You have to create
the Click event procedure yourself. This is also created in
the PDSAucButtonImage user
control as follows:private void borMain_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){ RaiseClick(e);}public delegate void ClickEventHandler(object sender, RoutedEventArgs e);public event ClickEventHandler Click;protected void RaiseClick(RoutedEventArgs e){ if (null != Click) Click(this, e);}Since a Border
control does not have a Click event you will create one by using
the MouseLeftButtonDown on
the border to fire an event you create called “Click”.SummaryCreating your own image button
control can be done in a variety of ways. In this blog post I showed you how to create a custom user
control and simulate a button using a Border and Image
control. With just a little bit of code to respond to
the MouseLeftButtonDown event on
the border you can
raise your own Click event. Dependency properties, such as ImageUri, allow you to set attributes on your custom user
control. Feel free to expand on this button by adding additional dependency properties, change
the resource dictionary, and even
the animation to make this button look and act like you want.NOTE: You can download
the sample code for this article by visiting my website at http://www.pdsa.com/downloads. Select “Tips & Tricks”, then select “A WPF Image Button” from
the drop down list.
