Add Some Layout

Avalonia provides a range of built-in controls to help you layout the visual elements of an application. On this page, you will see how to use some of these layout controls.

At this stage, your application has a single button located in the content zone of the main window.

In fact, an Avalonia Window allows only one control in its content zone. To show multiple visual elements, you must use a layout control that allows multiple controls within its content zone.

StackPanel

The StackPanel control lays out a sequence of controls in the order they are defined in XAML. By default, it lays out in a vertical stack but this can be changed to horizontal with its Orientation property.

<StackPanel>
    <TextBlock>1</TextBlock>
    <TextBlock>2</TextBlock>
</StackPanel>

TextBlock

The TextBlock control allows extensive styling of its contained text.

To take the example forward, add a StackPanel as follows (include the preexisting Button XAML):

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:GetStartedApp.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="400" d:DesignHeight="450"
        x:Class="GetStartedApp.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Icon="/Assets/avalonia-logo.ico"
        Title="GetStartedApp">

    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <StackPanel>
        <Border Margin="5" CornerRadius="10" Background="LightBlue">
            <TextBlock Margin="5"
                       FontSize="24" 
                       HorizontalAlignment="Center"
                       Text="Temperature Converter">
            </TextBlock>
        </Border>

        <Button HorizontalAlignment="Center">Calculate</Button>
    </StackPanel>
</Window>

信息

You can explore the other layout controls in Avalonia using the reference here.

On the next page, you will add some inputs to the middle of the window.