No more Death March

あるSEのチラシの裏 C# WPF

WPF 描画の練習 マル印

前回の記事に引き続き、WPFの描画周りを練習

前回の記事はこちら↓
nomoredeathmarch.hatenablog.com

前回はバツ印を作ったので今回はマル印を作ってみました。
まだ簡単・・・

イメージ

f:id:nomoredeathmarch:20180404225738p:plain

XAML

<UserControl x:Class="WpfApp1.UserControl2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp1"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Canvas
        Height="100"
        Width="100"
        Background="Aqua"
        >
        <Path
            Stroke="Black"            
            >
            <Path.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Tomato" Offset="0"/>
                    <GradientStop Color="Red" Offset="0.5"/>
                    <GradientStop Color="Crimson" Offset="0.7"/>
                </LinearGradientBrush>
            </Path.Fill>
            <Path.Data>
                <CombinedGeometry
                    GeometryCombineMode="Xor"
                    >
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <EllipseGeometry Center="50,50" RadiusX="30" RadiusY="30"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</UserControl>

ポイント

・半径が違う円を重ねて合成
・GeometryCombineModeはXorでGeometry2の領域を描画しない

ジオメトリの使い方、良いサンプルないかなぁってネットで検索したりしてたのですが、
手元にあるエッセンシャルWPFの204ページ辺りにしっかり書いてありました。

エッセンシャルWPF:Windows Presentation Foundation (Programmer's SELECTION)

エッセンシャルWPF:Windows Presentation Foundation (Programmer's SELECTION)

WPF 描画の練習 バツ印

描画処理への理解を深めるため、簡単なマークの作成に挑戦してみました。
大したことしてないのに思った以上に「それっぽく」見えるので面白いです。

イメージ

f:id:nomoredeathmarch:20180403222614p:plain

XAML

<UserControl x:Class="WpfApp1.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp1"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Canvas
        Height="100"
        Width="100"
        Background="Aqua"
        >
        <Path
            Stroke="Black"            
            >
            <Path.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Tomato" Offset="0"/>
                    <GradientStop Color="Red" Offset="0.5"/>
                    <GradientStop Color="Crimson" Offset="0.7"/>
                </LinearGradientBrush>
            </Path.Fill>
            <Path.Data>
                <CombinedGeometry
                    GeometryCombineMode="Union"
                    >
                    <CombinedGeometry.Geometry1>
                        <RectangleGeometry
                        Rect="0,40,100,20">
                            <RectangleGeometry.Transform>
                                <RotateTransform CenterX="50" CenterY="50" Angle="45"/>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry
                        Rect="0,40,100,20"
                        >
                            <RectangleGeometry.Transform>
                                <RotateTransform CenterX="50" CenterY="50" Angle="135"/>
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</UserControl>

ポイント

・CombinedGeometryで同じ大きさの二つの長方形を合成
・GeometryCombineModeはUnionで双方の領域を描画
・RenderTransformを使って長方形を45度、135度回転
・回転の中心はキャンバスの中心

WPF PathFigureによる描画

直線 - LineSegment

f:id:nomoredeathmarch:20180401204712p:plain
指定座標までの直線を引く。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <UniformGrid>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <LineSegment Point="100,50"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="50,0">
                            <LineSegment Point="50,100"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <LineSegment Point="100,100"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,100">
                            <LineSegment Point="100,0"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <LineSegment Point="100,25"/>
                            <LineSegment Point="0,50"/>
                            <LineSegment Point="100,75"/>
                            <LineSegment Point="0,100"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
    </UniformGrid>
</Window>

円弧 - ArcSegment

f:id:nomoredeathmarch:20180401210251p:plain
終点、X軸Y軸の半径、時計周りか半時計周りか

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <UniformGrid>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <ArcSegment 
                                Point="100,50"
                                Size="1,1"
                                SweepDirection="Clockwise"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <ArcSegment 
                                Point="100,50"
                                Size="1,1"
                                SweepDirection="Counterclockwise"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <ArcSegment 
                                Point="100,50"
                                Size="1,0.5"
                                IsLargeArc="False"
                                SweepDirection="Clockwise"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,0">
                            <ArcSegment 
                                Point="0,100"
                                Size="1,0.5"
                                IsLargeArc="False"
                                SweepDirection="Clockwise"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="100,0">
                            <ArcSegment 
                                Point="100,100"
                                Size="1,0.5"
                                IsLargeArc="False"
                                SweepDirection="Counterclockwise"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
    </UniformGrid>
</Window>

2次ペジェ曲線 - QuadraticBezierSegment

f:id:nomoredeathmarch:20180401211154p:plain
Point1は制御点、Point2が終点

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <UniformGrid>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="50,0"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="25,0"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="75,0"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="50,-50"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="25,-50"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <QuadraticBezierSegment
                                Point1="75,-50"
                                Point2="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
    </UniformGrid>
</Window>

3次ペジェ曲線 - BezierSegment

f:id:nomoredeathmarch:20180401212007p:plain
Point1、Point2が制御点、Point3が終点

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <UniformGrid>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="0,0"
                                Point2="100,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="20,0"
                                Point2="80,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="30,0"
                                Point2="70,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="40,0"
                                Point2="60,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="50,0"
                                Point2="50,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
        <Canvas Width="100" Height="100" Background="Aqua">
            <Path Stroke="Black">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,50">
                            <BezierSegment
                                Point1="100,0"
                                Point2="0,0"
                                Point3="100,50"
                                />
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
        </Canvas>
    </UniformGrid>
</Window>

WPFのグラデーション

一つ前の記事と同じようにグラデーションについてもメモ

f:id:nomoredeathmarch:20180401183210p:plain

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <UniformGrid
        Rows="2"
        Columns="4"
        >
        <Canvas>
            <Canvas.Background>
                <LinearGradientBrush StartPoint="0,1" EndPoint="1,1">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.5"/>
                </LinearGradientBrush>
            </Canvas.Background>
        </Canvas>
        <Canvas>
            <Canvas.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.5"/>
                </LinearGradientBrush>
            </Canvas.Background>
        </Canvas>
        <Canvas>
            <Canvas.Background>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.5"/>
                </LinearGradientBrush>
            </Canvas.Background>
        </Canvas>
        <Canvas>
            <Canvas.Background>
                <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.5"/>
                </LinearGradientBrush>
            </Canvas.Background>
        </Canvas>
        <Canvas>
            <Canvas.Background>
                <RadialGradientBrush RadiusX="1" RadiusY="1" Center="0.5,0.5" GradientOrigin="0.5,0.5">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.5"/>
                </RadialGradientBrush>
            </Canvas.Background>
        </Canvas>
        <Canvas>
            <Canvas.Background>
                <RadialGradientBrush RadiusX="1" RadiusY="1" Center="0.25,0.25" GradientOrigin="0.5,0.5">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.5"/>
                </RadialGradientBrush>
            </Canvas.Background>
        </Canvas>
        <Canvas>
            <Canvas.Background>
                <RadialGradientBrush RadiusX="1" RadiusY="1" Center="0.5,0.5" GradientOrigin="0.25,0.25">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.5"/>
                </RadialGradientBrush>
            </Canvas.Background>
        </Canvas>
        <Canvas>
            <Canvas.Background>
                <RadialGradientBrush RadiusX="1" RadiusY="0.5" Center="0.5,0.5" GradientOrigin="0.5,0.5">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.5"/>
                </RadialGradientBrush>
            </Canvas.Background>
        </Canvas>
    </UniformGrid>
</Window>

WPFの描画関係メモ

描画関係、仕事では滅多に使わないのだけど、
その分毎回忘れてしまうのでこの記事でメモ

とにかく線を引いてみる

Lineクラスをそのまま使うことも出来るけど、
多少込み入った描画方法も習得したいならPathを覚えた方が良さそう。
(その分重いみたいだが・・・)
f:id:nomoredeathmarch:20180401155138p:plain

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas
        Height="100"
        Width="100"
        Background="Aqua"
        >
        <Path
            Stroke="Black"
            >
            <Path.Data>
                <LineGeometry
                    StartPoint="0,0"
                    EndPoint="100,100"
                    />
            </Path.Data>
        </Path>
    </Canvas>
</Window>

複数の線を引く

GeometryGroupの中に描画したいGeometryを追加して行けば良い。
f:id:nomoredeathmarch:20180401160145p:plain

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas
        Height="100"
        Width="100"
        Background="Aqua"
        >
        <Path
            Stroke="Black"
            >
            <Path.Data>
                <GeometryGroup>
                    <LineGeometry
                        StartPoint="0,0"
                        EndPoint="100,100"
                        />
                    <LineGeometry
                        StartPoint="100,0"
                        EndPoint="0,100"
                        />
                    <LineGeometry
                        StartPoint="50,0"
                        EndPoint="50,100"
                        />
                    <LineGeometry
                        StartPoint="0,50"
                        EndPoint="100,50"
                        />
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

円・楕円

円、楕円は中心の座標とX軸の半径、Y軸の半径を指定する。
f:id:nomoredeathmarch:20180401160822p:plain

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas
        Height="100"
        Width="100"
        Background="Aqua"
        >
        <Path
            Stroke="Black"
            >
            <Path.Data>
                <EllipseGeometry
                    Center="50,50"
                    RadiusX="50"
                    RadiusY="50"
                    />
            </Path.Data>
        </Path>
    </Canvas>
</Window>

四角形

四角形はRectプロパティにX軸の始点、Y軸の始点、X軸の幅、Y軸の幅を指定する。
f:id:nomoredeathmarch:20180401161421p:plain

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas
        Height="100"
        Width="100"
        Background="Aqua"
        >
        <Path
            Stroke="Black"
            >
            <Path.Data>
                <RectangleGeometry
                    Rect="20,20,60,60"
                    />
            </Path.Data>
        </Path>
    </Canvas>
</Window>

塗りつぶし

PathクラスのFillプロパティにブラシを指定することで塗りつぶし
f:id:nomoredeathmarch:20180401161707p:plain

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas
        Height="100"
        Width="100"
        Background="Aqua"
        >
        <Path
            Stroke="Black"
            Fill="Snow"
            >
            <Path.Data>
                <RectangleGeometry
                    Rect="20,20,60,60"
                    />
            </Path.Data>
        </Path>
    </Canvas>
</Window>

交差部分の塗りつぶし

GeometryGroupのFillRuleプロパティによって交差する図形の描画方法が変わる。
GeometryGroup.FillRule プロパティ (System.Windows.Media)
↑ぱっと読んだだけでは理解出来ず・・・
EvenOdd⇒交差する部分を塗りつぶししない?
NonZero⇒交差する部分を塗りつぶす?
f:id:nomoredeathmarch:20180401162951p:plain

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas
        Height="100"
        Width="100"
        Background="Aqua"
        >
        <Path
            Stroke="Black"
            Fill="Snow"
            >
            <Path.Data>
                <GeometryGroup FillRule="EvenOdd">
                    <RectangleGeometry
                        Rect="0,0,50,100"
                        />
                    <EllipseGeometry
                        Center="50,50"
                        RadiusX="50"
                        RadiusY="30"
                        />
                </GeometryGroup>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

交差部分の塗りつぶし(CombinedGeometry)

CombinedGeometryを使うと交差部分の扱いがもう少し理解しやすい。
WPFでプログラムしてみよう(6) - 子持ちししゃもといっしょ
参考にさせていただくと、
CombinedGeometryはGeometry1とGeometry2の二つの要素の合成であり、
GeometryCombineModeで交差部分の処理を切り替えることが出来る様子。
Exclude⇒Geometry1からGeometry2の交差部分を除いた領域を描画
Intersect⇒交差部分のみ描画
Union⇒全ての領域を描画
Xor⇒交差部分以外を描画

さっきと同じ結果だが、CombinedGeometryで書き換えると以下のようになる
f:id:nomoredeathmarch:20180401162951p:plain

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Canvas
        Height="100"
        Width="100"
        Background="Aqua"
        >
        <Path
            Stroke="Black"
            Fill="Snow"
            >
            <Path.Data>
                <CombinedGeometry
                    GeometryCombineMode="Xor"
                    >
                    <CombinedGeometry.Geometry1>
                        <RectangleGeometry
                            Rect="0,0,50,100"
                            />
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <EllipseGeometry
                            Center="50,50"
                            RadiusX="50"
                            RadiusY="30"
                            />
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Canvas>
</Window>

C# WPF PreviewTextInputで入力後のテキストを取得する。

とりあえずコード

        private static void TextBox_PreviewTextInput(object sender, TextCompositionEventArgs e)
        {
            var textBox = sender as TextBox;
            if (textBox == null) return;

            var changed = 
                textBox.Text
                .Remove(textBox.SelectionStart, textBox.SelectionLength)
                .Insert(textBox.SelectionStart, e.Text)
                ;
        }

・テキストボックスの選択範囲の文字列を消す。(Removeメソッドの部分)
・イベント引数から入力された文字列(e.Text)を選択位置に挿入する。(Insertメソッドの部分)

※自作ビヘイビアからの抜粋なのでメソッドはprivate static

 入力用のコントロールではこの後正規表現とかで不正な文字が入力されているかチェックすれば良い。

注意しなければいけないこと

 これだけで万事解決出来れば良いのだけど他にも気を付けなければいけないことある。

ペーストへの対応

 DataObjectPastingイベントのハンドラーを使ってペースト時にチェックを処理を差し込んでやる必要がある。
イベントハンドラーの購読はDataObjectクラスのAddPastingHandlerメソッド、
購読の解除はDataObjectクラスのRemovePastingHandlerメソッドを使う。

DataObjectPastingイベントの購読と購読解除の例
            // 購読開始
            DataObject.AddPastingHandler(textBox, OnPasting);
            // 購読解除
            DataObject.RemovePastingHandler(textBox, OnPasting);

 先のPreviewTextInputの時と同じようにペーストした後のテキストを取得するなら以下のような具合になる。

        private static void DataObject_Pasting(object sender, DataObjectPastingEventArgs e)
        {
            var textBox = sender as TextBox;
            if (textBox == null) return;

            var pasted = e.SourceDataObject.GetData(DataFormats.UnicodeText) as string;
            if (pasted == null) return;

            var changed =
                textBox.Text
                .Remove(textBox.SelectionStart, textBox.SelectionLength)
                .Insert(textBox.SelectionStart, pasted)
                ;
        }

IMEへの対応

 WPFではIMEの入力途中であってもTextChangedイベントが発生する。半角文字の入力に限定したコントロールであれば、
フォーカス中にIMEを無効化すれば良いが、全角入力を受け付ける場合は注意が必要。

 以下参考
IMEで変換状態中でもTextBox.TextChangedが発生する | 泥庭

Textプロパティへの書き込み

 コード側でTextBoxのTextプロパティを書き換えられた場合、これはTextChangedイベントで検出する必要がある。全てのチェックをTextChangedイベントで完結させることも出来るが、キャレットの復元やテキストの復元まで考慮すると複雑なロジックになってしまいがち。また、MVVMで開発している場合、ViewModelとの余計な通信が発生する原因にもなるので役割を分担して対応したいところ。

C# 正規表現の基礎をメモ

Regexクラス

C#正規表現を使う場合はRegexを使う。
・コンストラクタでパターン文字列を指定する。
・IsMatch(String)メソッド(戻り値bool)で正規表現と一致するかどうかを取得する。

Regex クラス (System.Text.RegularExpressions)

使用例

 以下簡単な使用例、行頭、行末、繰り返しを組み合わせれば業務アプリの入力チェックを簡素に記述出来ると思われる。
よく見かけるのは銀行系の利用可能文字、電話番号、郵便番号、金額や単価、数量とかかな。

            // 空文字または半角英数字のみ
            Assert.IsTrue(new Regex("^[a-zA-Z0-9]*$").IsMatch(string.Empty));
            Assert.IsTrue(new Regex("^[a-zA-Z0-9]*$").IsMatch("azAZ09"));

            Assert.IsFalse(new Regex("^[a-zA-Z0-9]*$").IsMatch("azAZ09あ"));
            Assert.IsFalse(new Regex("^[a-zA-Z0-9]*$").IsMatch("a-0"));

            // 3桁半角英数字のみ
            Assert.IsTrue(new Regex("^[a-zA-Z0-9]{3}$").IsMatch("A12"));
            Assert.IsTrue(new Regex("^[a-zA-Z0-9]{3}$").IsMatch("9ab"));

            Assert.IsFalse(new Regex("^[a-zA-Z0-9]{3}$").IsMatch("dz"));
            Assert.IsFalse(new Regex("^[a-zA-Z0-9]{3}$").IsMatch("9abc"));

            // 3桁以下半角英数字のみ
            Assert.IsTrue(new Regex("^[a-zA-Z0-9]{0,3}$").IsMatch(string.Empty));
            Assert.IsTrue(new Regex("^[a-zA-Z0-9]{0,3}$").IsMatch("9ab"));
            Assert.IsTrue(new Regex("^[a-zA-Z0-9]{0,3}$").IsMatch("Aa"));

            Assert.IsFalse(new Regex("^[a-zA-Z0-9]{0,3}$").IsMatch("9abc"));
            Assert.IsFalse(new Regex("^[a-zA-Z0-9]{0,3}$").IsMatch("9abc"));