根据 window 大小更改堆栈面板的项目高度 a 和宽度

Question

我想制作一个包含 3 个区域的简单 UI，我希望它们如图所示，每个区域使用大约 Window 高度的 33%：

我能够用 Grid 和他的 RowDefinitions 做这个宽度，但问题是我希望这三个区域根据 window 宽度改变方向，所以我认为使用 StackPanel 而不是 Grid 并改变他的 [=当 window 较大时，23=] 属性到 "Horizontal" 可能是解决方案。但现在我面临其他问题，我不知道为每个自动更改的区域设置高度或宽度，因为我不能在 Grid.RowDefinitions.[= 中为每个喜欢使用“0.3*” 13=]

关于如何实现这个 UI 的任何想法？

谢谢！

编辑：好的，基于这里的评论是我的实际代码：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="500"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    // Changes on orientation
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.35*"/>
        <RowDefinition Height="0.30*"/>
        <RowDefinition Height="0.35*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Background="Green">

    </Grid>
    <Grid Grid.Row="1">

    </Grid>
    <Grid Grid.Row="2" Background="Blue">

    </Grid>
</Grid>

Answer 1

这里是XAML：

<Grid SizeChanged="Stack_OnSizeChanged">
    <StackPanel Orientation="{x:Bind Orientation, Mode=OneWay}">
        <Rectangle Height="{x:Bind PercentHeight, Mode=OneWay}" Width="{x:Bind PercentWidth, Mode=OneWay}" Fill="Lime"/>
        <Rectangle Height="{x:Bind PercentHeight, Mode=OneWay}" Width="{x:Bind PercentWidth, Mode=OneWay}" Fill="DeepPink"/>
        <Rectangle Height="{x:Bind PercentHeight, Mode=OneWay}" Width="{x:Bind PercentWidth, Mode=OneWay}" Fill="DeepSkyBlue"/>
    </StackPanel>
</Grid>

下面是代码：

        public static readonly DependencyProperty PercentHeightProperty = DependencyProperty.Register(
            "PercentHeight", typeof(double), typeof(MyUserControl1), new PropertyMetadata(default(double)));

        public double PercentHeight
        {
            get => (double) GetValue(PercentHeightProperty);
            set => SetValue(PercentHeightProperty, value);
        }

        public static readonly DependencyProperty PercentWidthProperty = DependencyProperty.Register(
            "PercentWidth", typeof(double), typeof(MyUserControl1), new PropertyMetadata(default(double)));

        public double PercentWidth
        {
            get => (double) GetValue(PercentWidthProperty);
            set => SetValue(PercentWidthProperty, value);
        }

        public static readonly DependencyProperty OrientationProperty = DependencyProperty.Register(
            "Orientation", typeof(Orientation), typeof(MyUserControl1), new PropertyMetadata(default(Orientation)));

        public Orientation Orientation
        {
            get => (Orientation) GetValue(OrientationProperty);
            set => SetValue(OrientationProperty, value);
        }

        private int _count = 3;

        public MyUserControl1()
        {
            InitializeComponent();
        }

        private void Stack_OnSizeChanged(object sender, SizeChangedEventArgs e)
        {
            Orientation = e.NewSize.Width > 512 ? Orientation.Horizontal : Orientation.Vertical;

            if (Orientation == Orientation.Horizontal)
            {
                PercentHeight = e.NewSize.Height;
                PercentWidth = e.NewSize.Width / _count;
            }
            else
            {
                PercentHeight = e.NewSize.Height / _count;
                PercentWidth = e.NewSize.Width;
            }
        }

享受调整 window 大小的乐趣。

根据 window 大小更改堆栈面板的项目高度 a 和宽度

Change stackpanel's items height a and width based on window size

user-interface

xaml

stackpanel

uwp

uwp-xaml