使用 Viewbox 缩放网格内的控件

Question

我有一个控件，当 window 调整大小时，我想在垂直和水平方向上进行缩放。此外，我在中间控件的左侧和右侧都有控件，我想与之对齐。我怎样才能做到这一点？

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

总之，我要实现这个，同时还要实现上图左图

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

我现在的 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>

使用 Viewbox 缩放网格内的控件

Use Viewbox to scale a control within a grid

c#

wpf

viewbox