0

ImageButton次のように単純なものを実装する UserControl を作成しました。

<UserControl x:Class="MyApp.Common.Controls.ImageButton"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Name="UC">
<Grid>
    <Button Command="{Binding ElementName=UC, Path=Command}" CommandParameter="{Binding ElementName=UC, Path=CommandParameter}">
        <StackPanel Orientation="Horizontal">
            <Image Source="{Binding ElementName=UC, Path=Image}"
                   Width="{Binding ElementName=UC, Path=ImageWidth}"
                   Height="{Binding ElementName=UC, Path=ImageHeight}"/>
            <TextBlock Text="{Binding ElementName=UC, Path=Text}"  />
        </StackPanel>
    </Button>
</Grid>

ここに私のコントロールの分離コードがあります:

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace MyApp.Common.Controls
{
    public partial class ImageButton : UserControl
    {
        public ImageButton()
        {
            InitializeComponent();
        }

        public ImageSource Image
        {
            get { return (ImageSource)GetValue(ImageProperty); }
            set { SetValue(ImageProperty, value); }
        }

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

        public double ImageWidth
        {
            get { return (double)GetValue(ImageWidthProperty); }
            set { SetValue(ImageWidthProperty, value); }
        }

        public static readonly DependencyProperty ImageWidthProperty =
            DependencyProperty.Register("ImageWidth", typeof(double), typeof(ImageButton), new UIPropertyMetadata(16d));


        public double ImageHeight
        {
            get { return (double)GetValue(ImageHeightProperty); }
            set { SetValue(ImageHeightProperty, value); }
        }

        public static readonly DependencyProperty ImageHeightProperty =
            DependencyProperty.Register("ImageHeight", typeof(double), typeof(ImageButton), new UIPropertyMetadata(16d));


        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), typeof(ImageButton), new UIPropertyMetadata(""));

        public ICommand Command
        {
            get { return (ICommand)GetValue(CommandProperty); }
            set { SetValue(CommandProperty, value); }
        }

        public static readonly DependencyProperty CommandProperty =
            DependencyProperty.Register("Command", typeof(ICommand), typeof(ImageButton));



        public object CommandParameter
        {
            get { return GetValue(CommandParameterProperty); }
            set { SetValue(CommandParameterProperty, value); }
        }

        public static readonly DependencyProperty CommandParameterProperty =
            DependencyProperty.Register("CommandParameter", typeof(object), typeof(ImageButton));
    }
}

使い方は簡単です:

            <cc:ImageButton Command="{Binding SearchCommand}" 
                Image="/MyApp;component/Images/magnifier.png"       
                ImageWidth="16" ImageHeight="16"        
                        />

ボタン（ViewModelのDelegateCommandにバインドされている）が無効になると、画像が消えます。それ以外の場合は、すべて期待どおりに機能します。何が問題になる可能性がありますか？無効にしたときに画像をグレースケールで表示するにはどうすればよいですか?

更新: これがこの奇妙な動作のイメージですスクリーンショット:

4

3 に答える 3

1

提供されたコードをコピーして、発生した問題を再現できるかどうかを確認しました。残念ながら、コマンドが無効になっている (またはCanExecute返さfalseれていた) 場合、使用した画像は消えませんでした。ViewModel関連すると思われるコードをさらに提供していただけますか?

質問の 2 番目の部分に答えるには:

無効にしたときに画像をグレースケールで表示するにはどうすればよいですか?

私の知る限り、WPF で画像の彩度を下げる簡単な方法はありません。代わりに、@Vova が提案しOpacityたイメージのプロパティを下げるというアプローチを採用します。提供した UserControl XAML を次のように変更できます。

<UserControl x:Class="MyApp.Common.Controls.ImageButton"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         Name="UC">
    <Grid>
        <Button Command="{Binding ElementName=UC, Path=Command}" CommandParameter="{Binding ElementName=UC, Path=CommandParameter}">

            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding ElementName=UC, Path=Image}"
                   Width="{Binding ElementName=UC, Path=ImageWidth}"
                   Height="{Binding ElementName=UC, Path=ImageHeight}">
                    <Image.Style>
                        <Style TargetType="{x:Type Image}">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding  Path=IsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}} }" Value="false"  >
                                    <Setter Property="Opacity" Value="0.3" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
                <TextBlock Text="{Binding ElementName=UC, Path=Text}"  />
            </StackPanel>
        </Button>
    </Grid>
</UserControl>

上記のコードでDataTriggerは、画像のプロパティに a を追加して、ボタンのプロパティが に等しいStyle場合に画像の不透明度を変更しました。IsEnabledfalse

お役に立てれば！

于 2012-04-09T22:00:11.863 に答える
0

私はそれをカスタムコントロールにし、でトリガーを作成しProperty =isEnabled value=falseます。画像の上に、不透明度のあるグリッドを追加し、そのトリガーでその不透明度または可視性を制御します。幸運を。もっと簡単な方法はないと思います。

于 2012-04-09T20:48:36.427 に答える
0

前述のように、WPF には組み込みの彩度低下サポートはありませんが、シェーダー効果を使用して簡単に実装できます。このリンクは、XAML のみの方法で効果を使用できる実装に移動します。

HLSL で記述されたシェーダーはコンパイルする必要があり、コンパイルには Direct X SDK をマシンにインストールする必要があることに注意してください。そのような小さな仕事にはかなりの野獣です。

于 2012-04-10T05:52:16.350 に答える