質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

MVVM

MVVM(Model View ViewModel)は構築上のデザインパターンで、表現ロジック(ViewModel)によってデータ(Model)からページ(View)を分離させます。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

解決済

1回答

2051閲覧

【WPF】ボタン(カスタムコントロール)で各プロパティの変化に応じて表示する画像を切り替える方法

galmacher

総合スコア37

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

MVVM

MVVM(Model View ViewModel)は構築上のデザインパターンで、表現ロジック(ViewModel)によってデータ(Model)からページ(View)を分離させます。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

0グッド

0クリップ

投稿2019/03/11 03:27

編集2019/03/11 03:30

活性時、ホバー時、クリック時でボタンに表示する画像を切り替えるカスタムコントロールを作っております。
そのためにImageSource型の依存関係プロパティEnableImage、ClickImage、HoverImageをカスタムコントロールにて定義しました。

カスタムコントロールのControlTemplate.Triggersにて、
・IsPressed=TrueならImageのSourceプロパティにClickImageをセット
・IsMouseOver=TrueならSourceプロパティにHoverImageをセット
このようにできればいいと思ったのですがうまく動きません。

OriginalButton

1 public class OriginalButton : Button 2 { 3 static OriginalButton() 4 { 5 DefaultStyleKeyProperty.OverrideMetadata(typeof(OriginalButton), new FrameworkPropertyMetadata(typeof(OriginalButton))); 6 } 7 8 /// <summary>通常</summary> 9 public ImageSource EnableImage 10 { 11 get { return (ImageSource)GetValue(EnableImageProperty); } 12 set { SetValue(EnableImageProperty, value); } 13 } 14 public static readonly DependencyProperty EnableImageProperty = 15 DependencyProperty.Register("EnableImage", typeof(ImageSource), typeof(OriginalButton),new PropertyMetadata(null)); 16 17 18 /// <summary>クリック</summary> 19 public ImageSource ClickImage 20 { 21 get { return (ImageSource)GetValue(ClickImageProperty); } 22 set { SetValue(ClickImageProperty, value); } 23 } 24 public static readonly DependencyProperty ClickImageProperty = 25 DependencyProperty.Register("ClickImage", typeof(ImageSource), typeof(OriginalButton), new PropertyMetadata(null)); 26 27 28 /// <summary>ホバー</summary> 29 public ImageSource HoverImage 30 { 31 get { return (ImageSource)GetValue(HoverImageProperty); } 32 set { SetValue(HoverImageProperty, value); } 33 } 34 public static readonly DependencyProperty HoverImageProperty = 35 DependencyProperty.Register("HoverImage", typeof(ImageSource), typeof(OriginalButton), new PropertyMetadata(null)); 36 }

GenericXaml

1 <Style TargetType="{x:Type local:OriginalButton}"> 2 <Setter Property="Template"> 3 <Setter.Value> 4 <ControlTemplate TargetType="{x:Type local:OriginalButton}"> 5 <Grid> 6 <Image Name="image" Source="{TemplateBinding EnableImage}"></Image> 7 </Grid> 8 <ControlTemplate.Triggers> 9 <Trigger Property="IsPressed" Value="True"> 10 <Setter TargetName="image" 11 Property="Source" 12 Value="{Binding ClickImage, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type local:OriginalButton}}}"/> 13 </Trigger> 14 <Trigger Property="IsMouseOver" Value="True"> 15 <Setter TargetName="image" 16 Property="Source" 17 Value="{Binding HoverImage, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type local:OriginalButton}}}"/> 18 </Trigger> 19 </ControlTemplate.Triggers> 20 </ControlTemplate> 21 </Setter.Value> 22 </Setter> 23 </Style>

MainWindow

1<Window x:Class="CustomImageButton.MainWindow" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 5 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 6 xmlns:local="clr-namespace:CustomImageButton" 7 mc:Ignorable="d" 8 Title="MainWindow" Height="450" Width="800"> 9 <Grid> 10 <local:OriginalButton EnableImage="../Resources/enable.jpg" 11 ClickImage="../Resources/click.jpg" 12 HoverImage="../Resources/hover.png"/> 13 14 </Grid> 15</Window>

具体的に言うと、Generic.xamlの<Trigger Property="IsMouseOver" Value="True">だけの場合は正常にEnableImage⇔HoverImageの切り替えが行われ、
<Trigger Property="IsPressed" Value="True">だけの場合はEnableImage⇔ClickImageの切り替えが行われますが、
上記コードのように両方を指定していると、EnableImage⇔HoverImageの切り替えしかできません。
どうすれば複数のプロパティ変化に対応できますでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

IsPressedの時はIsMouseOverでもあるので、IsMouseOverで上書きされているのかもしれません。
単に<Trigger Property="IsPressed" Value="True">を後に書けばいける気がします。

投稿2019/03/11 04:00

hihijiji

総合スコア4150

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

galmacher

2019/03/12 13:11

ありがとうございました! 順番を変えたら出来ました。Style内の順番全く意識してませんでしたが重要なのですね…。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問