WPF step by step custom template

ArticleDirectory

• What is viewtree?
• Data Template
•  
• Custom demo1
• Treeview Effect

Review

In the previous article, we briefly introduced several basic controls. This section describes how to customize the style and data template of each control, we will analyze the specific requirements and scenarios in the project to provide our implementation scheme and the final running effect.

Outline

1. control templates and data templates

2. In-depth template customization for ListBox.

3. Use the Treeview advanced template as an instance.

Control template and Data Template control Template

What is a control template? It specifies that the visual structure and performance of the control can be shared among multiple instances of the control. The control template is our custom template in the visual aspect. controltemplate allows you to specify the visible structure of the control. Override controltemplate to regenerate the visible structure of the control.

Templated controls are one of the many functions provided by WPF to set styles and templated models. This style and templated model provides the flexibility of having controls in many cases.

The control template contains two aspects: visualtree and Tigger. The content introduced in this article is fully based on the content of these two sections.

What is viewtree?

Visualtree is the definition of the visual elements corresponding to the WPF control. The following is an example:

Previously, we used lable to override the control template of the button. We can also use more complex controls to override it:

The effect after running is the preview image above. Of course, we can also build more complex cases. Basically, all the controls in WPF can define the control template.

In the above case, we rewrite this control template for a button. If we have multiple controls on a page and these controls have the same style, the only difference is that the control content or text is different. What should we do? In this case, we need to define the control template as a resource, as shown below:

We will add multiple buttons below to see the specific effect of the application:

It's easy enough. In fact, we can rewrite the template of the control. Well, let's take a look at the more complicated ones. We may want to move the mouse over or press it, the button has a different style. At this time, we will involve the Tigger described above. Let's take a look at it.

SpecificCodeAs follows:

In WPF, a large number of animations are used to improve the user experience and achieve special interface effects.

A large amount of space has been used to describe how to use WPF to implement the special effects of control templates and triggers.

In the second section, we will give a few examples to illustrate the specific usage of the project.

 

Data Template

Data templates are different from control templates. They are mainly customized for certain types of data. These templates are automatically displayed based on the bound data type, organize the content displayed on the page according to the preset data template. Data templates and control templates have similar definitions. Let's first define a Data Template and then see how to use it.

Let's take a look at how the code is set to achieve this effect:

As mentioned above, binding is used. For more bindings, we will use binding extensively in subsequent mvvm instances.

Construct a set of personnel information binding based on personnel information

Associate viewmodel with the interface

Finally, we use ListBox to display data items and use data binding.

Here we find that the effect of the data template is not very nice. At this time, we can use the style template to complete style settings.

Then we reset the listview style and run:

After F5 is run, the effect is as follows:

 

ListBox in-depth template Customization

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Custom demo1

Although we have applied the style above, it still doesn't look good, and there is no effect after clicking the mouse, because there is no effect setting in the trigger.

If we change the background color of the button or border in the trigger, try again?

The result is what we want, so let's take a look at it. We only need to write the following simple lines of code in the template:

Next, let's take a look at the effect.

Listview has a black background. The image or color value can be used.

We will use the above example to implement this effect step by step.

Haha, this is the result. In fact, it is very simple to implement, that is, to rewrite the control template:

Next: rewrite the trigger. The style that is out of date when the mouse slides.

When the mouse gets the focus, that is, the style of the press.

Set the grid Style

You only need a few simple steps to achieve a group of very good results.

We have written all the styles on the page above. For specific situations, we may want to make styles generic. Therefore, we will define a separate Style File, as we mentioned in the previous article, we will not make a special explanation here.

Next let's take a look at another effect:

For this effect, we can also use ListBox to rewrite the control template of ListBox.

Next we will also analyze the implementation of the effect step by step.

The highlighted effect is nothing more than setting the border.

Then it is displayed horizontally. You need to rewrite the itemspanel of ListBox to wrappanel.

In this way, our list items can be displayed horizontally, and then set the style of each list item:

To view the border of border, set borderthickness and color.

At the same time, keep the margin values of the child controls inside the border and the border. Otherwise, the result will not appear.

The code itself is a simple one.

The effect of using the instance Treeview in the Treeview advanced Template

First, let's take a look at the specific implementation results.

The above results are good, but the implementation is much more difficult.

The following provides the design ideas and specific implementation code.

The implementation effect is as follows: it is too ugly to block the original +-symbol. Therefore, we have rewritten the relevant style and template to achieve the above effect. The specific implementation is given below.

A. first define the basic viewmodel

The specific code will be downloaded

B. Define the Treeview database structure

The viewmodel defined above is only used for datatemplate. You can see it at datatemplate.

Modify the original data structure.

Add a viewmodel for interface binding

public class personviewmodelcollection: inotifypropertychanged
{< br> system. collections. objectmodel. observablecollection Persons =
new system. collections. objectmodel. observablecollection ();

Public personviewmodelcollection ()
{< br> person Tempa = new person ()
{< br> address = "Beijing ",
name = "A",
photo = "/samples.04.template; component/images/logo_small.gif",
sex = "male"
};

person tempb = new person ()
{< br> address = "Beijing",
name = "B ",
photo = "/samples.04.template; component/images/logo_small.gif",
sex = "unknown"
};

List tempabpersons = new list ();
tempabpersons. add (Tempa);
tempabpersons. add (tempb);
person [] temppersons = tempabpersons. toarray ();

Persons. Add (New resourcesturctviewmodel (new person ()
{
Address = "Beijing ",
Name = "",
Photo = "/samples.04.template; component/images/logo_small.gif ",
Sex = "male ",
Childerns = temppersons

}));

persons. add (New resourcesturctviewmodel (new person ()
{< br> address = "Hebei",
name = "B",
photo = "/samples.04.template; component/images/logo_small.gif ",
sex =" female ",
childerns = temppersons
}));

persons. add (New resourcesturctviewmodel (new person ()
{< br> address = "Shanxi",
name = "C",
photo = "/samples.04.template; component/images/logo_small.gif ",
sex =" male ",
childerns = temppersons
}));
}

Public System. Collections. objectmodel. observablecollection <resourcesturctviewmodel> personlist
{
Get
{
Return this. Persons;
}
}

# Region inotifypropertychanged Member

Public event propertychangedeventhandler propertychanged;

# Endregion
}

 

The background code has been built. Let's take a look at the design and organization of the interface:

Expand and collapse style before the Treeview Node

The style of each node item of trewviewitem:

The specific controls and bindings are not set above, but are processed through contentpresenter and itemshost. In this way, we can combine the data templates for unified processing, the datatemplate control is automatically displayed in the current contentpresenter and itemshost.

If we do not follow the above requirements, we will encounter many inexplicable problems when we rewrite the Treeview. I have also encountered these problems before summing up.

In the previous style, we added the following events, which must be written to trigger the lazyload operation.

After you try it on your own, you will find that it is not difficult. As long as you have mastered the rules for custom templates, you can completely customize more complex styles and effects.