WPF Step by step custom templates

WPF Step by step custom template review

In the previous article, we briefly introduced a few basic controls, this section we will explain the style of each control of the customization and data template customization, we will combine the project's specific requirements and scenarios to analyze, give us the implementation of the program and the final performance.

This article outlines

1. Control templates and data templates

2, the listbox depth custom template.

3. The TreeView advanced template uses an instance.

Control templates and Data template control templates

What is a control template, which specifies the visual structure and performance aspects of control that can be shared among multiple instances of the controls. The control template is actually our custom template for visual aspects, ControlTemplate allows you to specify the visual structure of the control. Override ControlTemplate to regenerate the visual structure of the control.

Templated controls are one of the many features that WPF provides, style settings, and templating models. This style and templating model provides many scenarios where you do not need to write large flexibility such as owning controls.

The control template contains two aspects of content: VisualTree and Tigger. The content of this article is completely based on these two pieces of content for discussion and explanation.

What is Viewtree

VisualTree is the definition of the visual element that corresponds to the WPF control, as illustrated below:

Above, we passed the control template with lable overriding button, and we can override it with more complex controls:

The effect after the run is the preview above, and of course we can build more complex situations where control templates can be defined by basically all of the controls in WPF.

The situation above is that we override such a control template for a button, if we have multiple controls on one page, and the styles of the controls are the same, the only difference is that the content or text of the control is different, what should we do? At this point we need to define the control template as a resource, as follows:

Let's add more buttons below to see how the app works:

Simple enough, actually very simple, we can rewrite the template of the control, well, below to see more complicated, we may want to when the mouse over, or press, the button has a different style, this time we will be involved in the previous introduction of the Tigger, below we will look at

The specific code is as follows:

In WPF, in order to improve the effect of the user experience, to achieve the special effect of the interface, we will use a lot of animation to complete.

A lot of space was used to illustrate the control templates and triggers to achieve the special effect of the interface, and using WPF to do things is very simple.

In the second section, we'll take a few examples to illustrate the specific usage in the project.

Data templates

A data template differs from a control template in that it is a template that is customized for a type of data, which automatically organizes the content displayed on the page based on a predetermined data template, based on the data type of the binding and when the construction interface is displayed. Data templates and control templates are defined almost. Let's start by defining a data template and then see how to use it.

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

The above used, binding, about more bindings, we used a lot of bindings in the later instance of MVVM.

Constructs a collection of personnel information bindings based on personnel information

Establishing an association between ViewModel and interface

Finally, a listbox is used to display the data items, which are implemented by data binding.

Here we find that the effect of the data template is not very good-looking, at this time, we can use the style template to complete the style setting.

Then we re-set the ListView style after running:

F5 after running the following effects:

ListBox depth Template Customization

Custom Demo1

Above, although we applied the style, but still do not feel good, and the mouse click has no effect, because in the trigger did not do any effect settings.

If we modify the background color of the button or border in the trigger, try again.

is really what we want, so let's take a look at just a few simple lines of code that we need to write in the template:

Let's take a look at an effect first. The

ListView has a black background. You can use a picture or a color value

We will take the above example, step by step to achieve this effect.

Haha, this is the effect, in fact, it is very simple to implement, is to rewrite the control template can:

Next: Override the trigger when the mouse is out of style

When the mouse gets focus is the style pressed.

To set the style of the grid

It takes a few simple steps to achieve a particularly good set of effects.

We've written all the styles on the page, and for the specific situation, we might want to be able to generalize the style, so we're going to define a separate style file, about the style file, which we've mentioned in the previous article, so we don't make a special statement.

Let's take a look at another effect:

For this effect, we can also be implemented by a ListBox, nothing more than a control template that overrides the ListBox

We also take a step-by-step analysis of the implementation of the effect

p>

The highlight effect when selected, is nothing more than setting the border. The

is then displayed horizontally, and the itemspanel that needs to be rewritten in the listbox is modified to WrapPanel.

This allows our list items to be displayed horizontally, and then set the style for each list item:

To see the border border, set borderthickness and color. The

maintains the margin value of the border inside the child control and the border, otherwise it will not appear, the effect just shown. The

Code itself is these things, which are relatively simple.

The TreeView Advanced template uses an instance of the TreeView effect

First of all to see the implementation of the specific effect.

The above effect, is still good, but the difficulty of implementation will be much larger.

The following gives the design ideas and specific implementation code.

We achieved the effect, such as shielding the original +--symbol, too ugly, so we rewrite the relevant styles and templates to achieve the above effect, the following gives a concrete implementation

A, first define the basic ViewModel

Specific code that will provide the download

B. Define the database structure of the TreeView

The ViewModel defined above is for datatemplate use only, in DataTemplate there is a look to understand.

Modify the original data structure, as above.

Add a viewmodel that is responsible for interface bindings

public class Personviewmodelcollection:inotifypropertychanged
{
system.collections.objectmodel.observablecollection<resourcesturctviewmodel> persons =
New System.collections.objectmodel.observablecollection<resourcesturctviewmodel> ();

       public personviewmodelcollection ()
        {
           person Tempa = new person ()
            {
                Address = "Beijing",
                Name = "A",
                Photo = "/samples.04.template; Component/images/logo_small.gif ",
                Sex = "male"
          };

           Person TEMPB = new person ()
            {
                Address = "Beijing",
                Name = "B",
                Photo = "/samples.04.template; Component/images/logo_small.gif ",
                Sex = "Unknown"
          };

           list<person> tempabpersons = new list< Person> ();
           Tempabpersons.add (Tempa);
           Tempabpersons.add (TEMPB);
           person[] temppersons = Tempabpersons.toarray ();

Persons. ADD (New Resourcesturctviewmodel ()
{
Address = "Beijing",
Name = "A",
Photo = "/samples.04.template; Component/images/logo_small.gif ",
Sex = "Male",
Childerns = Temppersons

}));

           persons. ADD (New Resourcesturctviewmodel ()
           {
               Address = "Hebei",
               Name = "B",
                Photo = "/samples.04.template; Component/images/logo_small.gif ",
                Sex = "female",
               Childerns = Temppersons
          });

           persons. ADD (New Resourcesturctviewmodel ()
           {
               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 Members

public event PropertyChangedEventHandler PropertyChanged;

#endregion
}

Background of the relevant code, have been built, the following we will look at the interface design and organization:

Expanded collapse style before the TreeView node

Trewviewitem the style of each node item:

Instead of setting specific controls and bindings, it is handled by ContentPresenter and ItemsHost, so that we can combine data templates for unified processing, Finally, the controls that are set by DataTemplate are automatically displayed in the current ContentPresenter and ItemsHost.

If we do not follow the above requirements, then when we rewrite the TreeView will encounter a lot of inexplicable problems, I also met, just summed up.

In the previous style, we added the following event, be sure to write it, this is to trigger the operation of Lazyload.

Once you've tried it yourself, you'll find that it's not too difficult, as long as you have mastered the rules for custom templates, you can customize more complex styles and effects.

WPF Step by step custom templates