Create a Button That Doesn’t Look Like a Button With WPF

One of my favorite things about WPF is that you can make controls look like anything you want. You want a button with text? <Button><TextBlock /></Button> You want a button with an image? <Button><Image /></Button>

So, when I was adding closeable tab functionality to my application, I figured it would be a breeze. When I added the button to the tab header, though, something undesirable happened: it looked like a button. I wanted a close button that just looked like an “X,” not the usual 3D Windows button. Luckily, this is easily accomplished through the use of control templates.

Creating a custom button is a two-step process:

  1. Create a ControlTemplate
  2. Apply the template

Here’s a short example of what I did to create a simple “X” close button:

<Window.Resources>
    <ControlTemplate x:Key="buttonTemplate" TargetType="Button">
        <Path Data="M0,0 L8,8 M8,0 L0,8" Margin="5,5,0,0" Stroke="Black" StrokeThickness="3" />
    </ControlTemplate>
</Window.Resources>

<Button Template="{StaticResource ResourceKey=buttonTemplate}" />

This works just fine, but I’ve created a usability problem. When the user sees or interacts with the button, there are no visual indicators that the item is clickable or anything happens when it’s clicked. No problems, though; we can fix these problems with a pair of style triggers.

<Window.Resources>
    <ControlTemplate x:Key="buttonTemplate" TargetType="Button">
        <Path Data="M0,0 L8,8 M8,0 L0,8" Margin="5,5,0,0" StrokeThickness="3">
            <Path.Style>
                <Style TargetType="{x:Type Path}">
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="False">
                            <Setter Property="Stroke" Value="LightGray" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Stroke" Value="Red" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Path.Style>
        </Path>
    </ControlTemplate>
</Window.Resources>

<Button Template="{StaticResource ResourceKey=buttonTemplate}" />

Now when you hover over the button, the X turns red. This is the perfect button for my closeable tab.

Advertisements

One thought on “Create a Button That Doesn’t Look Like a Button With WPF”

  1. I applied the button design on the TabItem header without any problem.

    My question is about coding to close the TabItem as such.

    Thank you.

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s