teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップC#に関する質問WPFでlineを引いてエフェクトをかけたい

編集履歴

回答編集履歴

2

見直しキャンペーン中

2023/08/10 10:49

投稿

TN8001
TN8001

スコア10114

answer CHANGED
@@ -239,4 +239,26 @@
239
239
  </Grid>
240
240
  </Window>
241
241
  ```
242
+ ```cs
243
+ using System;
244
+ using System.Globalization;
245
+ using System.Windows;
246
+ using System.Windows.Data;
247
+
248
+ namespace Questions250393
249
+ {
250
+ public class PointConverter : IMultiValueConverter
251
+ {
252
+ public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
253
+ => new Point((double)values[0], (double)values[1]);
254
+ public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
255
+ => throw new NotImplementedException();
256
+ }
257
+ public partial class MainWindow : Window
258
+ {
259
+ public MainWindow() => InitializeComponent();
260
+ }
261
+ }
262
+ ```
263
+
242
264
  ![アプリ画像](1aa2ad9b45d91151d5ddf372284287e6.png)

1

見直しキャンペーン中

2023/07/21 09:21

投稿

TN8001
TN8001

スコア10114

answer CHANGED
@@ -1,244 +1,242 @@
1
- ### グラデーション
2
- > 実際は必ずY方向に対してかかるみたいです。
3
-
4
- デフォルトだと右下方向ではありませんか？
5
-
6
- `StartPoint` `EndPoint`でどの方向にも向きますが、線だと扱いづらいですね。
7
- `MappingMode="Absolute"`にすればまだましそうです。
8
-
9
-
10
- ### エフェクト
11
- `OuterGlowBitmapEffect`等`BitmapEffect`はNET Framework 4で廃止になりました。
12
- 代替は`Effect`になります。
13
- 高速な上`ShaderEffect`を使えば何でもできそうですが、気の利いた面白いものを用意してくれていないです（`BlurEffect`と`DropShadowEffect`のみ）
14
-
15
- 基本的には`DropShadowEffect`を使うしかなさそうです。
16
- 光って見えるかどうかはよくわからないです^^;
17
-
18
- ```xaml
19
- <Window
20
- x:Class="Questions250393.MainWindow"
21
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
22
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
23
- xmlns:local="clr-namespace:Questions250393"
24
- Width="800"
25
- Height="450">
26
- <Window.Resources>
27
- <!-- double２つをPointにして返すIMultiValueConverter -->
28
- <local:PointConverter x:Key="PointConverter" />
29
- </Window.Resources>
30
- <Grid>
31
- <Grid.ColumnDefinitions>
32
- <ColumnDefinition />
33
- <ColumnDefinition />
34
- </Grid.ColumnDefinitions>
35
-
36
- <GroupBox Header="グラデーション">
37
- <Canvas>
38
- <!-- デフォルト斜め -->
39
- <Rectangle Width="50" Height="50">
40
- <Rectangle.Fill>
41
- <LinearGradientBrush>
42
- <GradientStop Offset="0" Color="Red" />
43
- <GradientStop Offset="1" Color="Blue" />
44
- </LinearGradientBrush>
45
- </Rectangle.Fill>
46
- </Rectangle>
47
- <!-- 縦 -->
48
- <Rectangle
49
- Canvas.Top="60"
50
- Width="50"
51
- Height="50">
52
- <Rectangle.Fill>
53
- <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
54
- <GradientStop Offset="0" Color="Red" />
55
- <GradientStop Offset="1" Color="Blue" />
56
- </LinearGradientBrush>
57
- </Rectangle.Fill>
58
- </Rectangle>
59
- <!-- 横 -->
60
- <Rectangle
61
- Canvas.Top="120"
62
- Width="50"
63
- Height="50">
64
- <Rectangle.Fill>
65
- <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
66
- <GradientStop Offset="0" Color="Red" />
67
- <GradientStop Offset="1" Color="Blue" />
68
- </LinearGradientBrush>
69
- </Rectangle.Fill>
70
- </Rectangle>
71
-
72
- <!-- X1,Y1が0で右か下方向ならStartPoint="0,0" EndPoint="1,1"で行ける -->
73
- <Line
74
- Canvas.Left="200"
75
- Canvas.Top="100"
76
- StrokeThickness="10"
77
- X1="0"
78
- X2="100"
79
- Y1="0"
80
- Y2="0">
81
- <Line.Stroke>
82
- <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
83
- <GradientStop Offset="0" Color="Red" />
84
- <GradientStop Offset="1" Color="Blue" />
85
- </LinearGradientBrush>
86
- </Line.Stroke>
87
- </Line>
88
- <Line
89
- Canvas.Left="200"
90
- Canvas.Top="100"
91
- StrokeThickness="10"
92
- X1="0"
93
- X2="100"
94
- Y1="0"
95
- Y2="100">
96
- <Line.Stroke>
97
- <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
98
- <GradientStop Offset="0" Color="Red" />
99
- <GradientStop Offset="1" Color="Blue" />
100
- </LinearGradientBrush>
101
- </Line.Stroke>
102
- </Line>
103
- <Line
104
- Canvas.Left="200"
105
- Canvas.Top="100"
106
- StrokeThickness="10"
107
- X1="0"
108
- X2="0"
109
- Y1="0"
110
- Y2="100">
111
- <Line.Stroke>
112
- <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
113
- <GradientStop Offset="0" Color="Red" />
114
- <GradientStop Offset="1" Color="Blue" />
115
- </LinearGradientBrush>
116
- </Line.Stroke>
117
- </Line>
118
-
119
- <!-- X2,Y2がマイナスになる場合MappingMode="Absolute" EndPointにマイナスで行けた -->
120
- <Line
121
- Canvas.Left="200"
122
- Canvas.Top="100"
123
- StrokeThickness="10"
124
- X1="0"
125
- X2="-100"
126
- Y1="0"
127
- Y2="100">
128
- <Line.Stroke>
129
- <LinearGradientBrush MappingMode="Absolute" StartPoint="0,0" EndPoint="-100,100">
130
- <GradientStop Offset="0" Color="Red" />
131
- <GradientStop Offset="1" Color="Blue" />
132
- </LinearGradientBrush>
133
- </Line.Stroke>
134
- </Line>
135
- <!-- べた置きでも同様 -->
136
- <Line
137
- StrokeThickness="10"
138
- X1="200"
139
- X2="100"
140
- Y1="100"
141
- Y2="100">
142
- <Line.Stroke>
143
- <LinearGradientBrush MappingMode="Absolute" StartPoint="200,100" EndPoint="100,100">
144
- <GradientStop Offset="0" Color="Red" />
145
- <GradientStop Offset="1" Color="Blue" />
146
- </LinearGradientBrush>
147
- </Line.Stroke>
148
- </Line>
149
- <!-- バインドできなくはないがどうなのか。。。 -->
150
- <Line
151
- StrokeThickness="10"
152
- X1="200"
153
- X2="100"
154
- Y1="100"
155
- Y2="0">
156
- <Line.Stroke>
157
- <LinearGradientBrush MappingMode="Absolute">
158
- <LinearGradientBrush.StartPoint>
159
- <MultiBinding Converter="{StaticResource PointConverter}">
160
- <Binding Path="X1" RelativeSource="{RelativeSource FindAncestor, AncestorType=Line}" />
161
- <Binding Path="Y1" RelativeSource="{RelativeSource FindAncestor, AncestorType=Line}" />
162
- </MultiBinding>
163
- </LinearGradientBrush.StartPoint>
164
- <LinearGradientBrush.EndPoint>
165
- <MultiBinding Converter="{StaticResource PointConverter}">
166
- <Binding Path="X2" RelativeSource="{RelativeSource FindAncestor, AncestorType=Line}" />
167
- <Binding Path="Y2" RelativeSource="{RelativeSource FindAncestor, AncestorType=Line}" />
168
- </MultiBinding>
169
- </LinearGradientBrush.EndPoint>
170
- <GradientStop Offset="0" Color="Red" />
171
- <GradientStop Offset="1" Color="Blue" />
172
- </LinearGradientBrush>
173
- </Line.Stroke>
174
- </Line>
175
- </Canvas>
176
- </GroupBox>
177
-
178
- <GroupBox Grid.Column="1" Header="エフェクト">
179
- <Canvas>
180
- <!-- ブラー -->
181
- <Line
182
- Canvas.Left="50"
183
- Canvas.Top="50"
184
- Stroke="Green"
185
- StrokeThickness="2"
186
- X2="100" />
187
- <Line
188
- Canvas.Left="200"
189
- Canvas.Top="50"
190
- Stroke="Green"
191
- StrokeThickness="2"
192
- X2="100">
193
- <Line.Effect>
194
- <BlurEffect Radius="5" />
195
- </Line.Effect>
196
- </Line>
197
-
198
- <!-- ドロップシャドウ -->
199
- <Line
200
- Canvas.Left="50"
201
- Canvas.Top="100"
202
- Stroke="Blue"
203
- StrokeThickness="2"
204
- X2="100" />
205
- <Line
206
- Canvas.Left="200"
207
- Canvas.Top="100"
208
- Stroke="Blue"
209
- StrokeThickness="2"
210
- X2="100">
211
- <Line.Effect>
212
- <DropShadowEffect
213
- BlurRadius="8"
214
- ShadowDepth="0"
215
- Color="Blue" />
216
- </Line.Effect>
217
- </Line>
218
-
219
- <!-- 色を変えたほうが見栄えがいい？ どう変えるんだという話だが -->
220
- <Line
221
- Canvas.Left="50"
222
- Canvas.Top="150"
223
- Stroke="Red"
224
- StrokeThickness="2"
225
- X2="100" />
226
- <Line
227
- Canvas.Left="200"
228
- Canvas.Top="150"
229
- Stroke="Red"
230
- StrokeThickness="2"
231
- X2="100">
232
- <Line.Effect>
233
- <DropShadowEffect
234
- BlurRadius="8"
235
- ShadowDepth="0"
236
- Color="DeepPink" />
237
- </Line.Effect>
238
- </Line>
239
- </Canvas>
240
- </GroupBox>
241
- </Grid>
242
- </Window>
243
- ```
1
+ ### グラデーション
2
+ > 実際は必ずY方向に対してかかるみたいです。
3
+
4
+ デフォルトだと右下方向ではありませんか？
5
+
6
+ `StartPoint`・`EndPoint`でどの方向にも向きますが、線だと扱いづらいですね。
7
+ `MappingMode="Absolute"`にすればまだましそうです。
8
+
9
+ ### エフェクト
10
+ `OuterGlowBitmapEffect`等`BitmapEffect`は、.NET Framework 4で廃止になりました。
11
+
12
+ 代替は`Effect`で高速な上`ShaderEffect`を使えば何でもできそうですが、気の利いた面白いものを用意してくれていないです（`BlurEffect`と`DropShadowEffect`のみ）
13
+
14
+ 基本的には`DropShadowEffect`を使うしかなさそうです（光って見えるかどうかはよくわからないです^^;
15
+
16
+ ```xml
17
+ <Window
18
+ x:Class="Questions250393.MainWindow"
19
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
20
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
21
+ xmlns:local="clr-namespace:Questions250393"
22
+ Width="800"
23
+ Height="450">
24
+ <Window.Resources>
25
+ <!-- double２つをPointにして返すIMultiValueConverter -->
26
+ <local:PointConverter x:Key="PointConverter" />
27
+ </Window.Resources>
28
+ <Grid>
29
+ <Grid.ColumnDefinitions>
30
+ <ColumnDefinition />
31
+ <ColumnDefinition />
32
+ </Grid.ColumnDefinitions>
33
+
34
+ <GroupBox Header="グラデーション">
35
+ <Canvas>
36
+ <!-- デフォルト斜め -->
37
+ <Rectangle Width="50" Height="50">
38
+ <Rectangle.Fill>
39
+ <LinearGradientBrush>
40
+ <GradientStop Offset="0" Color="Red" />
41
+ <GradientStop Offset="1" Color="Blue" />
42
+ </LinearGradientBrush>
43
+ </Rectangle.Fill>
44
+ </Rectangle>
45
+ <!-- 縦 -->
46
+ <Rectangle
47
+ Canvas.Top="60"
48
+ Width="50"
49
+ Height="50">
50
+ <Rectangle.Fill>
51
+ <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
52
+ <GradientStop Offset="0" Color="Red" />
53
+ <GradientStop Offset="1" Color="Blue" />
54
+ </LinearGradientBrush>
55
+ </Rectangle.Fill>
56
+ </Rectangle>
57
+ <!-- 横 -->
58
+ <Rectangle
59
+ Canvas.Top="120"
60
+ Width="50"
61
+ Height="50">
62
+ <Rectangle.Fill>
63
+ <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
64
+ <GradientStop Offset="0" Color="Red" />
65
+ <GradientStop Offset="1" Color="Blue" />
66
+ </LinearGradientBrush>
67
+ </Rectangle.Fill>
68
+ </Rectangle>
69
+
70
+ <!-- X1,Y1が0で右か下方向ならStartPoint="0,0" EndPoint="1,1"で行ける -->
71
+ <Line
72
+ Canvas.Left="200"
73
+ Canvas.Top="100"
74
+ StrokeThickness="10"
75
+ X1="0"
76
+ X2="100"
77
+ Y1="0"
78
+ Y2="0">
79
+ <Line.Stroke>
80
+ <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
81
+ <GradientStop Offset="0" Color="Red" />
82
+ <GradientStop Offset="1" Color="Blue" />
83
+ </LinearGradientBrush>
84
+ </Line.Stroke>
85
+ </Line>
86
+ <Line
87
+ Canvas.Left="200"
88
+ Canvas.Top="100"
89
+ StrokeThickness="10"
90
+ X1="0"
91
+ X2="100"
92
+ Y1="0"
93
+ Y2="100">
94
+ <Line.Stroke>
95
+ <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
96
+ <GradientStop Offset="0" Color="Red" />
97
+ <GradientStop Offset="1" Color="Blue" />
98
+ </LinearGradientBrush>
99
+ </Line.Stroke>
100
+ </Line>
101
+ <Line
102
+ Canvas.Left="200"
103
+ Canvas.Top="100"
104
+ StrokeThickness="10"
105
+ X1="0"
106
+ X2="0"
107
+ Y1="0"
108
+ Y2="100">
109
+ <Line.Stroke>
110
+ <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
111
+ <GradientStop Offset="0" Color="Red" />
112
+ <GradientStop Offset="1" Color="Blue" />
113
+ </LinearGradientBrush>
114
+ </Line.Stroke>
115
+ </Line>
116
+
117
+ <!-- X2,Y2がマイナスになる場合MappingMode="Absolute" EndPointにマイナスで行けた -->
118
+ <Line
119
+ Canvas.Left="200"
120
+ Canvas.Top="100"
121
+ StrokeThickness="10"
122
+ X1="0"
123
+ X2="-100"
124
+ Y1="0"
125
+ Y2="100">
126
+ <Line.Stroke>
127
+ <LinearGradientBrush MappingMode="Absolute" StartPoint="0,0" EndPoint="-100,100">
128
+ <GradientStop Offset="0" Color="Red" />
129
+ <GradientStop Offset="1" Color="Blue" />
130
+ </LinearGradientBrush>
131
+ </Line.Stroke>
132
+ </Line>
133
+ <!-- べた置きでも同様 -->
134
+ <Line
135
+ StrokeThickness="10"
136
+ X1="200"
137
+ X2="100"
138
+ Y1="100"
139
+ Y2="100">
140
+ <Line.Stroke>
141
+ <LinearGradientBrush MappingMode="Absolute" StartPoint="200,100" EndPoint="100,100">
142
+ <GradientStop Offset="0" Color="Red" />
143
+ <GradientStop Offset="1" Color="Blue" />
144
+ </LinearGradientBrush>
145
+ </Line.Stroke>
146
+ </Line>
147
+ <!-- バインドできなくはないがどうなのか。。。 -->
148
+ <Line
149
+ StrokeThickness="10"
150
+ X1="200"
151
+ X2="100"
152
+ Y1="100"
153
+ Y2="0">
154
+ <Line.Stroke>
155
+ <LinearGradientBrush MappingMode="Absolute">
156
+ <LinearGradientBrush.StartPoint>
157
+ <MultiBinding Converter="{StaticResource PointConverter}">
158
+ <Binding Path="X1" RelativeSource="{RelativeSource FindAncestor, AncestorType=Line}" />
159
+ <Binding Path="Y1" RelativeSource="{RelativeSource FindAncestor, AncestorType=Line}" />
160
+ </MultiBinding>
161
+ </LinearGradientBrush.StartPoint>
162
+ <LinearGradientBrush.EndPoint>
163
+ <MultiBinding Converter="{StaticResource PointConverter}">
164
+ <Binding Path="X2" RelativeSource="{RelativeSource FindAncestor, AncestorType=Line}" />
165
+ <Binding Path="Y2" RelativeSource="{RelativeSource FindAncestor, AncestorType=Line}" />
166
+ </MultiBinding>
167
+ </LinearGradientBrush.EndPoint>
168
+ <GradientStop Offset="0" Color="Red" />
169
+ <GradientStop Offset="1" Color="Blue" />
170
+ </LinearGradientBrush>
171
+ </Line.Stroke>
172
+ </Line>
173
+ </Canvas>
174
+ </GroupBox>
175
+
176
+ <GroupBox Grid.Column="1" Header="エフェクト">
177
+ <Canvas>
178
+ <!-- ブラー -->
179
+ <Line
180
+ Canvas.Left="50"
181
+ Canvas.Top="50"
182
+ Stroke="Green"
183
+ StrokeThickness="2"
184
+ X2="100" />
185
+ <Line
186
+ Canvas.Left="200"
187
+ Canvas.Top="50"
188
+ Stroke="Green"
189
+ StrokeThickness="2"
190
+ X2="100">
191
+ <Line.Effect>
192
+ <BlurEffect Radius="5" />
193
+ </Line.Effect>
194
+ </Line>
195
+
196
+ <!-- ドロップシャドウ -->
197
+ <Line
198
+ Canvas.Left="50"
199
+ Canvas.Top="100"
200
+ Stroke="Blue"
201
+ StrokeThickness="2"
202
+ X2="100" />
203
+ <Line
204
+ Canvas.Left="200"
205
+ Canvas.Top="100"
206
+ Stroke="Blue"
207
+ StrokeThickness="2"
208
+ X2="100">
209
+ <Line.Effect>
210
+ <DropShadowEffect
211
+ BlurRadius="8"
212
+ ShadowDepth="0"
213
+ Color="Blue" />
214
+ </Line.Effect>
215
+ </Line>
216
+
217
+ <!-- 色を変えたほうが見栄えがいい？ どう変えるんだという話だが -->
218
+ <Line
219
+ Canvas.Left="50"
220
+ Canvas.Top="150"
221
+ Stroke="Red"
222
+ StrokeThickness="2"
223
+ X2="100" />
224
+ <Line
225
+ Canvas.Left="200"
226
+ Canvas.Top="150"
227
+ Stroke="Red"
228
+ StrokeThickness="2"
229
+ X2="100">
230
+ <Line.Effect>
231
+ <DropShadowEffect
232
+ BlurRadius="8"
233
+ ShadowDepth="0"
234
+ Color="DeepPink" />
235
+ </Line.Effect>
236
+ </Line>
237
+ </Canvas>
238
+ </GroupBox>
239
+ </Grid>
240
+ </Window>
241
+ ```
244
242
  ![アプリ画像](1aa2ad9b45d91151d5ddf372284287e6.png)