How to set Height and Width of Elements: WPF

Panels, also called parent elements, supports multiple child elements to be arranged in it. Parents decide about where to render and how much space the children get. WPF elements tend to size to their content that is to be done through its SIzeToContent property.

Height & Width:

There are several properties which are used for layouts of an element, some are size related and some are position related. Size related properties includes height, width, margin and padding. Position related properties includes horizontal & vertical alignment.

All the elements have height and width properties and also they have MinHeight, MinWidth, MaxHeight, MaxWidth to specify the values. Height/Width property is used to get or set the suggested height/width of the respective element.

We can create a textblock with height(100) and width(200) using the below xaml code.

<TextBlock Text="Hello World" Height="100" Width="200" Background="Black"/>

The above code may be written like the below code as we have discussed in our “earlier post”.

<TextBlock>
<TextBlock.Text>Hello World</TextBlock.Text>
<TextBlock.Height>100</TextBlock.Height>
<TextBlock.Width>200</TextBlock.Width>
<TextBlock.Background>Black</TextBlock.Background>
</TextBlock>

The textblock looks like as the following screenshot:

Element also contains some more size-related properties like DesiredSize, RenderSize, ActualHeight and ActualWidth. RenderSize represents the final size of an element, and ActualWidth and ActualHeight are exactly same as the final width and final height of an element. DesiredSize is used when IsMeasureValid property is true for an element.

Alignments and Margin & Padding