WPFアプリケーションのDrawingBrushで斜線を隙間なく引きたい

斜線を引いたら隙間が空いてる！？

こんにちは！

何かと理由をつけて飲み会を断ることにおいてはプロフェッショナル。 ナチュラルヒッキーエンジニア、あらたまです。

今回は斜線をタイリングしたときにできてしまう隙間の回避方法をご案内します。

斜線を引いてみる

WPFアプリケーションで斜線を描画するDrawingBrushを作成し、それをタイリングして背景にしてみます。

    <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="100" Width="100">
        <Window.Resources>
            <DrawingBrush  x:Key="DiagonalBrush"
                        Viewport="0,0,20,20" ViewportUnits="Absolute"
                        Viewbox="0,0,10,10" ViewboxUnits="Absolute"
                        TileMode="Tile">
                <DrawingBrush.Drawing>
                    <GeometryDrawing>
                        <GeometryDrawing.Pen>
                            <Pen Brush="Gray" Thickness="1"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <Geometry>M10,0 L0,10</Geometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Window.Resources>
        <Grid Background="{StaticResource DiagonalBrush}">
            
        </Grid>
    </Window>

実行してみると。。

画像だとちょっとわかりにくいですが、タイリングされた斜線どうしがぴったりくっつかずに、わずかに隙間ができています。

拡大してみるとこんな感じ。

タイル１枚だけを拡大してみると、こんな感じ。
両端が90度で切り取られてしまっているため、隙間ができてしまうんですね。
※四角い枠線はわかりやすくするために仮に表示しています。

隙間がないように斜線を引く

両端が90度で切り取られているのが原因ですので、それを埋める箇所をタイルの左上、右下に描画するようにしてあげれば良いことになります。

下記がソースコードです。<Geometry>タグのところで、隙間を埋める描画を追加しました。

    <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="100" Width="100">
        <Window.Resources>
            <DrawingBrush  x:Key="DiagonalBrush"
                        Viewport="0,0,20,20" ViewportUnits="Absolute"
                        Viewbox="0,0,10,10" ViewboxUnits="Absolute"
                        TileMode="Tile">
                <DrawingBrush.Drawing>
                    <GeometryDrawing>
                        <GeometryDrawing.Pen>
                            <Pen Brush="Gray" Thickness="1"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <Geometry>M10,0 L0,10 M5,-5 L-5,5 M15,5 L5,15</Geometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Window.Resources>
        <Grid Background="{StaticResource DiagonalBrush}">
            
        </Grid>
    </Window>

実行すると。。

無事、隙間なく斜線を引くことができました！