Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

Grid

Grid

With the help of the Grid control the above mentioned layouts can be real. One of the most commonly used controls.

The following example includes the definition of a grid with two columns and three rows.

            <Grid ShowGridLines="True">

           <Grid.RowDefinitions>

              <RowDefinition />

              <RowDefinition />

              <RowDefinition />

           </Grid.RowDefinitions>

           <Grid.ColumnDefinitions>

              <ColumnDefinition />

              <ColumnDefinition />

           </Grid.ColumnDefinitions>

       </Grid>

The RowDefinitions and the ColumnDefinitions are elements to define the rows or columns.

During designing and testing the value of ShowGridLines should be set True. In this case, symbolic lines are drawn in the grid when it runs.

Paste three elements into this structure.

It is important to note that the rows and colums numbering starts from zero.

<Button Content="0/0" Width="30"/>

<Label Grid.Row="1"

               Content=" In fact, I'm in the second row of the first column!" />

<Calendar Grid.Row="3" Grid.Column="2" />

The key will be located in the cell [0,0], because of the undefined location. In the case of Label the line is defined, so it will be located the cell [0,1], while the calendar can be found in the second line of the third column. That is why the rows and columns in proportion to share the width and height of the form. Of course, the size of each rows and columns can be adjusted precisely.

       <Grid.RowDefinitions>

           <RowDefinition Height="20"/>

           <RowDefinition  Height="1*"/>

        <RowDefinition Height="2*"/>

       </Grid.RowDefinitions>

       <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition />

       </Grid.ColumnDefinitions>

In our example the first line –height will be 20 pixels, while the first (second) and the second (third) one shares the remaining place at a ratio of 1:2.

<RowDefinition Height="1*"/>

<RowDefinition Height="2*"/>

In this case with the "auto" value the width of the zero-column takes the biggest width driver value among the driver with the content of the column.

<ColumnDefinition Width="auto"/>

IV.1. Grid

With the help of RowSpan and ColumnSpan instructions it is possible to combine rows and columns. These will be discussed in the following example.