We have also added a button to the window to utilise our control template. So whenever a mouse is above our button the border color will change. The Setter makes this happen by binding the Border Controls Background property to the TargetName property that we configured on the Setter. Our Control Template trigger basically captures a mouse over button event and by using a Setter, the color of the border is changed on the Border The definitions for all triggers can be found We will only be using the element in this article. ![]() The triggers are Trigger, DataTrigger, EventTrigger, MultiTrigger and The RelativeSource of the Binding has a mode set to TemplatedParent,Īdvertising that it expects the control which is having the template applied has a property called Path for which it can binding to.Ī Control Template provides numerous triggers for which it can respond to. The Border Background is changed here by setting the ImageSource of the ImageBrush. This Border will appear around our custom button control and will change color in the event the mouse moves over it. We use this key from the ButtonTemplate control to reference the Control Template The Control Template element above has a Key of buttonTemplate. In this instance the Grid control will be hosting our buttons so it only makes sense to create our Control Template resource in the Grid Control. Control Templates are usually created in the Resource element of the control that is hosting Now it’s time to add our Control Template. Images are provided in the download for this article.įigure 2: Button Control Template Project with Images They willĮxist in a folder called Images in the root of the project. The images that are included are Add, Save, Delete and Refresh. Our newly created buttons are going to need an image from the project. Xmlns : local ="clr-namespace:ButtonControlTemplate" Notice that we have added a namespace ‘local’ as shown here: When you have done this your code should be similar At this point we build the application and navigate back to the Window Designer.įor XAML to have any idea of our new ButtonTemplate class we need to set a namespace in our XAML. This will be the last we see of the code window during this story. The ButtonTemplate Class will inheritįrom Button and this will be the class we use in our XAML to create the buttons on the main window. When the code window opens, move outside of the MainWindow Class and create a new class called ButtonTemplate. Right click anywhere on the Window Designer and select View Code from Rename the Application to ButtonControlTemplate and click OKįigure 1: Visual Studio Template SelectorĪt this point Visual Studio will open showing the Window Designer and XAML.File -> New Project and select WPF Application.Creating the projectįor the purpose of this article we will need to create a WPF Application. We will create a class that inherits from Button so we can add an Image property but also use the features that come Whenever the mouse moves over the button, we will change the color of the border that surrounds it. The button will have an image by defaultĪ button control does not support one. We will override both the layout and behaviour of this Button. The star of our show today will be a Button. We will focus on the simplest form whereby a Control Template is referenced using the Template property on a control. Control Templates can be implemented and referenced Today I’m going to show you how you can make your life easier by using WPF Control Templates. ![]() Wielding this type of power has led me to create some stunning controls with minimal effort. One thing that really attracted me to WPF was the facility where I could override the default layout and behaviour of practically any control.
0 Comments
Leave a Reply. |