Part 7 of the Silverlight Tutorial: Use a control template to customize the view of a control

[Original address] Silverlight tutorial Part 7: using control templates to mimize a control's look and feel
[Original article] Friday, February 22,200 AM

This is the seventh part of the eight series of tutorials. This series demonstrates how to use beta1 of Silverlight 2 to build a simple Digg client application. These tutorials are intended to read in order and help explain some of the core programming concepts of Silverlight.

How to customize the view of controls (look and feel)

A powerful feature in the WPF and Silverlight programming models is the ability to completely customize the look and feel of the controls used ). This allows developers and designers to refine the control interface in a subtle and dramatic way, resulting in unparalleled flexibility to create a user experience as expected.

In this tutorial, we will take a look at several methods you can customize controls, and then use these technologies to polish the user interface of our Digg application at the end.

Custom Control content

In the first part of this series, we added a simple button control to the page to demonstrate how to set its content to a custom "Push me !" Text string. Then we connected a click event handler and executed someCode:

As a result, the buttons are displayed in the browser as follows:

One thing that may surprise you about the button control is that its content attribute does not have to be like "Push me !" Such a simple string. In fact, we can set the content attribute to any shape or control sequence we want:

For example, we can embed a stackpanel containing the <image> and <textblock> controls:

This will make our buttons look like the following at runtime. Note that it still retains the same functional behavior (if you press it, the button will get stuck and clicking the event handler function will be triggered as before ):

You can also use the Shape Control (ellipse control like below) to create a custom vector image in the button:

Note how I used an offset radialgradientbrush to add a very nice reflective luster to fill the ellipse control:

We can even do something weird by Embedding interactive controls like calendar in the buttons:

In the preceding example, the calendar control is completely interactive, which means that end users can flip the calendar before and after, select a date in the calendar, and then click the button in it, trigger the click event processing function: (Note: I don't know if this will be a good user experience, but it does demonstrate the flexibility you can do !)

The content customization scenarios I outlined above are not only effective for button controls, but also work for other controls inherited from the contentcontrol base class.

Custom controls using control templates

The control models used by Silverlight and WPF allow customization far beyond the internal content of the control. It also allows you to use anything you wantCompletely replacedThe visual tree of the control, while maintaining the same behavior of the control.

For example, we don't want our buttons to have a default rectangular button appearance, but they need a custom circular button appearance like the following:

We can do this in app. create a "roundbutton" style in the XAML file. Here, we will rewrite the template attribute of the button and provide a default rectangular appearance that contains an ellipse control and a textblock controltemplate to replace the button:

Then, let <button> reference this style resource to use the "roundbutton" View:

Add content to the control Template

You may notice one thing. In the above "roundbutton" control template, the button size and content displayed in it are all written to death (always "push me! ").

The good news is that WPF and Silverlight can also allow us to customize these settings. In the control template, we can use {templatebindingControlproperty. This allows our control template to change with the attributes of the control set by external developers:

Note that the <textblock> control is not used to display the content, but the <contentpresenter> control is used. This will allow us to not only display text strings with buttons, but also display any custom content (as we did earlier in this tutorial ).

Then, we can use the above style on the three buttons below (each button has different content and attribute settings ):

The buttons above will be displayed as follows (by the way, the scaled-down calendar control also supports page turning and date selection !) :

For further consideration, you can add a storyboard animation (Like hover (floating), focus (get focal point), and pushed (Press) to the controltemplate) "Such button status ). This capability allows us to create very beautiful user interaction scenarios, while also contributing to scenarios that cannot be implemented in HTML.

Developers who operate controls in applications can keep ignorant of all these styles and controls for interaction and customization. They can also process control events and object models of operation controls as usual, in addition, designers can use styles and templates to refine and customize the view of controls.

Polish our Digg application (polishing up)

So far, we have discussed some basic knowledge about the working principle of the control template. Let's use them in a few places to add some embellishment to the UI of our Digg application.

At present, the "close" button of our user control is an obvious need for processing in the application:

The good news is that this can be easily corrected for US (or designers working with us. We can go to the app. add a controltemplate to the "closebutton" style in the XAML file, and add custom vector shapes to provide a nice close button (note: more competent designers than me will probably add floating and animated behavior to the vector image shape to make it look better ):

To re-run our application, the button looks like:

In our application, I think the second place to polish is the outer ring interface of ListBox. If you take a closer look, you can see that the ListBox in beta1 has a nested border as its default appearance (note: we have not final decided on the default skin to be released yet, so before the final version, this is very likely to change ):

We can remove this by customizing its control template to give The ListBox a flat border ). The following is a ListBox formatted as a custom template with a flat border:

Note that we only use the <scrollviewer> Control in Silverlight to remove the border control of ListBox (this control allows any content to be rolled ), embed a <itemspresenter/> Control in the control to display the actual entries in The ListBox (it uses the <datatemplate> created in Part 4 to display these entries ).

Below is the more straight appearance of the list that it now gives us:

What's cool is that to make these visual changes, weNoUse to change any code in the application or modify the XAML identifier of the actual control. This separation of code and design can facilitate smooth workflow between developers and designers in Silverlight and WPF applications. Expression blend and all expression studio products bring the design functions of these controls to another height, which will provide a rich set of designer tools that facilitate customization.

Next step

So far, we have completed the implementation of the Digg application in Silverlight.

The last step is to implement a desktop application version. The good news is that it is not difficult to do it, because Silverlight is a subset of the complete WPF and. Net frameworks, so concepts, code, and content are easily transferred.

To see how it is implemented, let's jump to the next Tutorial: Create a Digg desktop application using WPF.