c# - 如何将矩形的边距绑定(bind)到顶部/底部和左侧/右侧的两个滑块

我正在尝试制作一个wpf程序，其中包含一个矩形，顶部有两个滑块：



第一个滑块更改矩形的左/右边缘，而右滑块更改上/下边缘，因此看起来矩形变得越来越小。但是，如果更改窗口大小，则矩形正在调整。

这是我的代码：

<Window x:Class="Rechteck.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        >
    <Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="50*"/>
                <ColumnDefinition Width="50*"/>
            </Grid.ColumnDefinitions>

            <TextBlock Grid.Column="0" HorizontalAlignment="Center">Rand top/bottom</TextBlock>
            <Slider Grid.Column="0"
              x:Name="MySlider"
              VerticalAlignment="Top"
              Minimum="10"
              Maximum="300"
              Value="150"
              Margin="10" />

            <TextBlock Grid.Column="1" HorizontalAlignment="Center">Rand left/right</TextBlock>
            <Slider Grid.Column="1"
                x:Name="MySlider2"
                VerticalAlignment="Top"
                Minimum="10"
                Maximum="300"
                Value="150"
                Margin="10" />
        </Grid>

        <Grid>
            <Rectangle x:Name="rechteck"
            Width="300"
            Height="300"
            Margin="{Binding ElementName=MySlider2, Path=Value}"
            Fill="black"
            VerticalAlignment="Center"
            HorizontalAlignment="Center" />
        </Grid>
    </Grid>
</Window>

最佳答案

如果要在调整Rectangle大小时Window保持大小，则不要绑定Margin并保持Width和Height固定，请将它们绑定到适当的Slider：

<Rectangle
    x:Name="rechteck"
    Width="{Binding ElementName=MySlider2, Path=Value}"
    Height="{Binding ElementName=MySlider, Path=Value}"
    Fill="black"
    VerticalAlignment="Center"
    HorizontalAlignment="Center"/>

编辑

如果要Rectangle调整为Window大小，则不要设置固定的Width / Height和HorizontalAlignment / VerticalAlignment，而只能通过自定义Margin绑定IMultiValueConverter：

public class MarginConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        return new Thickness((double)values[0], (double)values[1], (double)values[0], (double)values[1]);
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

并如下更改您的Grid：

<Window ... xmlns:local="clr-namespace:Namespace.For.MarginConverter">
    <Grid>
        <Grid.Resources>
            <local:MarginConverter x:Key="MarginConverter"/>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*"/>
            <ColumnDefinition Width="50*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <TextBlock Grid.Column="0" HorizontalAlignment="Center">Rand top/bottom</TextBlock>
        <Slider Grid.Column="0"
              x:Name="MySlider"
              VerticalAlignment="Top"
              Minimum="10"
              Maximum="300"
              Value="150"
              Margin="10" />

        <TextBlock Grid.Column="1" HorizontalAlignment="Center">Rand left/right</TextBlock>
        <Slider Grid.Column="1"
                x:Name="MySlider2"
                VerticalAlignment="Top"
                Minimum="10"
                Maximum="300"
                Value="150"
                Margin="10" />
        <Rectangle Grid.Row="1" Grid.ColumnSpan="2" x:Name="rechteck" Fill="black">
            <Rectangle.Margin>
                <MultiBinding Converter="{StaticResource MarginConverter}">
                    <Binding ElementName="MySlider2" Path="Value"/>
                    <Binding ElementName="MySlider" Path="Value"/>
                </MultiBinding>
            </Rectangle.Margin>
        </Rectangle>
    </Grid>
</Window>

我将Rectangle放在具有Grid的同一Slider的底行中，否则当边距接近0时，它可能会覆盖您的控件