WPFアプリのボタンの画像をマウスオ－バ

前提・実現したいこと

（例）Visual studioでWPFアプリ(.Net Framework)を使用してボタンを用意します
マウスオ－バ－時に画像を変えたくて、誰かご教授お願いします。

現在のコード(ボタン部分)

<Button Content="Button" Height="140" Margin="272,150,778.5,0" VerticalAlignment="Top" OpacityMask="White" Style="{DynamicResource ButtonStyle2}">
            <Button.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="#FFF95A5A" Offset="1"/>
                </LinearGradientBrush>
            </Button.BorderBrush>
            <Button.Background>
                <ImageBrush ImageSource="1_1_tile..PNG"/>
            </Button.Background>
        </Button>

行いこと

マウスオーバ－時に画像を1_2_tile..pngに変更、また、ボタンがクリックされたとき、画像を1_2_tile.pngで固定したいです

試したこと

現在マウスオ－バ－時に色が水色になるので、色を透明にしてみました

 <Trigger Property="IsMouseOver" Value="true">
　　　　 <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
       　<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>

開発環境

Microsoft Blend for Visual Studio Community 2019
Version 16.7.7
VisualStudio.16.Release/16.7.7+30621.155
Microsoft .NET Framework
Version 4.8.04084

インストールされているバージョン:Blend

Visual C++ 2019 00435-60000-00000-AA414
Microsoft Visual C++ 2019

C# ツール 3.7.0-6.20514.1+600c0dadd199296df3ed07dfabdc014563a77f7c
IDE で使用する C# コンポーネント。プロジェクトの種類や設定に応じて、異なるバージョンのコンパイラを使用できます。

IntelliCode 拡張機能 1.0
IntelliCode Visual Studio 拡張機能の詳細情報

Mono Debugging for Visual Studio 16.7.5 (112c7bc)
Support for debugging Mono processes with Visual Studio.

NuGet パッケージマネージャー 5.7.0
Visual Studio 内の NuGet パッケージマネージャー。NuGet の詳細については、https://docs.nuget.org/ にアクセスしてください

ProjectServicesPackage Extension 1.0
ProjectServicesPackage Visual Studio Extension Detailed Info

Visual Basic ツール 3.7.0-6.20514.1+600c0dadd199296df3ed07dfabdc014563a77f7c
IDE で使用する Visual Basic コンポーネント。プロジェクトの種類や設定に応じて、異なるバージョンのコンパイラを使用できます。

Xamarin Templates 16.7.85 (1bcbbdf)
Templates for building iOS, Android, and Windows apps with Xamarin and Xamarin.Forms.

行動規範の内容に同意します

回答1件

ベストアンサー

現在のコード(ボタン部分)

スタイル部分が重要なので、他人が再現できるコードを載せてください（省略すべきはこのボタンに関係しないほかのコントロール等です）

試したこと
現在マウスオ－バ－時に色が水色になるので、色を透明にしてみました

Trigger部分だけ書かれても、透明になっているかはわかりません。

このxamlではButtonのBackgroundにImageBrushを入れて、画像を出しているのはわかっていますか？
Backgroundは色（Color）ではなく塗り方（Brush）です。

透明にするのではなく、目的のImageBrushにします。

Blendで作ったスタイルそのままだと仮定して回答します。

単純にやるならSolidColorBrushになっている

Button.Static.Background
Button.MouseOver.Background
Button.Pressed.Background

３つをImageBrushに変えます（Staticに戻ればいいならPressedはいらないですが）

変更点が少なく楽ですが、別の画像ボタンも作りたい場合はあまりよくないですね。
ちょっとセコいですが、ButtonStyle3のような作りにするのも手です。

xml
1<Window
2  x:Class="Questions308117.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6  xmlns:local="clr-namespace:Questions308117"
7  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8  Title="MainWindow"
9  Width="800"
10  Height="450"
11  mc:Ignorable="d">
12  <Window.Resources>
13    <Style x:Key="FocusVisual">
14      <Setter Property="Control.Template">
15        <Setter.Value>
16          <ControlTemplate>
17            <Rectangle
18              Margin="2"
19              SnapsToDevicePixels="true"
20              Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
21              StrokeDashArray="1 2"
22              StrokeThickness="1" />
23          </ControlTemplate>
24        </Setter.Value>
25      </Setter>
26    </Style>
27    <!--<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD" />-->
28    <!--<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD" />-->
29    <!--<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6" />-->
30    <ImageBrush x:Key="Button.Static.Background" ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/174112/HcvAPyTE_thumbnail.jpg" />
31    <ImageBrush x:Key="Button.MouseOver.Background" ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg" />
32    <ImageBrush x:Key="Button.Pressed.Background" ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/174112/HcvAPyTE_thumbnail.jpg" />
33
34    <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070" />
35    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1" />
36    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B" />
37    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4" />
38    <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5" />
39    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383" />
40    <Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
41      <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
42      <Setter Property="Background" Value="{StaticResource Button.Static.Background}" />
43      <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}" />
44      <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
45      <Setter Property="BorderThickness" Value="1" />
46      <Setter Property="HorizontalContentAlignment" Value="Center" />
47      <Setter Property="VerticalContentAlignment" Value="Center" />
48      <Setter Property="Padding" Value="1" />
49      <Setter Property="Template">
50        <Setter.Value>
51          <ControlTemplate TargetType="{x:Type Button}">
52            <Border
53              x:Name="border"
54              Background="{TemplateBinding Background}"
55              BorderBrush="{TemplateBinding BorderBrush}"
56              BorderThickness="{TemplateBinding BorderThickness}"
57              SnapsToDevicePixels="true">
58              <ContentPresenter
59                x:Name="contentPresenter"
60                Margin="{TemplateBinding Padding}"
61                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
62                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
63                Focusable="False"
64                RecognizesAccessKey="True"
65                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
66            </Border>
67            <ControlTemplate.Triggers>
68              <Trigger Property="IsDefaulted" Value="true">
69                <Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
70              </Trigger>
71              <Trigger Property="IsMouseOver" Value="true">
72                <Setter TargetName="border" Property="Background" Value="{StaticResource Button.MouseOver.Background}" />
73                <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.MouseOver.Border}" />
74              </Trigger>
75              <Trigger Property="IsPressed" Value="true">
76                <Setter TargetName="border" Property="Background" Value="{StaticResource Button.Pressed.Background}" />
77                <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.Pressed.Border}" />
78              </Trigger>
79              <Trigger Property="IsEnabled" Value="false">
80                <Setter TargetName="border" Property="Background" Value="{StaticResource Button.Disabled.Background}" />
81                <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.Disabled.Border}" />
82                <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource Button.Disabled.Foreground}" />
83              </Trigger>
84            </ControlTemplate.Triggers>
85          </ControlTemplate>
86        </Setter.Value>
87      </Setter>
88    </Style>
89
90
91    <Style x:Key="ButtonStyle3" BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}">
92      <Setter Property="Template">
93        <Setter.Value>
94          <ControlTemplate TargetType="{x:Type Button}">
95            <Border
96              x:Name="border"
97              Background="{TemplateBinding Background}"
98              BorderBrush="{TemplateBinding BorderBrush}"
99              BorderThickness="{TemplateBinding BorderThickness}"
100              SnapsToDevicePixels="true">
101              <ContentPresenter
102                x:Name="contentPresenter"
103                Margin="{TemplateBinding Padding}"
104                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
105                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
106                Focusable="False"
107                RecognizesAccessKey="True"
108                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
109            </Border>
110            <ControlTemplate.Triggers>
111              <Trigger Property="IsMouseOver" Value="true">
112                <Setter TargetName="border" Property="Background" Value="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" />
113              </Trigger>
114              <Trigger Property="IsPressed" Value="true">
115                <Setter TargetName="border" Property="Background" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" />
116              </Trigger>
117            </ControlTemplate.Triggers>
118          </ControlTemplate>
119        </Setter.Value>
120      </Setter>
121    </Style>
122  </Window.Resources>
123  <StackPanel>
124    <Button
125      Width="140"
126      Height="140"
127      Content="Button"
128      OpacityMask="White"
129      Style="{DynamicResource ButtonStyle2}">
130      <Button.BorderBrush>
131        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
132          <GradientStop Offset="0" Color="Black" />
133          <GradientStop Offset="1" Color="#FFF95A5A" />
134        </LinearGradientBrush>
135      </Button.BorderBrush>
136      <!--<Button.Background>
137        <ImageBrush ImageSource="1_1_tile..PNG" />
138      </Button.Background>-->
139    </Button>
140
141    <Button
142      Width="140"
143      Height="140"
144      Content="Button"
145      Style="{DynamicResource ButtonStyle3}">
146      <Button.Background>
147        <ImageBrush ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/174112/HcvAPyTE_thumbnail.jpg" />
148      </Button.Background>
149      <Button.Tag>
150        <ImageBrush ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg" />
151      </Button.Tag>
152    </Button>
153  </StackPanel>
154</Window>