前の話し

📖　WPFって何だぜ（＾～＾）？

気の早い人向け

📖　wpf-brush-practice - Git hub に上げたもの

今回の話し

「　WPFに　網掛けブラシって　あんの？」

📖　Create a hatch pattern in WPF

「　👆　ブラシは自作できるみたいだぜ」

「　ハッチ パターンねぇ」

「　Viewbox とか Viewport とか　さっぱり分からん。説明ないの？」

📖　TileBrush.Viewbox Property

「　👆　この記事はどうだぜ？」

「　Viewbox は　トリミング　のようでもある。　Viewport は何だぜ？」

📖　TileBrush.Viewport Property

「　👆　繰り返しパターンで埋め尽くしたい　描画面積のことでは」

<Window x:Class="WpfBrushPractice.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:WpfBrushPractice"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <!-- このウィンドウでだけ使うリソースをここで定義します -->
    <Window.Resources>
        <!--
            ハッチ パターンのブラシを自作します
            Viewport の x, y は ハッチパターンを埋め尽くしたい面積で、
                        パターンの開始地点です。
            Viewport の width, height は ハッチパターンを埋め尽くしたい面積です
            Viewbox の x, y は原点に合わせたいパターンの箇所です。
            Viewbox の width, height はブラシのペン先の大きさのようなものです。
        -->
        <VisualBrush x:Key="MyVisualBrush" TileMode="Tile"
                     Viewport="0,0,200,200" ViewportUnits="Absolute"
                     Viewbox="0,0,150,150" ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Grid Background="Orchid">
                    <!-- 丸 -->
                    <Ellipse HorizontalAlignment="Left" VerticalAlignment="Top"
                             Margin="0,0,0,0"
                             Width="50" Height="50"
                             Fill="DarkOrchid"/>
                    <Rectangle HorizontalAlignment="Left" VerticalAlignment="Top"
                               Margin="50,50,0,0"
                               Width="50" Height="50"
                               Fill="SkyBlue" />
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Window.Resources>

    <Grid Background="{StaticResource MyVisualBrush}">
        <Label HorizontalAlignment="Center" VerticalAlignment="Center"
               FontSize="200"
               Foreground="AntiqueWhite"
               Content="Practice" 
               />
    </Grid>

</Window>

「　👆　練習だぜ！」

「　面積いっぱいに　模様が繰り返されるのは　分かったが」

        <VisualBrush x:Key="MyVisualBrush" TileMode="Tile"
                     Viewport="0,0,200,200" ViewportUnits="Absolute"
                     Viewbox="0,0,150,150" ViewboxUnits="Absolute"
                     AlignmentX="Left" AlignmentY="Top">
            <VisualBrush.Visual>
                <Grid Background="Orchid">
                    <!-- 丸 -->
                    <Ellipse Margin="0,0,0,0"
                             Width="50" Height="50"
                             Fill="DarkOrchid"/>
                    <Rectangle Margin="50,50,0,0"
                               Width="50" Height="50"
                               Fill="SkyBlue" />
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>

「　👆　左寄せ、上寄せは　VisualBrush タグに付けた方が　すっきりかな」

リピートさせない

<Page x:Class="WpfBrushPractice.Sample2Page"
      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:WpfBrushPractice"
      mc:Ignorable="d" 
      d:DesignHeight="450" d:DesignWidth="800"
      Title="Sample2Page">

    <!-- このページでだけ使うリソースをここで定義します -->
    <Page.Resources>
        <!--
            ハッチ パターンのブラシを自作します
            Viewport の x, y は ハッチパターンを埋め尽くしたい面積で、
                        パターンの開始地点です。
            Viewport の width, height は ハッチパターンを埋め尽くしたい面積です
            Viewbox の x, y は原点に合わせたいパターンの箇所です。
            Viewbox の width, height はブラシのペン先の大きさのようなものです。
        -->
        <VisualBrush x:Key="MyVisualBrush" TileMode="None"
                     Viewport="0,0,100,100" ViewportUnits="Absolute"
                     Viewbox="0,0,100,100" ViewboxUnits="Absolute"
                     AlignmentX="Left" AlignmentY="Top">
            <VisualBrush.Visual>
                <Grid>
                    <!-- 2行2列のグリッド -->
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>

                    <!-- 四角 -->
                    <Rectangle Grid.RowSpan="2" Grid.ColumnSpan="2"
                               Width="100" Height="100" Fill="Orchid"/>

                    <!-- 境界線 -->
                    <Border Grid.RowSpan="2" Grid.ColumnSpan="2"
                            HorizontalAlignment="Left" VerticalAlignment="Top"
                            Width="100" Height="100"
                            BorderThickness="4"
                            BorderBrush="DarkOrchid"/>

                    <!-- 丸 -->
                    <Ellipse Width="30" Height="30"
                             Fill="DarkOrchid"/>
                    <Ellipse Grid.Column="1"
                             Width="30" Height="30"
                             Fill="DarkOrchid"/>
                    <Ellipse Grid.Row="1"
                             Width="30" Height="30"
                             Fill="DarkOrchid"/>
                    <Ellipse Grid.Row="1" Grid.Column="1"
                             Width="30" Height="30"
                             Fill="DarkOrchid"/>
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Page.Resources>

    <Grid>
        <!-- 四角を置きます -->
        <Rectangle Width="100" Height="100" Fill="{StaticResource MyVisualBrush}">

        </Rectangle>
    </Grid>
</Page>

「　👆　VisualBrush の TileMode を None にすれば、リピートしないパターンが作れるのでは」

「　100 x 100 pixels 固定で　使いづら」

「　ブラシのくせに　色がハードコーディングされてていいの？」

「　うーむ」

「　ブラシをセットするときは、背景とか前景とか、そういう　かたまり　なんで、
ブラシの前景色、ブラシの背景色　のように　指定する蘭は無いぜ」