Layout controls in WPF

In WPF, panel is used for page layout. Panel is an abstract class and serves as the base class of all panel controls. Panel does not inherit from the control class, but directly inherits from frameworkelement. View the inheritance relationship of panel:

Panel has the following Derived classes: canvas, dockpanel, grid, stackpanel, virtualizingstackpanel, and wrappanel. The panel controls are described as follows:

I. Canvas

In the canvas area, specify the coordinates relative to the coordinates to indicate the position of the stator control. You can set coordinates for four locations: Left, right, top, and bottom.

1) specify

In XAML, the canvas sub-element is set by using the additional attributes of the canvas. See the following code:

<Canvas name = "mycanvas">

<Button name = "left10top10" canvas. Left = "10" canvas. Top = "10" width = "110" Height = "30"> left10top10 </button>

<Button name = "left10bottom10" canvas. Left = "10" canvas. Bottom = "10" width = "110" Height = "30"> left10bottom10 </button>

<Button name = "right10top10" canvas. Right = "10" canvas. Top = "10" width = "110" Height = "30"> right10top10 </button>

<Button name = "right10bottom10" canvas. Right = "10" canvas. Bottom = "10" width = "110" Height = "30"> right10bottom10 </button>

</Canvas>

If the button element contains a canvas. left and canvas. right, follow the canvas. left. Similarly, canvas. top and canvas. if bottom exists at the same time. top.

2) set in the code

ButtonButton =New Button();

Button. width = 20;

Button. Height = 20;

This. Mycanvas. Children. Add (button );

Canvas. Setleft (button, 20 );

Canvas. Settop (button, 20 );

3) Final

2. dockpanel

Dockpanel is used to set how child elements dock. There are four methods to dock: dockpanel. Left, dockpanel. Right, dockpanel. Top, and dockpanel. Bottom ).

1) specify

Specify the dockpanel. Dock attribute in the sub-element to locate it. This is an additional attribute.

<Dockpanel name = "mydockpanel">

<Button name = "btntop" width = "50" Height = "30" content = "TOP" dockpanel. Dock = "TOP"> </button>

<Button name = "btnleft" width = "50" Height = "30" content = "Left" dockpanel. Dock = "Left"> </button>

<Button name = "btnright" width = "50" Height = "30" content = "right" dockpanel. Dock = "right"> </button>

<Button name = "btnbottom" width = "50" Height = "30" content = "bottom" dockpanel. Dock = "bottom"> </button>

</Dockpanel>

2) specify

// Create a button

ButtonButton =New Button();

Button. width = 1;

Button. Height = 1;

This. Mydockpanel. Children. Add (button );

// Specify the dock location

System. Windows. controls.Dockpanel. Setdock (button,Dock. Bottom );

The setdock is used to set the position of the child element in the dockpanel. It is a static method. Although this method does not specify the dockpanel to which the button should be docked, The dockpanel where the button is located is fixed, so it will be determined based on this link.

3) Final

3. Grid

Grid creates a table by defining rows and columns. The child element can display the interface layout by specifying the row and column cells to display.

1) specify

In XAML, you can use <rowdefinition> to define how many rows and <columndefinition> to define how many columns. Specify the grid in the sub-element. row and grid. column indicates the row number and column number. Both attributes are additional attributes and count from 0.

<Grid name = "mygrid">

<Grid. rowdefinitions>

<Rowdefinition> </rowdefinition>

<Rowdefinition> </rowdefinition>

<Rowdefinition> </rowdefinition>

</Grid. rowdefinitions>

<Grid. columndefinitions>

<Columndefinition> </columndefinition>

<Columndefinition> </columndefinition>

</Grid. columndefinitions>

<Button name = "btn1" width = "100" Height = "30" grid. row = "0" grid. column = "0" content = "first row, first column"> </button>

<Button name = "btn2" width = "100" Height = "30" grid. row = "0" grid. column = "1" content = "second column of the First row"> </button>

<Button name = "btn3" width = "100" Height = "30" grid. row = "1" grid. column = "0" content = "first column of the Second row"> </button>

<Button name = "btn4" width = "100" Height = "30" grid. row = "1" grid. column = "1" content = "second row and second column"> </button>

</GRID>

2) specify

ButtonBtn5 =New Button();

B tn5.width = 100;

Btn5.height = 30;

Btn5.content = "Row 3 ";

This. Mygrid. Children. Add (btn5 );

System. Windows. controls.Grid. Setrow (btn5, 2 );

System. Windows. controls.Grid. Setcolumn (btn5, 0 );

System. Windows. controls.Grid. Setcolumnspan (btn5, 2 );

In the code, setrow is used to set the row where the child element locates in the grid, and setcolumn is used to set the column where the child element locates in the grid.

There is also a setcolumnspan. Why is it used? Sets the column span. In this column, it is originally displayed in the first column of the third row. Now there is an extra span, it seems that the two columns in the third row are merged into one column. This is also true for setrowspan, which is not described here.

Iv. stackpanel

Stackpanel is used to set how the sub-elements are arranged, vertical or horizontal. It is arranged in a straight line. Stackpanel can be arranged in two ways: vertical (default) and horizontal.

1) specify

The default layout of stackpanel is vertical (vertical), but if you want to specify it as horizontal, you can use the attribute orientation.

<Window. Resources>

<Style X: Key = "border" targettype = "{X: type border}">

<Setter property = "background" value = "darkgreen"> </setter>

<Setter property = "borderbrush" value = "white"> </setter>

<Setter property = "borderthickness" value = "2"> </setter>

</Style>

<Style X: Key = "textblock" targettype = "{X: Type textblock}">

<Setter property = "foreground" value = "white"> </setter>

</Style>

</Window. Resources>

<Stackpanel>

<Border style = "{staticresource border}">

<Textblock text = "A" style = "{staticresource textblock}"> </textblock>

</Border>

<Border style = "{staticresource border}">

<Textblock text = "B" style = "{staticresource textblock}"> </textblock>

</Border>

</Stackpanel>

2) specify

BorderBorder =New Border();

Border. Background =Brushes. Darkgreen;

Border. borderbrush =Brushes. White;

Border. borderthickness =New Thickness(2 );

This. Mystackpanel. Children. Add (Border );

TextblockTextblock =New Textblock();

Textblock. Foreground =Brushes. White;

Textblock. Text = "C ";

Border. Child = textblock;

3) Final

V. virtualizingstackpanel

Virtualizingstackpanel provides the "virtualization" function based on common stackpanel. What is "virtualization? First, let's look at a scenario. If you have a bunch of item-based data and you only need to display some of them on the interface, but if you create interface elements for all the data in it, and show the elements you need, then this will be time-consuming." Virtualization is used to solve this problem. It can only create interface elements of the data you want to display.

The virtualizingstackpanel item provides "virtualization" only when the data is bound. Otherwise, it is no different from the normal stackpanel.

1) specify it in XAML (the test was successful and the code is added, but there are still some questions)

For the 2000 Items I tested, the use of the <virtualizingstackpanel> response is millisecond-level, but the default method takes at least three seconds, and the improvement is obvious.

<Stackpanel orientation = "horizontal">

<ComboBox Height = "23" name = "personlist" width = "120">

<ComboBox. itemspanel>

<Itemspaneltemplate>

<Virtualizingstackpanel>

</Virtualizingstackpanel>

</Itemspaneltemplate>

</ComboBox. itemspanel>

<ComboBox. itemtemplate>

<Datatemplate>

<Textblock text = "{binding Path = Name}"> </textblock>

</Datatemplate>

</ComboBox. itemtemplate>

</ComboBox>

<Button Height = "23" name = "button1" width = "75" Click = "button#click"> attach a member </button>

</Stackpanel>

The key point here is to change the default <stackpanel> of ComboBox to <virtualizingstackpanel> in <itempanel>.

However, if I set it through virtualizingstackpanel. isvirtualizing = "true", it does not work. If anyone knows the reason, please let us know.

In the background code, you must first create a class person with only one attribute name. The code is too simple to be pasted.

In the background code of the window, create a list <person> to save the temporary member and assign it to ComboBox.

List<Person> Persons =New List<Person> ();

For(IntI = 0; I <2000; I ++)

{

PersonPerson =New Person();

Person. Name = I. tostring ();

This. Persons. Add (person );

}

This. Personlist. itemssource = Persons;

Vi. wrappanel

Wrappanel is used to locate sub-elements in the order of the horizontal or vertical direction. When it reaches the edge, the line feed starts from the new line.

1) specify

The default direction of wrappanel is horizontal. If you want to use vertical, you must specify it as orientation = "vertical ". The horizontal direction is based on width, and the vertical direction is based on height.

<Wrappanel name = "mywrappanel" width = "200" orientation = "horizontal">

<Button width = "50" Height = "25"> width: 50 </button>

<Button width = "150" Height = "25"> width: 150 </button>

<Button width = "100" Height = "25"> width: 100 </button>

<Button width = "101" Height = "25"> width: 101 </button>

</Wrappanel>

2) specify

ButtonButton1 =New Button();

Button1.width = 50;

This. Mywrappanel. Children. Add (button1 );

3) Final