XAML GridPanel - XAML

What is XAML GridPanel?

A Grid panel presents a flexible area which includes rows and columns. In a Grid, child factors may be arranged in a tabular form. elements may be introduced to any specific row and column through using the Grid.Row and Grid.Column properties.

By default, a Grid panel is created with one row and one column. multiple rows and columns can be created by using the RowDefinitions and ColumnDefinitions properties. the height of rows and the width of columns may be defined in the following three methods −

Fixed value − To assign a fixed size of logical units (1/96 inch)

Auto − it will take only as much space as is required for the controls in that specific row/column.

Star (*) − it will take the final area while auto and fixed sized are filled.

The hierarchical inheritance of Grid class is as follows −

XAML - GridPanel

Properties

Given below are the commonly used properties of Grid class.

Sr. No.

Property & Description

1

Background

Gets or sets a Brush that fills the panel content area. (Inherited from Panel)

2

Children

Gets a UIElementCollection of child elements of this Panel. (Inherited from Panel.)

3

ColumnDefinitions

Gets a list of ColumnDefinition objects defined on this instance of Grid.

4

Height

Gets or sets the suggested height of the element. (Inherited from FrameworkElement.)

5

ItemHeight

Gets or sets a value that specifies the height of all items that are contained within a WrapPanel.

6

ItemWidth

Gets or sets a value that specifies the width of all items that are contained within a WrapPanel.

7

Margin

Gets or sets the outer margin of an element. (Inherited from FrameworkElement.)

8

Name

Gets or sets the identifying name of the element. The name provides a reference so that code-behind, such as event handler code, can refer to a markup element after it is constructed during processing by a XAML processor. (Inherited from FrameworkElement.)

9

Orientation

Gets or sets a value that specifies the dimension in which child content is arranged.

10

Parent

Gets the logical parent element of this element. (Inherited from FrameworkElement.)

11

Resources

Gets or sets the locally-defined resource dictionary. (Inherited from FrameworkElement.)

12

RowDefinitions

Gets a list of RowDefinition objects defined on this instance of Grid.

13

Style

Gets or sets the style used by this element when it is rendered. (Inherited from FrameworkElement.)

14

Width

Gets or sets the width of the element. (Inherited from FrameworkElement.)

Methods

Given below are the commonly used Methods of Grid class.

Sr. No.

Method & Description

1

GetColumn

Gets the value of the Grid.Column XAML attached property from the specified FrameworkElement.

2

GetColumnSpan

Gets the value of the Grid.ColumnSpan XAML attached property from the specified FrameworkElement.

3

GetRow

Gets the value of the Grid.Row XAML attached property from the specified FrameworkElement.

4

SetColumn

Sets the value of the Grid.Column XAML attached property on the specified FrameworkElement.

5

SetRow

Sets the value of the Grid.Row XAML attached property on the specified FrameworkElement.

6

SetRowSpan

Sets the value of the Grid.RowSpan XAML attached property on the specified FrameworkElement.

Example

The following example indicates a way to add child elements right into a Grid to specify it in a tabular form. here is the XAML implementation in which text Blocks are introduced in the first column and text boxes are added in the second column of a Grid.

When you compile and execute the above code, it will produce the following output−

XAML - GridPanel


We suggest you to execute the above example code and test with some different properties as well.

Nesting of Layout

Nesting of layout way using a layout panel inside another layout, e.g., defining stack panels inside a grid. This concept is widely used to take advantage of multiple layouts in an application.

Example

In the following example, we will be using stack panels inside a grid. let’s have a observe the following XAML code –

When you compile and execute the above code, it will produce the following output –

XAML - GridPanel

We suggest you to execute the above example code and test with a few other nesting layouts.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

XAML Topics