Because of the way the element works, it always expands to fill the available space. You may have noticed that the button isn't a circle but is skewed. If you run the project and look at the result, you'll see that the button has a rounded background. Set the second button's Template property to the roundbutton resource: Use the templateįind the buttons that were declared at the start of this article. If the ContentPresenter is found, the template automatically binds the control's Content property to the ContentPresenter. If the ControlTemplate is applied to a ContentControl type, such as a Button, a ContentPresenter is searched for in the element tree.

Whatever is set as the content can be presented through a, which is what the template does. In both of the previous examples, the text and the checkbox are set as the Button.Content property. Both of the following are valid buttons: My Text You can set anything inside of the button, such as plain text or even another control. The button presents the content of the element. Because this template is designed for a button, take into consideration that the button inherits from ContentControl. ContentPresenterĪ element is also added to the template. Notice that the Fill and Stroke properties of the element are bound to the control's Foreground and Background properties.

That is, when a property on a control is set, that value is passed on to the element that has the TemplateBinding on it. When you use a TemplateBinding, you enable properties on the control to act as parameters to the template. The TemplateBinding markup extension binds a property of an element that is in the ControlTemplate to a public property that is defined by the control. When you create a new ControlTemplate, you still might want to use the public properties to change the control's appearance.

a ContentPresenter to display the user-specified button content.

an Ellipse to draw the rounded appearance of the button.

To start with, add a Window.Resources element to your MainWindow.xaml file: Ĭreate a new with the following properties set: Property If you define the template in a window, only the controls in that window can use the template. For example, if you declare the template in the root element of your application definition XAML file, the template can be used anywhere in your application. Put simply, where you declare a template affects where the template can be applied. Because templates are resources, they obey the same scoping rules that apply to all resources. The most common way to declare a ControlTemplate is as a resource in the Resources section in a XAML file. If you run the application, it looks like the following: In the end, the MainWindow.xaml file should look similar to the following: Set the content of the element to the following XAML:

PrerequisitesĬreate a new WPF application and in MainWindow.xaml (or another window of your choice) set the following properties on the element: Property On the other hand, if you need a control with new functionality, different properties, and new settings, you would create a new UserControl. With a rounded button, you create a ControlTemplate with the desired visual layout. You can avoid creating new controls by customizing the visual layout of an existing control. In addition, the new user control would provide the circular visual. If you wanted to create a rounded button, you could create a new control that inherits from the button or recreates the functionality of the button. In most user interfaces, a button has the same general appearance: a rectangle with some text. When you want to customize the control's appearance beyond what setting the other properties on the control can do, you create a ControlTemplate. For example, you can set the Foreground property to blue and FontStyle to italic on a CheckBox. These properties control different aspects of the control's appearance, but the changes that you can make by setting these properties are limited. When to create a ControlTemplateĬontrols have many properties, such as Background, Foreground, and FontFamily. In this article, you'll explore creating a new ControlTemplate for the Button control.

Controllermate templates