WPFでlineを引いてエフェクトをかけたい

WPFで図形を描画して、それをクリックして移動させたり出来るような簡易のプレゼンソフト的な物を作成しています。

図形に関しては

c#
1System.Windows.Shapes

を使用しており、基本的にはLineとEllipseを使っています。
Shapesで描画することで線や円に対してクリック等のイベントを発生させられるので動作自体はほぼ思った事が実現できております。

次の段階として見栄えの話が出てきており、この辺は私が非常に苦手な分野なのですが・・・

線そのものはLinearGradientBrushでグラデーションがかけられることは分かりました。

https://docs.microsoft.com/ja-jp/dotnet/framework/wpf/graphics-multimedia/painting-with-solid-colors-and-gradients-overview

しかしこれは問題が一点。
直線を引いた場合、勝手に指定した開始点から終了点にかけてグラデーションがかかるのかと思いましたが、実際は必ずY方向に対してかかるみたいです。
これは何か解決法はありますでしょうか？

次にOuterGlowBitmapEffect クラスを見つけたんですが、

https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.media.effects.outerglowbitmapeffect?view=netframework-4.8

これはこれでかなり使い方が限定されるようで、試しにXAMLでLineShapeに対して使ってみようと思ったところそもそもLineShapeが中にXAMPを入れられないようで、TextBox等の物にしか使えないのかな？と思っています。

先方の要望は要するに線を目立たせるためにグロウ的な光ってる様なエフェクトをかけたいとの要望で現在それを検証中なんですが、何か実現可能な方法はありませんでしょうか？

宜しくお願い致します。

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

回答1件

ベストアンサー

グラデーション

実際は必ずY方向に対してかかるみたいです。

デフォルトだと右下方向ではありませんか？

StartPoint・EndPointでどの方向にも向きますが、線だと扱いづらいですね。
MappingMode="Absolute"にすればまだましそうです。

エフェクト

OuterGlowBitmapEffect等BitmapEffectは、.NET Framework 4で廃止になりました。

代替はEffectで高速な上ShaderEffectを使えば何でもできそうですが、気の利いた面白いものを用意してくれていないです（BlurEffectとDropShadowEffectのみ）

基本的にはDropShadowEffectを使うしかなさそうです（光って見えるかどうかはよくわからないです^^;

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

cs
1using System;
2using System.Globalization;
3using System.Windows;
4using System.Windows.Data;
5
6namespace Questions250393
7{
8    public class PointConverter : IMultiValueConverter
9    {
10        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) 
11            => new Point((double)values[0], (double)values[1]);
12        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
13            => throw new NotImplementedException();
14    }
15    public partial class MainWindow : Window
16    {
17        public MainWindow() => InitializeComponent();
18    }
19}

投稿2020/03/30 21:18

編集2023/08/10 10:49

TN8001

総合スコア9862

landy77

2020/03/31 03:49

あ～なるほど、ちゃんと理解してませんでした。 StartPointとEndPointによって開始点と終了点の位置を決めて、Offsetでグラデーションの色を決める感じなんですね。って事は引いた線毎に開始・終了ポイントからグラデーションの向きを計算すればそれぞれの線に合わせてグラデーションを最適化すること自体は手間はかかりそうですが出来そうですね・・・（まだ試してませんがエフェクトについてはFW4.0で廃止なんですね。まぁ実際に手間はかかりますがDropShadowとBlurでほぼ同じ感じは実現できそうです。エフェクト自体はコードでtheLineで線を引いたとして、そこにXAMLを参考にして theLine.Effect = new DropShadowEffect { BlurRadius=8, ShadowDepth=0, Color=Colors.DeepPink }; と言う形で実装できました。まぁ廃止になった物は仕方ないのでこの形で実装してみます。ご回答頂き有り難うございました。

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