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.
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.
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.