Question

我正在尝试制作一个带有矩形的wpf程序，顶部有两个滑块：

Project screenshot

第一个滑块改变矩形的左/右边距，右滑块改变顶部/底部边距，因此它看起来像矩形越来越大。但是，如果更改窗口大小，则矩形正在调整。

这是我的代码：

<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

在WPF中，控件将填充它们给出的空间。在您的情况下，您给这个rectangle显式大小为300x300。边距是内部填充，可以减小控件的大小。当您重新调整大小并缩小window时，rectangle重新调整大小以适应其新的给定范围。

如果您希望rectangle的大小保持不变，无论window重新调整大小，我都会直接向binding和{{1}推荐height }属性而不是width。此外，它目前看起来您甚至没有使用margin，只使用MySlider。

Answer 2

如果您希望Rectangle 在Window调整大小时保持大小，则不要绑定Margin并保留Width和{{1修复了将它们绑定到适当的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的{{1}}的底行，否则当边距接近0时，它可能会覆盖您的控件

Answer 3

首先在某处添加转换器

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

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        Thickness t = (Thickness)value;
        return new object[]{t.Left,t.Top,t.Right,t.Bottom};
    }
}

在你的xaml中创建一个指向你的转换器的资源：

<Window.Resources>
    <local:IntToThicknessConvertor x:Key="theIntToThicknessConvertor"/>
</Window.Resources>

然后在你的矩形中实现multibinding：

        <Rectangle x:Name="rechteck"          
                    Width="300" 
                    Height="300"               
                    Fill="black"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center" >
            <Rectangle.Margin>
                <MultiBinding Converter="{StaticResource theIntToThicknessConvertor}">
                    <Binding ElementName="MySlider" Path="Value"/>
                    <Binding ElementName="MySlider2" Path="Value"/>
                    <Binding ElementName="MySlider" Path="Value"/>
                    <Binding ElementName="MySlider2" Path="Value"/>
                </MultiBinding>
            </Rectangle.Margin>
        </Rectangle>

你将不得不做更多的事情，但我希望这能让你走上正确的道路

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

3 个答案: