Ugrás a tartalomhoz

.NET Programming Technologies

Gergely Kovásznai, Csaba Biró

Eszterházy Károly College

4. fejezet - Layouts (written by Csaba Biró)

4. fejezet - Layouts (written by Csaba Biró)

The planning and execution of the application user interface has to be attractive and practical, and it also has to adapt to different window sizes, not an easy task.

A great advantage of the WPF to support the solving of these situations. The majority of elements used for the user interface creation are from the System.Windows.FrameworkElement – as has been previously were involved.

Alignment, margins

You can find the properties with which the position of the child elements can be set precisely. We will get to know only the four most important among them (Margin, Padding, HorizontalAlignment, VerticalAlignment).

Inner and outer margins

With the help of inner and outer margins we can set the distance between the child elements. While with the Margin property you can specify the distance that can be measured on the outside of the element, and the Padding determines the distance in an element which must be free. However, it is important to note that the Margin property is inherited by all the classes from the FrameworkElement class, but the Padding property can be set only for the elements from the Control Class.

The inner and the outer margins has to be set with 1, 2 and 4 values.

If you want to set the same margin settings on all the sides:


In the case of two numbers the left and the right side, and the second indicates the top and bottom margins.

Margin="10 20"

Négy szám esetében a számok a bal, felső, jobb és alsó margókat jelentik.

Margin="10 20 30 40"

For four numbers means the left, top, right and bottom margins. At accurate values a decimal point is used, the elements may be separated from each other by commas.

Margin="10.25, 2.5, 4.09, 3"

IV.1 Example Inner and outer margins

IV.1. Inner and outer margins

<Grid Height="200" Width="400" Background="Green">

      <Border Margin="10 20 30 40" Background="Yellow">

           <Border Padding="40 30 20 10">

               <Button Content="Margin &amp; Padding" Background="Brown" Foreground="White"/>





The individual child elements can be aligned vertically and horizontally, of course.

Possible values for horizontal alignment: Left, Center, Right, Strech; for vertical alignment: Top, Bottom, Center, Stretch.