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

Question

我正在尝试制作一个 wpf 程序，其中有一个矩形，顶部有两个 slider :

第一个 slider 改变矩形的左/右边距，右边的 slider 改变上/下边距，所以看起来矩形越来越大和越来越小。但是，如果您更改窗口大小，则矩形会随之调整。

这是我的代码:

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

Answer 1

如果您希望您的 Rectangle 在 Window 调整大小时保持大小 那么不要绑定(bind) Margin 并保持Width 和 Height 固定将它们绑定(bind)到适当的 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 和 Horizo​​ntalAlignment/VerticalAlignment 并且仅通过自定义 IMultiValueConverter 绑定(bind) Margin:

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 放在具有 Slider 的同一 Grid 的底行中，否则它可能会在 margin 获取时覆盖您的控件接近于0