C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

WPFでButtonの押下状況で画像を変えたい

[トピック内 5 記事 (1 - 5 表示)]  << 0 >>

■96773 / inTopicNo.1)  WPFでButtonの押下状況で画像を変えたい
  
□投稿者/ washiki (4回)-(2021/02/01(Mon) 10:51:43)

分類:[C#] 

こんにちは。
ボタンに画像を表示しており、そのボタンの押下状況で表示する画像を変えたいです。
csコード側には処理を書きたくないので、xaml上で解決する方法を模索しています。

下記ソースの★★★部分に何か書くようなイメージをしているのですが、
適切な記述がわからず苦慮しています。

まったく別の方法でもいいので、お気づきの点があればご教示お願いします。

<Button>
    <Image Source="../Images/aaa.png" />
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border>
                            <ContentPresenter VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsPressed" Value="True">
                                ★★★
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

引用返信 編集キー/
■96776 / inTopicNo.2)  Re[1]: WPFでButtonの押下状況で画像を変えたい
□投稿者/ Hongliang (1147回)-(2021/02/01(Mon) 11:39:53)
Contentの切り替えだけでいいなら、以下のようになります。
(面倒なので終了タグは省略しています)
<Button>
  <Button.Style>
    <Style TargetType="Button">
      <Setter Property="Content">
        <Setter.Value>
          <Image Source="..."/>
      <Style.Triggers>
        <Trigger Property="IsPressed" Value="True">
          <Setter Property="Content">
            <Setter.Value>
              <Image Source="..."/>
通常時のContentはStyleで設定する必要があります。
http://tawamuredays.blog.fc2.com/blog-entry-11.html

現実的には、そもそもTemplateを変更していないとButtonの既定の枠とかが表示されるので
その辺をいじられているはずで、そこが分からないと何とも言えません。

引用返信 編集キー/
■96778 / inTopicNo.3)  Re[2]: WPFでButtonの押下状況で画像を変えたい
□投稿者/ washiki (5回)-(2021/02/01(Mon) 12:48:48)
No96776 (Hongliang さん) に返信
> Contentの切り替えだけでいいなら、以下のようになります。
> (面倒なので終了タグは省略しています)
> <Button>
> <Button.Style>
> <Style TargetType="Button">
> <Setter Property="Content">
> <Setter.Value>
> <Image Source="..."/>
> <Style.Triggers>
> <Trigger Property="IsPressed" Value="True">
> <Setter Property="Content">
> <Setter.Value>
> <Image Source="..."/>
> 通常時のContentはStyleで設定する必要があります。
> http://tawamuredays.blog.fc2.com/blog-entry-11.html
>
> 現実的には、そもそもTemplateを変更していないとButtonの既定の枠とかが表示されるので
> その辺をいじられているはずで、そこが分からないと何とも言えません。


ありがとうございます!
画像変化できました。
Templateは別途定義してBasedOnしているので問題ありません。

ついでで申し訳ございませんが、このStyleを共通化してスリムにしようと思うと、(画像のみ異なる)
<Image Source="{Binding ...}"/>
と記述するしかないでしょうか?

MVVM設計なのですが、動的に切り替える必要もないのでViewModelに持たせるのもどうかと思っています。
何か方法をご存じであれば教えていただきたいです。

引用返信 編集キー/
■96781 / inTopicNo.4)  Re[3]: WPFでButtonの押下状況で画像を変えたい
□投稿者/ Hongliang (1148回)-(2021/02/01(Mon) 14:26:12)
やり方はいろいろありますが、簡単には添付プロパティを定義するとか。
public class ImageButton {
    public static DependencyProperty NormalImageProperty = DependencyProperty.RegisterAttached(略)
    public static DependencyProperty ClickImageProperty = DependencyProperty.RegisterAttached(略)
    // Get, Set略
}
<Button local:ImageButton.NormalImage="a.png" local:ImageButton.ClickImage="b.png"></Button>
<ControlTemplate TargetType="Button">
  <Image x:Image="Image">
    <Image.Style>
      <Style TargetType="Image">
        <Setter Property="Source"
                Value="{Binding (local:ImageButton.NormalImage),
                        RelativeSource={RelativeSource TemplatedParent}}"/>
  <ControlTemplate.Triggers>
    <Trigger Property="IsPressed" Value="True">
      <Setter Property="Source" TargetName="Image"
              Value="{Binding (local:ImageButton.ClickImage),
                      RelativeSource={RelativeSource TemplatedParent}}"/>

もう少し本腰を入れるなら、
Buttonから派生したImageButtonクラスを作って、
上記の添付プロパティの代わりに依存関係プロパティを定義して、
ってやっていくでしょう。

引用返信 編集キー/
■96782 / inTopicNo.5)  Re[4]: WPFでButtonの押下状況で画像を変えたい
□投稿者/ washiki (6回)-(2021/02/02(Tue) 12:22:07)
No96781 (Hongliang さん) に返信
> やり方はいろいろありますが、簡単には添付プロパティを定義するとか。
> public class ImageButton {
> public static DependencyProperty NormalImageProperty = DependencyProperty.RegisterAttached(略)
> public static DependencyProperty ClickImageProperty = DependencyProperty.RegisterAttached(略)
> // Get, Set略
> }
> <Button local:ImageButton.NormalImage="a.png" local:ImageButton.ClickImage="b.png"></Button>
> <ControlTemplate TargetType="Button">
> <Image x:Image="Image">
> <Image.Style>
> <Style TargetType="Image">
> <Setter Property="Source"
> Value="{Binding (local:ImageButton.NormalImage),
> RelativeSource={RelativeSource TemplatedParent}}"/>
> <ControlTemplate.Triggers>
> <Trigger Property="IsPressed" Value="True">
> <Setter Property="Source" TargetName="Image"
> Value="{Binding (local:ImageButton.ClickImage),
> RelativeSource={RelativeSource TemplatedParent}}"/>
>
> もう少し本腰を入れるなら、
> Buttonから派生したImageButtonクラスを作って、
> 上記の添付プロパティの代わりに依存関係プロパティを定義して、
> ってやっていくでしょう。

なるほど!
DependencyProperyですね。
勉強になりました。ありがとうございました。

解決済み
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ