Blend Design Basics tutorial (1)

Send a basic tutorial at the request of a group of friends. He is a programmer and has no idea about blend design, so he will give a very basic tutorial.

The effect he wants to achieve is as follows:

The WPF control is a shape-free control, which can be any one. We use a combox to solve this problem.

1. Create a new project, and then add a ComboBox on the page. Then add two comboxitems;

2. Edit the ComboBox template.

See what the ComboBox template looks like.

Maingrid is the layout control grid. part_popup is the pop window that pops up below the button. togglebutton is the drop-down button that is clicked, and contentpresenter is the control that carries the selected value.

3. let's take a look at our final implementation style. The pop-up box has a margin between the buttons. You may want to control the position by setting the margin of part_popup, but this is ineffective, the position of part_popup should be changed according to togglebutton. So we changed the policy and modified the border margin in pop. You also need to modify the background color, border color, and width of the pop-up box to modify the attributes of dropdownborder.

4. After selecting a combox item, the value will be displayed. The solution is to delete contentpresenter directly. Don't worry, there will be no error!

4. the pop-up drop-down button is different from what we want to achieve, so we need to edit the togglebutton template.

Chrome is Microsoft's default theme layout container. we can delete it directly. The default gray gradient background color will not appear in our combox.

5. Now we can perform any operation on the button style, such as placing the background image and changing the triangle shape.

6. Return to the original interface and change the width of the ComboBox to achieve the above effect.

7. Modify the style of items in the pop-up box. Select Edit itemcontainstyle.

Itemtemplate is a data template. When you add text to an image in the pop-up window, you need to use a data template to bind data.

Itemcontainerstyle is the style template. Is the style of each item in the pop-up.

Itemspanel is the layout template, which is the layout container in the pop-up item. The reason why the items in the pop-up item are vertically arranged is that the itemspanel template of ComboBox is stackpanel by default.

8. We want to set the background color to red when the mouse moves up. Many people may want to change the background color of BD. When you use a trigger to implement this function, you can implement it like this, but when you use a status template, we need to use another implementation method.

9. Add BD to the grid and add a rectangle with a red background color to the grid.

10. Set the transparency of the rectangle to 0. (Set opacity when you want to have an animation effect, and vislbility if not)

11. Select the status panel, then select the Mouseover status, and change the opacity you set to 100.

In this way, our ComboBox is implemented.

 

It is very basic and easy to understand. Otherwise, you will not remember it after reading more.

 

Finally, our goal is no code !!!!!!