web-dev-qa-db-ja.com

WPF画像のクリックイベント

古いWinFormsデスクトップアプリケーションをWPFに移植しています。アプリのGUIは、WinFormのPictureBoxを使用して画像を表示しました。古いWinFormsアプリには、すべてのPictureBoxのOnClickイベントハンドラーもありました。画像をクリックすると、実際に重要なことが行われました。 WPFでUIを再実行しているので、WinFormのPictureBoxコントロールに相当するものはWPFのImageであることが this によってわかりました。しかし、WPF Imageのプロパティパネルを開いたときに、処理するclickイベントがなかったため、WinFormsのようにクリックイベントハンドラーを作成できませんでした。

では、WinFormのPictureBoxに相当するものを実現するために何ができるか、およびWPFのクリックイベントについて教えていただけますか?画像を表示し、ユーザーが画像をクリックするたびにケースを処理したい。

9
The Vivandiere

WPFでは、各コントロールに既定のテンプレート(外観)がありますが、これらのテンプレートを簡単に変更して、コントロールを希望どおりにすることができます。これにより、その機能によってコントロールを簡単に選択して、希望どおりに表示することができます。あなたの場合はClickが必要なので、Buttonを選択してTemplateを変更します

<Window ...>
    <Window.Resources>
        <Style TargetType="{x:Type Button}" x:Key="ImageButtonStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ContentPresenter/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Button Style="{StaticResource ImageButtonStyle}" Click="ImageButton_Click">
        <Image Source="..."/>
    </Button>
</Window>

上記のXAMLを使用すると、ImageButtonになります

[〜#〜]編集[〜#〜]

以下は、Image.Sourceをバインド/変更する方法の簡単なバージョンです。MainWindowですべてが行われますが、基本的にWPFではコントロールを操作せず、Bindingを使用してプロパティをバインドし、これらのプロパティを操作します。通常は、専用クラス(ViewModel)を作成します。クラスは INofityPropertyChanged インターフェースを実装する必要があり、DataContextはそれに応じて設定する必要があり、バインドされたプロパティは値が変更されるたびにINofityPropertyChanged.PropertyChangedイベントを発生させる必要があります(これは、UIに値を更新するよう通知する方法です)

public partial class MainWindow : Window, INotifyPropertyChanged
{
   public MainWindow()
   {
      InitializeComponent();
      DataContext = this;
   }

   private ImageSource _myImageSource;

   public ImageSource MyImageSource
   {
      get { return _myImageSource; }
      set
      {
          _myImageSource = value;
          OnPropertyChanged("MyImageSource");
      }
   }

   private void ImageButton_Click(object sender, RoutedEventArgs e)
   {
       this.MyImageSource = new BitmapImage(...); //you change source of the Image
   }

   public event PropertyChangedEventHandler PropertyChanged;

   private void OnPropertyChanged(string propertyName)
   {
      var handler = PropertyChanged;
      if (handler != null) handler(this, new PropertyChangedEventArgs(propertyName));
   }    
}

xAMLでは:

<Button Style="{StaticResource ImageButtonStyle}" Click="ImageButton_Click" Width="..." Height="...">
    <Image Source="{Binding MyImageSource}"/>
</Button>
10
dkozl

画像にMouseDownイベントを追加するだけです

<Image x:Name=aPicture Source="mypic.jpg" MouseDown="aPicture_MouseDown"/>

これはあなたのコードにこれを追加するはずです

private void aPicture_MouseDown(object sender, MouseEventArgs e)
{
   //do something here
}
18
CJK

多分MouseLeftButtonDownの方が適切でしょう。

1
AngelBlueSky

完全にクリック可能なエクスペリエンスを実現するには、CurseプロパティをHandに設定してCJKメソッドを使用することをお勧めします。

<Image x:Name="btnSearch" Source="/Images/search/search.png" MouseDown="btnSearch_MouseDown" Cursor="Hand"/>
1
AntoMotos