使用 DependencyProperty 将 ImageBrush 绑定到模板

Question

我正在尝试创建一个特殊的按钮，根据系统的前景色为图像着色。解决方案似乎是使用图像作为不透明蒙版来获取颜色，当我像这样直接设置图像时它会起作用：

<Grid>
  <Rectangle x:Name="ImageForeground" Height="48" Width="48" 
    Fill="{StaticResource PhoneForegroundBrush}" >
    <Rectangle.OpacityMask>
      <ImageBrush Stretch="Fill" ImageSource="/icons/play.png"/>
    </Rectangle.OpacityMask>
  </Rectangle>
</Grid>

但是一旦我尝试使用图像精简版的 DependencyProperty 进行模板化：

public static readonly DependencyProperty ImageProperty  =
  DependencyProperty.Register("Image", typeof(ImageSource), 
                              typeof(RButton), null);  

然后在 XAML 中像这样：

<Grid>
  <Rectangle x:Name="ImageForeground" Height="48" Width="48" 
    Fill="{TemplateBinding Foreground}" >
    <Rectangle.OpacityMask>
      <ImageBrush Stretch="Fill" ImageSource="{TemplateBinding Image}"/>
    </Rectangle.OpacityMask>
  </Rectangle>
</Grid>

我收到一条错误消息：

object of type 'System.Windows.CustomDependencyProperty' 
  cannot be converted to type 'System.Windows.DependencyProperty'

ImageProperty 没问题，因为我测试了将其绑定到图像，而不是像这样

<Image Source="{TemplateBinding Image}" Width="48" Height="48" />

有什么想法吗？我的直觉表明我如何定义 DependecyProperty，但我不知道如何继续前进。

Answer 1

ImageBrush 不继承自 FrameworkElement，因此它不能是 TemplateBound 或 Data Bound。

Answer 2

我尝试根据您提供的 XAML 在测试项目中复制您的问题，并且不得不承认我没有遇到您所描述的问题。如果您可以提供 RButton 的代码以及有关如何使用该控件的一些上下文，我可能会更幸运（或缺乏！）。

有一篇很棒的博客文章 有关 Silverlight 中的依赖属性WP7 今天发布，您可能会觉得有用。

更新：我刚刚阅读了这篇完美匹配的 文章 解释了问题充分并给出了解决方案。基本上，ImageBrush 不是 FrameworkElement，因此您不能将 TemplateBinding 与它一起使用。

Answer 3

我将其标记为答案，尽管它不是完整的答案。为了使其全部正常工作，我必须进行一些调整，因为我无法在 TemplateBinding 中使用转换器，叹息......无论如何。这是为我解决此问题的代码以及 文章中的转换器< /a> 德里克指出的。

因此，要将我的 Image DependencyProperty 绑定为模板中的图像画笔，我必须执行此操作...

<Grid>
  <Grid.Resources>
    <controls:ImageBrushConverter x:Key="brushConverter"/>
  </Grid.Resources>
  <Rectangle 
    x:Name="ImageForeground"
    Height="48"
    Width="48" 
    Fill="{TemplateBinding Foreground}" 
        DataContext="{TemplateBinding Image}"
        OpacityMask="{Binding Converter={StaticResource brushConverter}}">
  </Rectangle>
</Grid> 

并不明显，但它确实解决了问题，这为我解决了很多问题。感谢您的帮助

Answer 4

您可以使用 RelativeSource TemplatedParent 绑定代替 TemplateBinding。这基本上是同一件事，但它会在 TemplateBinding 不起作用的奇怪情况下起作用。

<ImageBrush
    ImageSource="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Image}" />

Answer 5

另一种方法，但不需要转换器

<Grid>
<Rectangle x:Name="ImageForeground" DataContext="{TemplateBinding Image}" Height="48" Width="48" 
        Fill="{TemplateBinding Foreground}" >
    <Rectangle.OpacityMask>
        <ImageBrush Stretch="Fill" ImageSource="{Binding DataContext , RelativeSource={RelativeSource AncestorType=Rectangle}}"/>
    </Rectangle.OpacityMask>
</Rectangle>

//或者

<Rectangle DataContext="{TemplateBinding IconVisual}" x:Name="Icon" RadiusX="2" RadiusY="2" StrokeThickness="1" Margin="{TemplateBinding Padding}"  Fill="{TemplateBinding Foreground}" Stroke="{TemplateBinding Foreground}" >
                                <Rectangle.OpacityMask>
                                    <VisualBrush Visual="{Binding DataContext , RelativeSource={RelativeSource AncestorType=Rectangle}}"  Stretch="Uniform" />
                                </Rectangle.OpacityMask>
                            </Rectangle>

Answer 6

或者，如果您是控件的作者，则在 OnApplyTemplate 中找到模板中的视觉画笔并设置其值。

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();

    VisualBrush oVBrushBack = (VisualBrush)this.Template.FindName("rectVisual", this);

    oVBrushBack.Visual = this.IconVisual;
}