WPFでブラシの練習をしようぜ(^~^)?

ブッシュブッシュ(^~^) ブシュブシュ(^~^) 公開下書き

前の話し

📖 WPFって何だぜ(^~^)?

気の早い人向け

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

今回の話し

ramen-tabero-futsu2.png
「 WPFに 網掛けブラシって あんの?」

📖 Create a hatch pattern in WPF

kifuwarabe-futsu.png
「 👆 ブラシは自作できるみたいだぜ」

ohkina-hiyoko-futsu2.png
「 ハッチ パターンねぇ」

ramen-tabero-futsu2.png
「 Viewbox とか Viewport とか さっぱり分からん。説明ないの?」

📖 TileBrush.Viewbox Property

kifuwarabe-futsu.png
「 👆 この記事はどうだぜ?」

ramen-tabero-futsu2.png
「 Viewbox は トリミング のようでもある。 Viewport は何だぜ?」

📖 TileBrush.Viewport Property

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

20210918wpf110.png

<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>

ramen-tabero-futsu2.png
「 👆 練習だぜ!」

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

        <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>

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

リピートさせない

20210918wpf111.png

<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>

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

ramen-tabero-futsu2.png
「 100 x 100 pixels 固定で 使いづら」

ohkina-hiyoko-futsu2.png
「 ブラシのくせに 色がハードコーディングされてていいの?」

ramen-tabero-futsu2.png
「 うーむ」

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

何度でもクリック!→

むずでょ@きふわらべ第29回世界コンピューター将棋選手権一次予選36位

光速のアカウント凍結されちゃったんで……。ゲームプログラムを独習中なんだぜ☆電王戦IIに出た棋士もコンピューターもみんな好きだぜ☆▲(パソコン将棋)WCSC29一次予選36位、SDT5予選42位▲(パソコン囲碁)AI竜星戦予選16位

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

むずでょ@きふわらべ第29回世界コンピューター将棋選手権一次予選36位 の最近の記事