Training
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
In XAML apps, most user interface (UI) elements inherit from the FrameworkElement class. Every FrameworkElement has dimensions, alignment, margin, and padding properties, which influence layout behavior. The following guidance provides an overview of how to use these layout properties to make sure your app's UI is legible and easy to use in any context.
Proper sizing ensures all content is clear and legible. Users shouldn’t have to scroll or zoom to decipher primary content.
Height and Width specify the size of an element. The default values are mathematically NaN
(Not A Number). You can set fixed values measured in effective pixels, or you can use Auto or proportional sizing for fluid behavior.
ActualHeight and ActualWidth are read-only properties that provide the size of an element at runtime. If fluid layouts grow or shrink, then the values change in a SizeChanged event. Note that a RenderTransform will not change the ActualHeight and ActualWidth values.
MinWidth/MaxWidth and MinHeight/MaxHeight specify values that constrain the size of an element while allowing fluid resizing.
FontSize and other text properties control layout size for text elements. While text elements don't have explicitly declared dimensions, they do have calculated ActualWidth and ActualHeight.
Alignment makes your UI look neat, organized, and balanced and can also be used to establish visual hierarchy and relationships.
HorizontalAlignment and VerticalAlignment specify how an element should be positioned within its parent container.
Stretch is the default for both properties, and elements fill all of the space they're provided in the parent container. Real-number Height and Width cancel a Stretch value, which will instead act as a Center value. Some controls, like Button, override the default Stretch value in their default style.
HorizontalContentAlignment and VerticalContentAlignment specify how child elements are positioned within a container.
Alignment can affect clipping within a layout panel. For example, with HorizontalAlignment="Left"
, the right side of the element gets clipped if the content is larger than the ActualWidth.
Text elements use the TextAlignment property. Generally, we recommend using left-alignment, the default value. For more information about styling text, see Typography.
Margin and padding properties keep UI from looking too cluttered or too sparse, and they can also make it easier to use certain inputs like pen and touch. Here's an illustration displaying margins and padding for a container and its content.
Margin controls the amount of empty space around an element. Margin does not add pixels to ActualHeight and ActualWidth and is not considered part of the element for hit testing and sourcing input events.
Margin="20"
, a uniform margin of 20 pixels would be applied to the element on the left, top, right, and bottom sides. With Margin="0,10,5,25"
, the values are applied to the left, top, right, and bottom (in that order).Padding controls the amount of space between the inner border of an element and its child content or elements. A positive Padding value decreases the content area of the element.
Unlike Margin, Padding is not a property of FrameworkElement. There are several classes which each define their own Padding property:
In each of these cases, elements also have a Margin property. If both Margin and Padding are applied, they are additive: the apparent distance between an outer container and any inner content will be margin plus padding.
Let's look at the effects of Margin and Padding on real controls. Here’s a TextBox inside of a Grid with the default Margin and Padding values of 0.
Here’s the same TextBox and Grid with Margin and Padding values on the TextBox as shown in this XAML.
<Grid BorderBrush="Blue" BorderThickness="4" Width="200">
<TextBox Text="This is text in a TextBox." Margin="20" Padding="16,24"/>
</Grid>
You don't have to set each property value individually on a control. It's typically more efficient to group property values into a Style resource and apply the Style to a control. This is especially true when you need to apply the same property values to many controls. For more info about using styles, see XAML styles.
Windows developer feedback
Windows developer is an open source project. Select a link to provide feedback:
Training
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.