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.
