"Programming WPF" translation 5th Chapter 7. Control templates

If we look closely at our current TTT game, we will find that the button object does not work for us entirely. Which TTT panels have rounded corners?

Figure 5-14

What we really need here is to be able to keep the button's behavior, such as supporting content and clicking events, but we want to take over the appearance of these buttons. WPF allows this approach because intrinsic controls are created with a lack of appearance, for example, they provide behavior, but the appearance can be wrapped completely outside the client control.

Remember how we used data templates to provide an appearance for Non-visual objects? We can do the same thing with control templates for controls, which will be a set of storyboard, triggers, and most important elements that provide a control's appearance.

To fix the appearance of our buttons, we created a resource for a control template. Let's start with example 5-31, which is a simple rectangle, and then consider how to display the actual button content.

Example 5-31

<Window.Resources>
　 <ControlTemplate x:Key="ButtonTemplate">
　　　 <Rectangle />
　 </ControlTemplate>

　 <!-- let's just try one button for now -->
　 <Button Template="{StaticResource ButtonTemplate}"　 />

</Window.Resources>

Figure 5-15 shows the result of setting the template property of a single button.

Note the traces of the button's past (keep in Figure 5-15). Unfortunately, the traces of our rectangles are not visible. The problem is that a display fill setting is missing, and the default padding for this rectangle is transparent, showing the black background of the grid. Let's set it to like the Halloween color:

<ControlTemplate x:Key=”ButtonTemplate”>
　　　　　　　　　　　 <Rectangle Fill=”Orange” />
</ControlTemplate>

Figure 5-15