UI Layout in WinUI

Welcome to the UI Layout section of our WinUI tutorial series. In this chapter, we'll explore how to arrange elements on your screen to create intuitive and visually appealing user interfaces.

Understanding Layout Panels

WinUI provides a variety of layout panels that act as containers for your UI elements. Each panel has its own rules for positioning and sizing child elements. The most common ones include:

1. StackPanel

A StackPanel arranges its children in a single line, either horizontally or vertically. It's perfect for simple lists of items.

<StackPanel Orientation="Vertical" Spacing="10">
    <TextBlock Text="First Item"/>
    <Button Content="Click Me"/>
    <Image Source="ms-appx:///Assets/icon.png"/>
</StackPanel>

2. Grid

The Grid panel divides its available space into rows and columns, allowing for precise positioning of elements in a table-like structure. You can define rows and columns with specific sizes or have them auto-adjust.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Row="0" Grid.Column="0" Text="Label:" VerticalAlignment="Center"/>
    <TextBox Grid.Row="0" Grid.Column="1" Margin="5"/>
    <Button Grid.Row="1" Grid.ColumnSpan="2" Content="Submit" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>

3. RelativePanel

RelativePanel allows you to position elements relative to each other or to the panel's edges. This offers great flexibility for adaptive layouts.

<RelativePanel>
    <Image Source="ms-appx:///Assets/logo.png" Width="50" Height="50" x:Name="LogoImage" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignTopWithPanel="True"/>
    <TextBlock Text="Welcome!" FontSize="24" RelativePanel.RightOf="LogoImage" RelativePanel.AlignVerticalCenterWith="LogoImage" Margin="10,0,0,0"/>
    <Button Content="Sign In" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True"/>
</RelativePanel>

Common Layout Properties

Regardless of the panel used, several properties are fundamental for controlling element appearance and placement:

Margin: Space outside the element's border.
Padding: Space inside the element's border, between the border and the content.
HorizontalAlignment: Alignment along the horizontal axis (Left, Center, Right, Stretch).
VerticalAlignment: Alignment along the vertical axis (Top, Center, Bottom, Stretch).
Width/Height: The dimensions of the element.
MinWidth/MaxWidth: Minimum and maximum allowed width.
MinHeight/MaxHeight: Minimum and maximum allowed height.

Creating Responsive Layouts

WinUI encourages responsive design, ensuring your app looks good on various screen sizes. Using panels like RelativePanel and defining row/column definitions with the * (star) sizing can help achieve this. You can also use Visual States to adapt your layout based on screen size or other conditions.

Tip: Experiment with different layout panels and their properties in Visual Studio's XAML designer to see how they affect your UI in real-time.

Next Steps

Now that you have a grasp of UI layout, let's move on to exploring the core controls available in WinUI and how to use them effectively.

Next: Core Controls »