WPF: ControlTemplate - Completely Swapping the UI of an Element.

louisasea 2007-09-13

展开全文

WPF: ControlTemplate - Completely Swapping the UI of an Element.

Posted on 3/5/2007 @ 1:22 AM in #WPF | 0 comments | 3376 views

This post is in continuation to an explanation on WPF Templates.

1. ControlTemplate - You use this, when you want to completely redefine the visual appearance of any control. Say, you don‘t want a radiobutton to look like a radiobutton - you want it to look like a smiley instead. Smiling means Checked, and Frowning means Unchecked. You could easily acheive this using ControlTemplate.

2. ItemsPanelTemplate - Is a rather simple kind of template, it lets you control the appearance of the "ItemsPanel" property defined by "ItemsControl" on elements such as ListBox or ComboBox.

3. DataTemplate - is probably the most common kind of template you will use. It lets you change how "Content" is rendered on any control. So if you have an object called "Customer" and you want to define a standard look and feel for "Customer" - you‘d use DataTemplate.

We‘ve all seen a button. No not your shirt button - I‘m talking about a button on the screen - a Windows Button.

Y‘know, it‘s rectangular, with some text on it - boring as hell. What‘s up with that, heck even a M&M dispensing machine has a more attractive button. Actually, most windows controls have a standard "look & feel". While some folks argue that there is an advantage of this familiarity, I would argue that there is still a learning curve - of learning computers, and understanding what a button looks like, what a checkbox looks like, so on so forth.

Here is how you‘d create a boring button in WPF -

Now, what if I wanted to completely swap out the UI, but retain the functionality? Easy, use the Button.Template property as shown below -

<Button.Template>

.. specify look and feel here ..

</ControlTemplate>

</Button.Template>

</Button>

Inside ControlTemplate, you can start specifying the look & feel of your button, this could be as creative as you want - even 3d stuff. I‘m going to keep it simple and use a simple colorful rectangle to render my button -

<Rectangle.Fill>

<VisualBrush.Visual>

<TextBlock Name="myTextBlock" Foreground="LightYellow" Background="DarkBlue" Padding="10">Press Me!</TextBlock>

</VisualBrush.Visual>

</VisualBrush>

</Rectangle.Fill>

</Rectangle>

</ControlTemplate>

This causes the button to look a whole lot more attractive as shown below -

(Okay okay, this is about how creative I feel at 1 AM. But the idea being, you could use tools like Expression*.*/Zam3d to create a button that looks like whatever you wish.)

Now the problem is, a Windows Button gives the user a feedback when clicked. So it actually looks like a button is being clicked. How can I acheive the same in this totally customized button? Earlier I had blogged about "Triggers" in WPF. Well, you can use the same concept to make the above button click. Just go ahead and add the following trigger as shown below -

<ControlTemplate.Triggers>