Xaml custom button template

Set the second button's Template property to the roundbutton resource:. If you run the project and look at the result, you'll see that the button has a rounded background. You may have noticed that the button isn't a circle but is skewed. Make the circle uniform by changing the button's width and height properties to the same value:.

Even though a button with a template applied looks different, it behaves the same as any other button. If you press the button, the Click event fires. However, you may have noticed that when you move your mouse over the button, the button's visuals don't change.

These visual interactions are all defined by the template. With the dynamic event and property systems that WPF provides, you can watch a specific property for a value and then restyle the template when appropriate.

In this example, you'll watch the button's IsMouseOver property. This type of trigger is known as a PropertyTrigger. Give it the name of backgroundElement. Next, add a new Trigger to the ControlTemplate. Triggers collection. The trigger will watch the IsMouseOver event for the value true. Run the project. Visual states are defined and triggered by a control. For example, when the mouse is moved on top of the control, the CommonStates.

Resources section of our XAML file. This is all fairly straightforward stuff - I am just setting the font and background gradient. The only complicated bit is that I am overriding the focus rectangle drawing, as I want a smaller rectangle than the one that gets drawn by default. So I need another style in my Page.

Resources section:. We would already be finished if I just wanted the normal appearance of my button to be changed. But I want complete control - including the appearance in mouse over, mouse down and disabled situations. So a template allows us to completely control what visual elements constitute our control. Here you can see I have set up a simple border which gives my button rounded corners, a single pixel gray border, and uses the fill from the control's Background property.

This means that by default it will use the orange gradient specified in my style, but that users can override this for their own Background. To draw the content usually text , we use a ContentPresenter control. I am trying to do something clever here, which is create a bevelled effect on the text by drawing it again in gray. This works fine on text, but for some reason doesn't do anything when the Content is a Shape. I'm not sure why that is.

ShadowStyle is defined as follows:. Now we need to add some triggers to our Button template so that we can change its appearance on various events. First is mouse over. When IsMouseOver becomes true, we change the colour of the border and the text colour to blue. Unfortunately, setting the Foreground property does nothing if the content is a shape. Next is mouse down. When IsPressed becomes true, we modify the background gradient so it looks like the button has gone 'down'.

I also move the text down one pixel. Third, we draw a dark gray border when a button is focussed or if it is the default button the button that will be clicked when you press enter. Finally, the when the button is disabled, we gray out the text and wash out the background a little by reducing its opacity.

Now we are ready to use our control. All we have to do is set the Style property of our button. We can override any of the settings such as font size if we like. The button will automatically resize itself to fit the content. Download an example XAML file here. Nice work Me too - I've noticed this code clipping on a lot of sites including code project! The button presentation is made up of several objects including rectangles and other components to give the button a unique look. So far, the control of how buttons look in the application has been confined to changing properties of the button.

What if you want to make more radical changes to the button's appearance? Templates enable powerful control over the presentation of an object. Because templates can be used within styles, you can apply a template to all objects that the style applies to in this walkthrough, the button.

Set up the template: Because controls like Button have a Template property, you can define the template property value just like the other property values we have set in a Style using a Setter.

Add the following highlighted markup to your button style. Alter button presentation: At this point, you need to define the template. Add the following highlighted markup. This markup specifies two Rectangle elements with rounded edges, followed by a DockPanel. The DockPanel is used to host the ContentPresenter of the button. A ContentPresenter displays the content of the button.

In this walkthrough, the content is text "Button 1", "Button 2", "Button 3". All of the template components the rectangles and the DockPanel are laid out inside of a Grid. Add a glasseffect to the template: Next you will add the glass.

First you create some resources that create a glass gradient effect. Add these gradient resources anywhere within the Application. Resources block:. These resources are used as the Fill for a rectangle that we insert into the Grid of the button template.

Add the following highlighted markup to the template. Notice that the Opacity of the rectangle with the x:Name property of "glassCube" is 0, so when you run the sample, you do not see the glass rectangle overlaid on top.

This is because we will later add triggers to the template for when the user interacts with the button. However, you can see what the button looks like now by changing the Opacity value to 1 and running the application. See the following figure. Before proceeding to the next step, change the Opacity back to 0.

Visual Studio doesn't allow visual editing of resource dictionary items, so we will create a button on a page, assign our new style, then use that button to help design the style. You've now applied your style to the button though your style is blank, so the button looks like a regular button. Make the button a reasonable size and give it a text label in its Content property, something like this:.

Changes made to the style will be reflected in this button, but changes you make to this button do not affect the style - this button is an instance of a Button control styled with MyButtonStyle. Back in MyButtonStyle. Setter defines a property. Save the file and you'll notice that the button on MainPage now appears blank because you've defined a control template, but you have not put anything in it.

A ContentPresenter presents content, which could be anything from text to a complex list of objects. You may not be familiar with TemplateBinding. TemplateBinding binds properties to values in the template, which means they are bound to properties in the Properties panel for a control instance. Therefore the FontFamily property binds to the selected font, and so on. The text binding is different because Content behaves differently to a standard property like Background or Height.

That's outside the scope for this article though, so let's move on. The button still looks like the out-of-box button, but that's OK. We're ready to jazz it up with some XAML trickery…. We will create the raised 3D effect by layering three identical shapes of different colours.

In XAML objects are drawn in the order they appear in the code, with items drawn later appearing on top of previously drawn items. To create the shadow we will draw a button shape in the button's Background colour, then we'll draw an identical shape on top of it, but make it black and semi-transparent. This gives the effect of darkening the image drawn beneath it imagine you're putting black cellophane over the first image.

We'll then draw a third shape on top of the shadow but a little higher on the screen, and voila, a 3D button. The order of the layers in the code is important because the transparent black layer must go in front of the bottom layer and the top layer must go on top of that.