Question

我想创建一个包含3个区域的简单UI，我希望它们如图所示，每个窗口高度约占窗口高度的33％：

我能够做这个宽度网格和他的RowDefinitions，但问题是我希望这三个区域根据窗口宽度改变方向，所以我认为使用StackPanel而不是Grid并将他的“Orientation”属性更改为“水平的“当窗户更大时可能是解决方案。但是现在我面临其他问题，我不知道为每个区域设置自动更改的高度或宽度，因为我不能在Grid.RowDefinitions中为每个区域使用“0.3 *”。

关于如何实现此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;
            }
        }

享受调整窗口大小。

根据窗口大小更改stackpanel的项目高度a和宽度

1 个答案: