[WPF] Grid.Clipで表示領域を制限する(好きな形に切り抜く)

もくじ

やりたいこと

以前、WinFormsで「画像の一部を切り抜いて表示させる」ということをしたときにえらい苦労した記憶だけがある(やり方は覚えてない)が、そういうことがWPFでは簡単にできるというのを人に教えてもらったので、試してみたい。

やり方

<Grid.Clip>と〇〇Geometryを使う。

サンプル(楕円で切り抜き)

赤に塗ったGridを、楕円の形に切り抜いて表示する。

MainWindow.xaml

<Window x:Class="WpfApp2.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:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <!-- Grid全体を赤に塗る -->
        <Grid.Clip>
            <GeometryGroup FillRule="EvenOdd">
                <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
            </GeometryGroup>
        </Grid.Clip>

        <!-- Grid全体を赤に塗る -->
        <Grid Background="Red"/>
    </Grid>
</Window>

サンプル(複合図形で切り抜き)

3つの図形(三角形、縦長の楕円、横長の楕円)の複合図形で切り抜き。

MainWindow.xaml

<Window x:Class="WpfApp2.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:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <!-- 切り抜く形を指定 -->
        <Grid.Clip>
            <GeometryGroup FillRule="Nonzero">
                <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="20" />
                <EllipseGeometry Center="50,50" RadiusX="20" RadiusY="45" />
                <PathGeometry >
                    <PathGeometry.Figures>
                        <PathFigureCollection>
                            <PathFigure IsClosed="True" StartPoint="0,0">
                                <PathFigure.Segments>
                                    <PathSegmentCollection>
                                        <LineSegment Point="0,0" />
                                        <LineSegment Point="100,0" />
                                        <LineSegment Point="50,100" />
                                    </PathSegmentCollection>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathFigureCollection>
                    </PathGeometry.Figures>
                </PathGeometry>
            </GeometryGroup>
        </Grid.Clip>

        <!-- Grid全体を赤に塗る -->
        <Grid Background="Red"/>
    </Grid>
</Window>

上のサンプルでは、GeometryGroupのFillRuleをNonZeroにしているので、図形が重なった部分全部を使って切り抜く形になる。

これを

a.xaml

<GeometryGroup FillRule="EvenOdd">

にすると、図形が奇数回重なったところだけ切り抜く(表示する)という形になる。

その他

今回、<GeometryGroup>を使って複数の図形を重ねるということをしたが、それ以外にも<CombinedGeometry>というのを使っても似たことができるらしい。

いずれ試したい。

参考

<GeometryGroup>には、Geometryから派生するいろいろなGeometryを、入れれそう。
今回は変な形をサンプルにしたが、基本のRectangleGeometryとかは、いろいろなケースで使えそうな気がする。