silverLight：OpacityMask 不适用于自定义控件

Question

我通过在覆盖层上应用 OpacityMask 将禁用的 ImageButton 自定义控件上的图像变灰。预期的效果是只有图像的主体变灰，因此图像上没有边框或框。

问题是：只要通过绑定 getter（在 {TemplateBinding XXX} 中编写的内容）访问图像 URI，掩码将不适用。但是，如果明确指定 URI，则掩码将起作用。那么问题来了，为什么TmplateBinding会出现这个问题以及如何解决。

定义自定义图像按钮的 XAML 代码为：

            <my1:ImageButton Height="24" Width="24" x:Name="imageButton1" IsEnabled="False" ImageSource="/SilverlightApplication4;component/Undo_24x24.png" Margin="178,75,198,201">
            <Image Source="/SilverlightApplication4;component/Undo_24x24.png" Height="24" Width="24" />
        </my1:ImageButton>

自定义属性处理程序代码为：

    public class ImageButton: Button
{
    public static readonly DependencyProperty ImageSourceProperty = DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
    public ImageSource ImageSource
    {
        get
        {
            return (ImageSource)this.GetValue(ImageSourceProperty);
        }
        set
        {
            this.SetValue(ImageSourceProperty, value);
        }
    }
}

自定义控件的样式代码（禁用状态）：

                            <Rectangle x:Name="DisabledVisualElement" Fill="Red" Opacity="0" >
                            <Rectangle.OpacityMask>
                                <ImageBrush ImageSource="{TemplateBinding ImageSource}"/>                                   
                            </Rectangle.OpacityMask>
                        </Rectangle>

有趣的是，以下代码片段放置在样式模板内

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

，并且

                            <Rectangle x:Name="DisabledVisualElement" Fill="Red" Opacity="0" >
                            <Rectangle.OpacityMask>
                                <ImageBrush ImageSource="/SilverlightApplication4;component/Undo_24x24.png"/>                                   
                            </Rectangle.OpacityMask>
                        </Rectangle>

都可以正常工作。所以问题似乎在于 ImageSource="{TemplateBinding ImageSource}" 不知何故无法检索正确的 URI 或由于某些其他原因而无法工作。那么，如何纠正这个问题呢？

Answer 1

TemplateBinding 的功能不如常规绑定那么齐全。 TemplateBinding 无法自动将字符串/uri 转换为实际的位图。

解决方案（使用常规绑定）：

<Rectangle x:Name="DisabledVisualElement" Fill="Red" Opacity="0" >
    <Rectangle.OpacityMask>
        <ImageBrush ImageSource="{Binding Path=ImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>                                   
    </Rectangle.OpacityMask>
</Rectangle>