Commonly used layout methods in WPF

WPF (Windows Presentation Foundation) is a UI framework for creating Windows desktop applications. In WPF, there are many layout methods available, the following are some commonly used layout methods and their examples:

Grid layout (Grid): Grid layout is one of the most flexible and powerful layout methods in WPF. It allows you to divide UI elements into rows and columns and place UI elements in each cell. Example:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0" Text="Name:" />
    <TextBox Grid.Row="0" Grid.Column="1" />
    <TextBlock Grid.Row="1" Grid.Column="0" Text="Address:" />
    <TextBox Grid.Row="1" Grid.Column="1" />
</Grid>

Stack Layout (StackPanel): Stack Layout is a simple layout method that stacks UI elements together in horizontal or vertical order. You can use the Orientation property to control the direction of the stack. Example:

<StackPanel Orientation="Horizontal">
    <Button Content="Save" />
    <Button Content="Cancel" />
</StackPanel>

Flow layout (WrapPanel): Flow layout is an adaptive layout method that arranges UI elements in a row or column in horizontal or vertical order. When elements cannot be displayed in a row or column, they will automatically new line. Example:

<WrapPanel>
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
    <Button Content="Button 4" />
    <Button Content="Button 5" />
    <Button Content="Button 6" />
</WrapPanel>

Uniform layout (UniformGrid): Uniform layout UI elements are evenly distributed in a grid. You can use the Rows and Columns properties to control the number of rows and columns. Example:

<UniformGrid Rows="2" Columns="2">
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
    <Button Content="Button 4" />
</UniformGrid>

DockPanel: DockPanel is a layout method that allows you to place UI elements on the top, bottom, left, right or center of the container. Example:

<DockPanel>
    <Button DockPanel.Dock="Top" Content="Top" />
    <Button DockPanel.Dock="Left" Content="Left" />
    <Button DockPanel.Dock="Right" Content="Right" />
    <Button DockPanel.Dock="Bottom" Content="Bottom" />
    <Button Content="Center" />
</DockPanel>

Canvas: Canvas is used to draw controls where they are not placed in rows or columns. Using Canvas, the control can be drawn on the specified coordinates, and the position and size of the control can be adjusted freely.

For example, the following XAML code displays a Canvas that contains two Button controls. Among them, the first Button control is located in the upper left corner of the Canvas, and the second Button control is located in the lower right corner of the Canvas.

<Canvas>
    <Button Canvas.Left="0" Canvas.Top="0" Content="Button 1"/>
    <Button Canvas.Right="0" Canvas.Bottom="0" Content="Button 2"/>
</Canvas>

Grid is used to organize controls into a grid of rows and columns. By defining rows and columns in the Grid, you can easily place controls on specified rows and columns.

For example, the following XAML code displays a Grid that contains four Button controls. Among them, the first Button control is located in the first row and the first column, the second Button control is located in the first row and the second column, the third Button control is located in the second row and the first column, and the fourth Button control is located in the second row The second column.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Button Content="Button 1" Grid.Row="0" Grid.Column="0"/>
    <Button Content="Button 2" Grid.Row="0" Grid.Column="1"/>
    <Button Content="Button 3" Grid.Row="1" Grid.Column="0"/>
    <Button Content="Button 4" Grid.Row="1" Grid.Column="1"/>
</Grid>

The above are several layout methods commonly used in WPF and their examples. Complex interface layouts can be easily implemented using these layout methods.

Commonly used layout methods in WPF

Guess you like