1

オーバーレイに OpacityMask を適用して、無効な ImageButton カスタム コントロールの画像をグレー表示しています。意図した効果は、画像の本体のみがグレー表示されるため、画像の上に境界線やボックスが配置されないことです。

問題は、画像 URI がバインドされた getter ({TemplateBinding XXX} に記述されているもの) を介してアクセスされる限り、マスクが適用されないことです。ただし、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 を取得しないか、他の理由で機能しないことにあるようです。それで、これを修正する方法は？

4

1 に答える 1

0

TemplateBinding は、通常のバインディングほど機能が充実していません。TemplateBinding は、文字列/URI を実際のビットマップに自動的に変換できません。

解決策 (通常のバインディングを使用):

<Rectangle x:Name="DisabledVisualElement" Fill="Red" Opacity="0" >
    <Rectangle.OpacityMask>
        <ImageBrush ImageSource="{Binding Path=ImageSource, RelativeSource={RelativeSource TemplatedParent}}"/>                                   
    </Rectangle.OpacityMask>
</Rectangle>
于 2012-01-13T11:15:58.913 に答える