如何基于窗口尺寸调整StackPanel子项宽高，实现三区域自适应布局

嘿，我来帮你搞定这个自适应布局的问题！你想用StackPanel替代Grid实现根据窗口宽度切换排列方向，同时让三个子项自动调整宽高，对吧？这里有两种靠谱的方案，你可以根据需求选择：

其实不用完全放弃Grid，结合VisualStateManager可以更精准地控制布局切换，而且稳定性更好。核心思路是根据窗口宽度阈值，切换Grid的行列定义和子元素的位置：

<Window x:Class="AdaptiveLayoutDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="自适应布局" MinWidth="300" MinHeight="300">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="LayoutStates">
                <!-- 窗口较窄：纵向排列，每个区域占1/3高度 -->
                <VisualState x:Name="VerticalLayout">
                    <VisualState.Setters>
                        <Setter Target="MainGrid.RowDefinitions[0].Height" Value="*"/>
                        <Setter Target="MainGrid.RowDefinitions[1].Height" Value="*"/>
                        <Setter Target="MainGrid.RowDefinitions[2].Height" Value="*"/>
                        <Setter Target="MainGrid.ColumnDefinitions[0].Width" Value="Auto"/>
                        <Setter Target="Region1.Grid.Column" Value="0"/>
                        <Setter Target="Region1.Grid.Row" Value="0"/>
                        <Setter Target="Region2.Grid.Column" Value="0"/>
                        <Setter Target="Region2.Grid.Row" Value="1"/>
                        <Setter Target="Region3.Grid.Column" Value="0"/>
                        <Setter Target="Region3.Grid.Row" Value="2"/>
                    </VisualState.Setters>
                </VisualState>
                <!-- 窗口较宽：横向排列，每个区域占1/3宽度 -->
                <VisualState x:Name="HorizontalLayout">
                    <VisualState.Setters>
                        <Setter Target="MainGrid.ColumnDefinitions[0].Width" Value="*"/>
                        <Setter Target="MainGrid.ColumnDefinitions[1].Width" Value="*"/>
                        <Setter Target="MainGrid.ColumnDefinitions[2].Width" Value="*"/>
                        <Setter Target="MainGrid.RowDefinitions[0].Height" Value="Auto"/>
                        <Setter Target="Region1.Grid.Column" Value="0"/>
                        <Setter Target="Region1.Grid.Row" Value="0"/>
                        <Setter Target="Region2.Grid.Column" Value="1"/>
                        <Setter Target="Region2.Grid.Row" Value="0"/>
                        <Setter Target="Region3.Grid.Column" Value="2"/>
                        <Setter Target="Region3.Grid.Row" Value="0"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid x:Name="MainGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!-- 三个区域，你可以替换成自己的内容 -->
            <Border x:Name="Region1" Background="LightBlue" Margin="5"/>
            <Border x:Name="Region2" Background="LightGreen" Margin="5"/>
            <Border x:Name="Region3" Background="LightPink" Margin="5"/>
        </Grid>
    </Grid>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.SizeChanged">
            <BeginStoryboard>
                <Storyboard>
                    <!-- 设置宽度阈值为600px，超过则切换到横向布局 -->
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutStates" Storyboard.TargetProperty="CurrentState">
                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static local:MainWindow.HorizontalLayout}" >
                            <DiscreteObjectKeyFrame.Condition>
                                <Condition Binding="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Window}}" Condition="GreaterThan" Value="600"/>
                            </DiscreteObjectKeyFrame.Condition>
                        </DiscreteObjectKeyFrame>
                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{x:Static local:MainWindow.VerticalLayout}" >
                            <DiscreteObjectKeyFrame.Condition>
                                <Condition Binding="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Window}}" Condition="LessThanOrEqual" Value="600"/>
                            </DiscreteObjectKeyFrame.Condition>
                        </DiscreteObjectKeyFrame>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
</Window>

这个方案的好处是：Grid的星号布局能精准分配每个区域的空间，切换时没有布局抖动，而且维护起来更直观。

如果你一定要用StackPanel，可以通过绑定窗口尺寸结合值转换器来动态设置子项的宽高：

首先创建一个值转换器，用来根据窗口宽度和StackPanel方向计算子项尺寸：

using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;

namespace AdaptiveLayoutDemo
{
    public class LayoutSizeConverter : IMultiValueConverter
    {
        // 参数0：窗口ActualWidth；参数1：StackPanel的Orientation
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            if (values.Length != 2 || !(values[0] is double windowWidth) || !(values[1] is Orientation orientation))
                return double.NaN;

            const double widthThreshold = 600;
            if (orientation == Orientation.Horizontal)
            {
                // 横向时，子项宽度占窗口1/3，高度填满StackPanel
                return windowWidth / 3;
            }
            else
            {
                // 纵向时，子项高度占窗口1/3，宽度填满StackPanel
                return Application.Current.MainWindow.ActualHeight / 3;
            }
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

然后在XAML中使用这个转换器，同时通过DataTrigger切换StackPanel的方向：

<Window x:Class="AdaptiveLayoutDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:AdaptiveLayoutDemo"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="StackPanel自适应布局" MinWidth="300" MinHeight="300">
    <Window.Resources>
        <local:LayoutSizeConverter x:Key="LayoutSizeConverter"/>
    </Window.Resources>
    <StackPanel x:Name="MainStack">
        <!-- 根据窗口宽度切换Orientation -->
        <StackPanel.Style>
            <Style TargetType="StackPanel">
                <Setter Property="Orientation" Value="Vertical"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Window}}">
                        <DataTrigger.Value>
                            <sys:Double>600</sys:Double>
                        </DataTrigger.Value>
                        <DataTrigger.Comparison>
                            <GreaterThan/>
                        </DataTrigger.Comparison>
                        <Setter Property="Orientation" Value="Horizontal"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Style>

        <!-- 第一个区域 -->
        <Border Background="LightBlue" Margin="5">
            <Border.Width>
                <MultiBinding Converter="{StaticResource LayoutSizeConverter}">
                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType=Window}"/>
                    <Binding Path="Orientation" ElementName="MainStack"/>
                </MultiBinding>
            </Border.Width>
            <Border.Height>
                <MultiBinding Converter="{StaticResource LayoutSizeConverter}">
                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType=Window}"/>
                    <Binding Path="Orientation" ElementName="MainStack"/>
                </MultiBinding>
            </Border.Height>
        </Border>

        <!-- 第二个区域 -->
        <Border Background="LightGreen" Margin="5">
            <Border.Width>
                <MultiBinding Converter="{StaticResource LayoutSizeConverter}">
                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType=Window}"/>
                    <Binding Path="Orientation" ElementName="MainStack"/>
                </MultiBinding>
            </Border.Width>
            <Border.Height>
                <MultiBinding Converter="{StaticResource LayoutSizeConverter}">
                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType=Window}"/>
                    <Binding Path="Orientation" ElementName="MainStack"/>
                </MultiBinding>
            </Border.Height>
        </Border>

        <!-- 第三个区域 -->
        <Border Background="LightPink" Margin="5">
            <Border.Width>
                <MultiBinding Converter="{StaticResource LayoutSizeConverter}">
                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType=Window}"/>
                    <Binding Path="Orientation" ElementName="MainStack"/>
                </MultiBinding>
            </Border.Width>
            <Border.Height>
                <MultiBinding Converter="{StaticResource LayoutSizeConverter}">
                    <Binding Path="ActualWidth" RelativeSource="{RelativeSource AncestorType=Window}"/>
                    <Binding Path="Orientation" ElementName="MainStack"/>
                </MultiBinding>
            </Border.Height>
        </Border>
    </StackPanel>
</Window>

注意：StackPanel本身是流式布局，动态设置尺寸可能会出现轻微的布局抖动，所以如果追求稳定性，还是推荐第一种Grid的方案。

内容的提问来源于stack exchange，提问作者user7914418