03 - LayoutPanels例子 - SimpleStack

SimpleStack.xaml代码

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiViews.MauiDemos.Book._03.SimpleStack"
             Title="SimpleStack" 
             HeightRequest="300" WidthRequest="750" MinimumWidthRequest="50">
    <StackLayout Margin="3" x:Name="stackPanel1">
        <Label Margin="3" HorizontalOptions="Center" Text="A Button Stack"/>
        
        <Button Margin="3" Text="Button 1" MaximumWidthRequest="200" MinimumWidthRequest="100"/>
        <Button Margin="3" Text="Button 2" MaximumWidthRequest="200" MinimumWidthRequest="100"/>
        <Button Margin="3" Text="Button 3" MaximumWidthRequest="200" MinimumWidthRequest="100"/>
        <Button Margin="3" Text="Button 4" MaximumWidthRequest="200" MinimumWidthRequest="100"/>

        <HorizontalStackLayout HorizontalOptions="Center" VerticalOptions="Center">
            <CheckBox x:Name="chkVertical" CheckedChanged="chkVertical_CheckedChanged"/>
            <Label Text="Use Vertical Orientation" Margin="0,12"/>
        </HorizontalStackLayout>
       
    </StackLayout>
</ContentPage>

对应cs代码

using Microsoft.UI.Xaml.Controls;

namespace MauiViews.MauiDemos.Book._03;

public partial class SimpleStack : ContentPage
{
	public SimpleStack()
	{
		InitializeComponent();
	}

    private void chkVertical_CheckedChanged(object sender, CheckedChangedEventArgs e)
    {
		if (e.Value)
		{
            stackPanel1.Orientation = StackOrientation.Horizontal;
        }
		else
        {
            stackPanel1.Orientation = StackOrientation.Vertical;
        }
    }
}

运行效果