使用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>

Answer 2

这是最终的解决方案，基于@Rise的回答。这样我就可以移除侧控器周围的网格。

<Grid ShowGridLines="True" HorizontalAlignment="Center">

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

    <Border x:Name="Left" Grid.Column="0"
            BorderThickness="5" BorderBrush="Red" 
            Height="100" Width="150"
            VerticalAlignment="Center">
        <TextBlock Text="Left" />
    </Border>

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

    <Border x:Name="Right" Grid.Column="2"
            BorderThickness="5" BorderBrush="Red"
            Height="100" Width="150"
            VerticalAlignment="Center" HorizontalAlignment="Right">
        <TextBlock Text="Right" />
    </Border>

</Grid>