WPF learning 2 Layout

Hefei programmer group: 49313181. Hefei real-name programmer group: 128131462 (those who do not want to disclose their names and information should not join)
Q: 408365330 E-Mail: egojit@qq.com

 

All interface program development starts with the layout. A good layout is pleasing to the eye. Windows developers have made significant improvements in Designing user interfaces. The WPF layout system uses stream-based layout standards. WPF uses the XML format-based document definitions such as XAML to deploy and create interfaces. It separates the designer from the Coder. Here we recommend a good WPF Designer's expression blend tool. This can design a very beautiful WPF interface. Of course, it is much more powerful than.

Compared with the previous WinForm layout, the WPF layout is already an art (personal opinion ). It is ugly to adapt to various resolution devices and look better. :). Besides, WPF does not learn layout, so it is difficult for us to start encoding. Try to see how big the gap is.

In WPF, layout is a professional course. It is very different from WinForm. The most widely used in WPF is Grid. The Grid control panel is the most powerful layout container of WPF. Grid splits the elements into invisible row and column grids. Of course, other layout elements can be placed in cells. In Grid layout, there is a principle that no cell is an element.

Create a WPF project.

Because Grid is powerful and commonly used, the Grid element is added to the WPF form in Windows by default. For the generated App. xaml, we now know that it is relative to the entry file. The initial window is defined here.

The automatically added code is as follows:

<Window x:Class="WPFGrid.MainWindow"        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        Title="MainWindow" Height="350" Width="525">    <Grid>            </Grid></Window>

It is easy to see that the Grid node is generated by default under the Window node. First, we need to define rows and columns. Here we define two rows and two columns.

            <Grid DockPanel.Dock="Left" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  ShowGridLines="True">                <Grid.RowDefinitions>                    <RowDefinition></RowDefinition>                    <RowDefinition></RowDefinition>                </Grid.RowDefinitions>                <Grid.ColumnDefinitions>                    <ColumnDefinition Width="206*"></ColumnDefinition>                    <ColumnDefinition Width="845*"></ColumnDefinition>                </Grid.ColumnDefinitions>            </Grid>

RowDefinitions and ColumnDefinitions are defined respectively. In this way, the elements can be placed in the corresponding cells.

So how can we put elements in the corresponding cells? You can use Grid. Row and Grid. Column to set the Row and Column of the element to set the cell. Here we do not consider the rationality of the layout. Place a tree control on the two rows in the first column of the edge (many of our controls here are Dev controls, so the Dev control is not described too much. The layout code in the Grid is as follows:

<Grid DockPanel.Dock="Left" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  ShowGridLines="True">                <Grid.RowDefinitions>                    <RowDefinition/>                    <RowDefinition/>                </Grid.RowDefinitions>                <Grid.ColumnDefinitions>                    <ColumnDefinition Width="206*"/>                    <ColumnDefinition Width="845*"/>                </Grid.ColumnDefinitions>                                <dxg:TreeListControl Grid.Row="0" AutoPopulateColumns="True"  Grid.RowSpan="2" VerticalAlignment="Stretch"  HorizontalAlignment="Stretch">                    <dxg:TreeListControl.Columns>                        <dxg:TreeListColumn/>                        <dxg:TreeListColumn/>                        <dxg:TreeListColumn/>                        <dxg:TreeListColumn/>                        <dxg:TreeListColumn/>                    </dxg:TreeListControl.Columns>                    <dxg:TreeListControl.View>                        <dxg:TreeListView ShowTotalSummary="True"/>                    </dxg:TreeListControl.View>                </dxg:TreeListControl>            </Grid>

 

We can easily see that the TreeList control contains Grid. Row = "0", that is, let it be in the first line. Grid. Column = "0 ". The tree is placed in the first row and the first column. However, there is a very important attribute. If the row is located, Grid. RowSpan = "2" indicates that the row is located. VerticalAlignment = "Stretch" HorizontalAlignment = "Stretch" These two attributes are that the horizontal and vertical la s of elements are full. Refer to run:

Previously, I set the Grid attribute ShowGridLines = "True". This is to make the Grid have a border so that we can understand it easily. Grid has the Hight attribute and Width attribute. In the above code, I have not set the height attribute of RowDefinition. The default value is the upper and lower equal points. That is, the two rows are as high. In fact, there are several settings for Height. You can give a fixed value, such as Height = "60", or in the form of Height = "*", in this example, we can set the first line to Height = "60", and the second line to Height = "*". because there are only two rows, one advantage is that we have defined the height of the first row, and the remaining row can be allocated as the height of the second row. In this way, we do not need to manually calculate the height of a row, so we can use the rest as a row. The Width of ColumnDefinition has the same setting method. Grid also has a good attribute. HTML may be easy to understand. A Margin attribute that sets the Margin of the element and panding to set the padding of the layout element.

We have used RowSpan to span rows. Its value is the number of rows that span. You can set columns in the same way.

The basics of Grid should be learned. Grid is generally used for overall layout. Slight layout and adjustment may be other elements, which is a bit similar to the previous Table layout of HTML (currently DIV + CSS is much more ).

Here we can use Grid for basic layout.

Copyright: it belongs to the blog and Egojit websites. For details, refer to the source.