Xaml – 角丸にする（C# WPF）

検索するときに単語で悩みますよね。角丸、コーナー、Rounded Corner、Radius等々。

角丸にする方法として2つあります。

• 個別にCornerRadiusを設定する。
• OpacityMaskで覆う。

個別にCornerRadiusを設定する

Borderのプロパティに直接触れる場合はこれでOKです。

<Border CornerRadius="10">
<Border CornerRadius="10,0,0,30">

4つに分けて書く場合は、左上、右上、右下、左下です。
左上から時計回りの順です。

実際の実装ではBorderが内部に隠れているケースも多く、簡単には設定できません。
具体的にはButtonなどは、ButtonのプロパティにCornerRadiusはなく、Button内部のBorderがCornerRadiusを持っています。

なので実際にはTemplateを触らなくてはならず、意外に面倒です。

<Style TargetType="Button">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="10" Background="Blue">
                    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

もっと面倒なのはDataGridなどの複雑なControlです。
DataGridのCornerRadiusを設定し、ColumnHeaderのCornerRadiusを設定し、と触る箇所が増えます。
簡単に実装するなら次の方法が楽だと思います。

OpacityMaskで覆う

<Border Name="RoundedDataGrid" CornerRadius="20,30,40,50" BorderThickness="0" Background="Red"/>
<DataGrid>
    <DataGrid.OpacityMask>
        <VisualBrush Visual="{Binding ElementName=RoundedDataGrid}"/>
    </DataGrid.OpacityMask>
</DataGrid>

左側がBorderのみの画像です。

Borderをターゲットのパーツと同じサイズになるように配置し、CornerRadiusを設定します。
これをそのままターゲットのOpacityMaskに指定してあげるだけ。

これだとターゲットの方には一切CornerRadiusを設定する必要がありません。
ただし、注意点としてはOpacityMaskで非表示になる部分は見切れてしまいます。
上記の例だと左上の”Name”と書かれたカラムヘッダーは一部見切れています。四隅はMaskで隠れないようにMarginを付けたり等の工夫は必要です。