質問するログイン新規登録

回答編集履歴

1

見直しキャンペーン中

2023/07/25 13:36

投稿

TN8001
TN8001

スコア10260

answer CHANGED
@@ -1,184 +1,184 @@
1
- > 現在のコード(ボタン部分)
2
-
3
- スタイル部分が重要なので、他人が再現できるコードを載せてください(省略すべきはこのボタンに関係しないほかのコントロール等です)
4
-
5
- > 試したこと
6
- > 現在マウスオ-バ-時に色が水色になるので、色を透明にしてみました
7
-
8
- `Trigger`部分だけ書かれても、透明になっているかはわかりません。
9
-
10
- このxamlでは`Button`の`Background`に`ImageBrush`を入れて、画像を出しているのはわかっていますか?
11
- `Background`は色(`Color`)ではなく塗り方(`Brush`)です。
12
-
13
- 透明にするのではなく、目的の`ImageBrush`にします。
14
-
15
- ---
16
-
17
- Blendで作ったスタイルそのままだと仮定して回答します。
18
-
19
- 単純にやるなら`SolidColorBrush`になっている
20
- * `Button.Static.Background`
21
- * `Button.MouseOver.Background`
22
- * `Button.Pressed.Background`
23
-
24
- 3つを`ImageBrush`に変えます(`Static`に戻ればいいなら`Pressed`はいらないですが)
25
-
26
- 変更点が少なく楽ですが、別の画像ボタンも作りたい場合はあまりよくないですね。
27
- ちょっとセコいですが、`ButtonStyle3`のような作りにするのも手です。
28
-
29
- ```xaml
30
- <Window
31
- x:Class="Questions308117.MainWindow"
32
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
34
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
35
- xmlns:local="clr-namespace:Questions308117"
36
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
37
- Title="MainWindow"
38
- Width="800"
39
- Height="450"
40
- mc:Ignorable="d">
41
- <Window.Resources>
42
- <Style x:Key="FocusVisual">
43
- <Setter Property="Control.Template">
44
- <Setter.Value>
45
- <ControlTemplate>
46
- <Rectangle
47
- Margin="2"
48
- SnapsToDevicePixels="true"
49
- Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
50
- StrokeDashArray="1 2"
51
- StrokeThickness="1" />
52
- </ControlTemplate>
53
- </Setter.Value>
54
- </Setter>
55
- </Style>
56
- <!--<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD" />-->
57
- <!--<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD" />-->
58
- <!--<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6" />-->
59
- <ImageBrush x:Key="Button.Static.Background" ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/174112/HcvAPyTE_thumbnail.jpg" />
60
- <ImageBrush x:Key="Button.MouseOver.Background" ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg" />
61
- <ImageBrush x:Key="Button.Pressed.Background" ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/174112/HcvAPyTE_thumbnail.jpg" />
62
-
63
- <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070" />
64
- <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1" />
65
- <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B" />
66
- <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4" />
67
- <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5" />
68
- <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383" />
69
- <Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
70
- <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
71
- <Setter Property="Background" Value="{StaticResource Button.Static.Background}" />
72
- <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}" />
73
- <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
74
- <Setter Property="BorderThickness" Value="1" />
75
- <Setter Property="HorizontalContentAlignment" Value="Center" />
76
- <Setter Property="VerticalContentAlignment" Value="Center" />
77
- <Setter Property="Padding" Value="1" />
78
- <Setter Property="Template">
79
- <Setter.Value>
80
- <ControlTemplate TargetType="{x:Type Button}">
81
- <Border
82
- x:Name="border"
83
- Background="{TemplateBinding Background}"
84
- BorderBrush="{TemplateBinding BorderBrush}"
85
- BorderThickness="{TemplateBinding BorderThickness}"
86
- SnapsToDevicePixels="true">
87
- <ContentPresenter
88
- x:Name="contentPresenter"
89
- Margin="{TemplateBinding Padding}"
90
- HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
91
- VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
92
- Focusable="False"
93
- RecognizesAccessKey="True"
94
- SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
95
- </Border>
96
- <ControlTemplate.Triggers>
97
- <Trigger Property="IsDefaulted" Value="true">
98
- <Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
99
- </Trigger>
100
- <Trigger Property="IsMouseOver" Value="true">
101
- <Setter TargetName="border" Property="Background" Value="{StaticResource Button.MouseOver.Background}" />
102
- <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.MouseOver.Border}" />
103
- </Trigger>
104
- <Trigger Property="IsPressed" Value="true">
105
- <Setter TargetName="border" Property="Background" Value="{StaticResource Button.Pressed.Background}" />
106
- <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.Pressed.Border}" />
107
- </Trigger>
108
- <Trigger Property="IsEnabled" Value="false">
109
- <Setter TargetName="border" Property="Background" Value="{StaticResource Button.Disabled.Background}" />
110
- <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.Disabled.Border}" />
111
- <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource Button.Disabled.Foreground}" />
112
- </Trigger>
113
- </ControlTemplate.Triggers>
114
- </ControlTemplate>
115
- </Setter.Value>
116
- </Setter>
117
- </Style>
118
-
119
-
120
- <Style x:Key="ButtonStyle3" BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}">
121
- <Setter Property="Template">
122
- <Setter.Value>
123
- <ControlTemplate TargetType="{x:Type Button}">
124
- <Border
125
- x:Name="border"
126
- Background="{TemplateBinding Background}"
127
- BorderBrush="{TemplateBinding BorderBrush}"
128
- BorderThickness="{TemplateBinding BorderThickness}"
129
- SnapsToDevicePixels="true">
130
- <ContentPresenter
131
- x:Name="contentPresenter"
132
- Margin="{TemplateBinding Padding}"
133
- HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
134
- VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
135
- Focusable="False"
136
- RecognizesAccessKey="True"
137
- SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
138
- </Border>
139
- <ControlTemplate.Triggers>
140
- <Trigger Property="IsMouseOver" Value="true">
141
- <Setter TargetName="border" Property="Background" Value="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" />
142
- </Trigger>
143
- <Trigger Property="IsPressed" Value="true">
144
- <Setter TargetName="border" Property="Background" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" />
145
- </Trigger>
146
- </ControlTemplate.Triggers>
147
- </ControlTemplate>
148
- </Setter.Value>
149
- </Setter>
150
- </Style>
151
- </Window.Resources>
152
- <StackPanel>
153
- <Button
154
- Width="140"
155
- Height="140"
156
- Content="Button"
157
- OpacityMask="White"
158
- Style="{DynamicResource ButtonStyle2}">
159
- <Button.BorderBrush>
160
- <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
161
- <GradientStop Offset="0" Color="Black" />
162
- <GradientStop Offset="1" Color="#FFF95A5A" />
163
- </LinearGradientBrush>
164
- </Button.BorderBrush>
165
- <!--<Button.Background>
166
- <ImageBrush ImageSource="1_1_tile..PNG" />
167
- </Button.Background>-->
168
- </Button>
169
-
170
- <Button
171
- Width="140"
172
- Height="140"
173
- Content="Button"
174
- Style="{DynamicResource ButtonStyle3}">
175
- <Button.Background>
176
- <ImageBrush ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/174112/HcvAPyTE_thumbnail.jpg" />
177
- </Button.Background>
178
- <Button.Tag>
179
- <ImageBrush ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg" />
180
- </Button.Tag>
181
- </Button>
182
- </StackPanel>
183
- </Window>
1
+ > 現在のコード(ボタン部分)
2
+
3
+ スタイル部分が重要なので、他人が再現できるコードを載せてください(省略すべきはこのボタンに関係しないほかのコントロール等です)
4
+
5
+ > 試したこと
6
+ > 現在マウスオ-バ-時に色が水色になるので、色を透明にしてみました
7
+
8
+ `Trigger`部分だけ書かれても、透明になっているかはわかりません。
9
+
10
+ このxamlでは`Button`の`Background`に`ImageBrush`を入れて、画像を出しているのはわかっていますか?
11
+ `Background`は色(`Color`)ではなく塗り方(`Brush`)です。
12
+
13
+ 透明にするのではなく、目的の`ImageBrush`にします。
14
+
15
+ ---
16
+
17
+ Blendで作ったスタイルそのままだと仮定して回答します。
18
+
19
+ 単純にやるなら`SolidColorBrush`になっている
20
+ * `Button.Static.Background`
21
+ * `Button.MouseOver.Background`
22
+ * `Button.Pressed.Background`
23
+
24
+ 3つを`ImageBrush`に変えます(`Static`に戻ればいいなら`Pressed`はいらないですが)
25
+
26
+ 変更点が少なく楽ですが、別の画像ボタンも作りたい場合はあまりよくないですね。
27
+ ちょっとセコいですが、`ButtonStyle3`のような作りにするのも手です。
28
+
29
+ ```xml
30
+ <Window
31
+ x:Class="Questions308117.MainWindow"
32
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
34
+ xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
35
+ xmlns:local="clr-namespace:Questions308117"
36
+ xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
37
+ Title="MainWindow"
38
+ Width="800"
39
+ Height="450"
40
+ mc:Ignorable="d">
41
+ <Window.Resources>
42
+ <Style x:Key="FocusVisual">
43
+ <Setter Property="Control.Template">
44
+ <Setter.Value>
45
+ <ControlTemplate>
46
+ <Rectangle
47
+ Margin="2"
48
+ SnapsToDevicePixels="true"
49
+ Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
50
+ StrokeDashArray="1 2"
51
+ StrokeThickness="1" />
52
+ </ControlTemplate>
53
+ </Setter.Value>
54
+ </Setter>
55
+ </Style>
56
+ <!--<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD" />-->
57
+ <!--<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD" />-->
58
+ <!--<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6" />-->
59
+ <ImageBrush x:Key="Button.Static.Background" ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/174112/HcvAPyTE_thumbnail.jpg" />
60
+ <ImageBrush x:Key="Button.MouseOver.Background" ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg" />
61
+ <ImageBrush x:Key="Button.Pressed.Background" ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/174112/HcvAPyTE_thumbnail.jpg" />
62
+
63
+ <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070" />
64
+ <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1" />
65
+ <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B" />
66
+ <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4" />
67
+ <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5" />
68
+ <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383" />
69
+ <Style x:Key="ButtonStyle2" TargetType="{x:Type Button}">
70
+ <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}" />
71
+ <Setter Property="Background" Value="{StaticResource Button.Static.Background}" />
72
+ <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}" />
73
+ <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
74
+ <Setter Property="BorderThickness" Value="1" />
75
+ <Setter Property="HorizontalContentAlignment" Value="Center" />
76
+ <Setter Property="VerticalContentAlignment" Value="Center" />
77
+ <Setter Property="Padding" Value="1" />
78
+ <Setter Property="Template">
79
+ <Setter.Value>
80
+ <ControlTemplate TargetType="{x:Type Button}">
81
+ <Border
82
+ x:Name="border"
83
+ Background="{TemplateBinding Background}"
84
+ BorderBrush="{TemplateBinding BorderBrush}"
85
+ BorderThickness="{TemplateBinding BorderThickness}"
86
+ SnapsToDevicePixels="true">
87
+ <ContentPresenter
88
+ x:Name="contentPresenter"
89
+ Margin="{TemplateBinding Padding}"
90
+ HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
91
+ VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
92
+ Focusable="False"
93
+ RecognizesAccessKey="True"
94
+ SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
95
+ </Border>
96
+ <ControlTemplate.Triggers>
97
+ <Trigger Property="IsDefaulted" Value="true">
98
+ <Setter TargetName="border" Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
99
+ </Trigger>
100
+ <Trigger Property="IsMouseOver" Value="true">
101
+ <Setter TargetName="border" Property="Background" Value="{StaticResource Button.MouseOver.Background}" />
102
+ <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.MouseOver.Border}" />
103
+ </Trigger>
104
+ <Trigger Property="IsPressed" Value="true">
105
+ <Setter TargetName="border" Property="Background" Value="{StaticResource Button.Pressed.Background}" />
106
+ <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.Pressed.Border}" />
107
+ </Trigger>
108
+ <Trigger Property="IsEnabled" Value="false">
109
+ <Setter TargetName="border" Property="Background" Value="{StaticResource Button.Disabled.Background}" />
110
+ <Setter TargetName="border" Property="BorderBrush" Value="{StaticResource Button.Disabled.Border}" />
111
+ <Setter TargetName="contentPresenter" Property="TextElement.Foreground" Value="{StaticResource Button.Disabled.Foreground}" />
112
+ </Trigger>
113
+ </ControlTemplate.Triggers>
114
+ </ControlTemplate>
115
+ </Setter.Value>
116
+ </Setter>
117
+ </Style>
118
+
119
+
120
+ <Style x:Key="ButtonStyle3" BasedOn="{StaticResource {x:Type Button}}" TargetType="{x:Type Button}">
121
+ <Setter Property="Template">
122
+ <Setter.Value>
123
+ <ControlTemplate TargetType="{x:Type Button}">
124
+ <Border
125
+ x:Name="border"
126
+ Background="{TemplateBinding Background}"
127
+ BorderBrush="{TemplateBinding BorderBrush}"
128
+ BorderThickness="{TemplateBinding BorderThickness}"
129
+ SnapsToDevicePixels="true">
130
+ <ContentPresenter
131
+ x:Name="contentPresenter"
132
+ Margin="{TemplateBinding Padding}"
133
+ HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
134
+ VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
135
+ Focusable="False"
136
+ RecognizesAccessKey="True"
137
+ SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
138
+ </Border>
139
+ <ControlTemplate.Triggers>
140
+ <Trigger Property="IsMouseOver" Value="true">
141
+ <Setter TargetName="border" Property="Background" Value="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" />
142
+ </Trigger>
143
+ <Trigger Property="IsPressed" Value="true">
144
+ <Setter TargetName="border" Property="Background" Value="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" />
145
+ </Trigger>
146
+ </ControlTemplate.Triggers>
147
+ </ControlTemplate>
148
+ </Setter.Value>
149
+ </Setter>
150
+ </Style>
151
+ </Window.Resources>
152
+ <StackPanel>
153
+ <Button
154
+ Width="140"
155
+ Height="140"
156
+ Content="Button"
157
+ OpacityMask="White"
158
+ Style="{DynamicResource ButtonStyle2}">
159
+ <Button.BorderBrush>
160
+ <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
161
+ <GradientStop Offset="0" Color="Black" />
162
+ <GradientStop Offset="1" Color="#FFF95A5A" />
163
+ </LinearGradientBrush>
164
+ </Button.BorderBrush>
165
+ <!--<Button.Background>
166
+ <ImageBrush ImageSource="1_1_tile..PNG" />
167
+ </Button.Background>-->
168
+ </Button>
169
+
170
+ <Button
171
+ Width="140"
172
+ Height="140"
173
+ Content="Button"
174
+ Style="{DynamicResource ButtonStyle3}">
175
+ <Button.Background>
176
+ <ImageBrush ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/174112/HcvAPyTE_thumbnail.jpg" />
177
+ </Button.Background>
178
+ <Button.Tag>
179
+ <ImageBrush ImageSource="https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail.jpg" />
180
+ </Button.Tag>
181
+ </Button>
182
+ </StackPanel>
183
+ </Window>
184
184
  ```