如何将矩形的边距绑定到顶部/底部和左侧/右侧的两个滑块

user3371521 发表于 Dev

用户名

我正在尝试制作一个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>

dkozl

如果你希望你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>