Question

我有一个带有不透明蒙版的图像，并希望增加调整大小/重新定位不透明度蒙版的可能性。我是一个完整的WPF新手，所以可能会认为是完全错误的，随时向我提出任何想法：）

所以我有这个：

<Canvas Name="MainCanvas">
    <Rectangle Width="197.016" Height="120.896" Canvas.Left="76.119" Canvas.Top="73.134" Name="SelectionRectangle"></Rectangle>
    <Image Source="Chrysanthemum.jpg" Width="{Binding ActualWidth, ElementName=MainCanvas, Mode=OneWay}" Height="{Binding ActualHeight, ElementName=MainCanvas, Mode=OneWay}">
        <Image.OpacityMask>
            <RadialGradientBrush MappingMode="Absolute" 
                                 Center="{Binding ElementName=SelectionRectangle, Converter={StaticResource RectangleConverter}}" 
                                 GradientOrigin="{Binding ElementName=SelectionRectangle, Converter={StaticResource RectangleConverter}}" 
                                 RadiusY="{Binding ElementName=SelectionRectangle, Path=ActualHeight, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE/2}" 
                                 RadiusX="{Binding ElementName=SelectionRectangle, Path=ActualWidth, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE/2}">
                <GradientStop Color="#7C15161F" Offset="1" />
                <GradientStop Color="#FF40499E" Offset="0.999" />
                <GradientStop Color="#FF182395" Offset="0" />
            </RadialGradientBrush>
        </Image.OpacityMask>
    </Image>
</Canvas>

所以有RadialGradientBrush蒙版的图像，我正在尝试使用这个转换器将RadialGradientBrush中心绑定到矩形中心：

public class RectangleConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        var rectangle = (Rectangle)value;
        return new Point(Canvas.GetLeft(rectangle) + rectangle.ActualWidth / 2f, Canvas.GetTop(rectangle) + rectangle.ActualHeight / 2f);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
}

所有内容都编译并运行，但工作不正确，我猜是因为当Rectangle位置发生变化时，RadialGradientBrush Center绑定不知道这一点（至少转换器中的断点不会被更改矩形的位置所击中）。什么是最简单/推荐的解决方法？

Answer 1

我发现，Multibinding可以解决这个问题：

  <Canvas Name="MainCanvas">
    <Rectangle Width="197.016" Height="120.896" Canvas.Left="76.119" Canvas.Top="73.134" Name="SelectionRectangle"></Rectangle>
    <Image Source="Chrysanthemum.jpg" Width="{Binding ActualWidth, ElementName=MainCanvas, Mode=OneWay}" Height="{Binding ActualHeight, ElementName=MainCanvas, Mode=OneWay}">
        <Image.OpacityMask>
            <RadialGradientBrush MappingMode="Absolute"                                                                                                                                                                                          
                                 RadiusY="{Binding ElementName=SelectionRectangle, Path=ActualHeight, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE/2}" 
                                 RadiusX="{Binding ElementName=SelectionRectangle, Path=ActualWidth, Converter={StaticResource MathConverter}, ConverterParameter=@VALUE/2}">                    
                <RadialGradientBrush.Center>
                    <MultiBinding Converter="{StaticResource RectangleConverter}">
                        <Binding ElementName="SelectionRectangle" Path="(Canvas.Left)"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="ActualWidth"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="(Canvas.Top)"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="ActualHeight"></Binding>
                    </MultiBinding>
                </RadialGradientBrush.Center>
                <RadialGradientBrush.GradientOrigin>
                    <MultiBinding Converter="{StaticResource RectangleConverter}">
                        <Binding ElementName="SelectionRectangle" Path="(Canvas.Left)"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="ActualWidth"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="(Canvas.Top)"></Binding>
                        <Binding ElementName="SelectionRectangle" Path="ActualHeight"></Binding>
                    </MultiBinding>
                </RadialGradientBrush.GradientOrigin>
                <GradientStop Color="#7C15161F" Offset="1" />
                <GradientStop Color="#FF40499E" Offset="0.999" />
                <GradientStop Color="#FF182395" Offset="0" />
            </RadialGradientBrush>
        </Image.OpacityMask>

    </Image>
</Canvas>

转换器：

 public class RectangleConverter : IMultiValueConverter
{
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }

    public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
    {
        return new Point((double)values[0] + (double)values[1] / 2d, (double)values[2] + (double)values[3] / 2d);            
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
    {
        return null;
    }
}

不确定我是否正确，但我的解释是 - 问题是我绑定到整个对象，因此它不是依赖属性，因此不会通知掩码有关更改。现在，multibinding让我们指定哪些属性是有趣的，并且值转换器会在任何属性发生变化时获得通知。

绑定到元素位置不起作用？

1 个答案: