c# - 使用 Viewbox 缩放网格内的控件

Question

我有一个控件，我想在调整窗口大小时垂直和水平缩放该控件。另外，我在中间控件的左侧和右侧都有控件，我想与其对齐。我怎样才能实现这个目标？

目前我可以垂直缩放，但不能水平缩放。左侧和右侧的控件被剪切，而不是中间的控件被缩放。

简而言之，我想实现这一点，同时也实现上面左图。

这是控件在现实中的样子。

我当前的 XAML:

<Grid ShowGridLines="True">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid ShowGridLines="True" Grid.Column="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Border x:Name="Left" Grid.Column="1"
                BorderThickness="5" BorderBrush="Red"
                Height="100" Width="150"
                VerticalAlignment="Center">
            <TextBlock Text="Left" />
        </Border>
    </Grid>

    <Viewbox x:Name="Middle" Grid.Column="1" Stretch="Uniform">
        <Border BorderThickness="2" BorderBrush="Black"
                Height="100" Width="60">
            <TextBlock Text="Middle" />
        </Border>
    </Viewbox>

    <Grid ShowGridLines="True" Grid.Column="2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Border x:Name="Right" Grid.Column="0"
                BorderThickness="5" BorderBrush="Red"
                Height="100" Width="150"
                VerticalAlignment="Center" HorizontalAlignment="Right">
            <TextBlock Text="Right" />
        </Border>
    </Grid>

</Grid>

Answer 1

试试这个

<Grid>
    <Grid HorizontalAlignment="Center">
        <Grid ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <Grid Grid.Column="0" ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Border x:Name="Left"
                    Grid.Column="2"
                    Width="150"
                    Height="100"
                    VerticalAlignment="Center"
                    BorderBrush="Red"
                    BorderThickness="5">
                    <TextBlock Text="Left" />
                </Border>
            </Grid>

            <Viewbox x:Name="Middle"
                 Grid.Column="1"
                 Stretch="Uniform">
                <Border Width="60"
                    Height="100"
                    BorderBrush="Black"
                    BorderThickness="2">
                    <TextBlock Text="Middle" />
                </Border>
            </Viewbox>

            <Grid Grid.Column="2" ShowGridLines="True">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Border x:Name="Right"
                    Grid.Column="0"
                    Width="150"
                    Height="100"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"
                    BorderBrush="Red"
                    BorderThickness="5">
                    <TextBlock Text="Right" />
                </Border>
            </Grid>

        </Grid>
    </Grid>
</Grid>