【WPF】標準ボタンコントロールを丸くするxaml定義

WPFでボタンを丸くしたい場合、ControlTemplateを上書きして円を描くのが普通の対応なのかな？（多分…）と思いますが、その場合マウスオーバー時の背景色などの設定も記述する必要があり面倒です。

手っ取り早く標準のボタン動作をさせながら単に丸くしたい場合のxaml定義を紹介します。

標準ボタンの挙動の『まん丸ボタン』

動作

ボタンに直接記述する場合

xaml定義

<Button
    Width="50"
    Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"
    Content="まん丸">
    <Button.Resources>
        <Style TargetType="{x:Type Border}">
            <Setter Property="CornerRadius" Value="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" />
        </Style>
    </Button.Resources>
</Button>

解説

1. ボタンの高さを横幅に合わせる（まん丸にするため）

   Height="{Binding ActualWidth, RelativeSource={RelativeSource Self}}"​

   高さにボタンの横幅を設定することで真四角のボタンを作ります。高さを幅に設定するのでもOKです。

2. ボタンの境界線を丸くする

       <Button.Resources>
           <Style TargetType="{x:Type Border}">
               <Setter Property="CornerRadius" Value="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" />
           </Style>
       </Button.Resources>​

   ボタンに含まれるBorderのCornerRadiusプロパティに、ボタン自体の幅をそのまま設定することで丸くします。
   ※ActualWidthの半分の値でも丸くなるんですが、多い分には問題ないのでそのまま設定します。（正しく半分の値を設定するならConverterを作る必要があり面倒）

以上で『丸い標準ボタン』が出来上がります。

Styleとして定義する場合

xaml定義

<StackPanel Grid.Row="1" Width="300">
    <StackPanel.Resources>
        <!--  標準ボタンを丸くするだけのStyle  -->
        <Style x:Key="CircleButtonStyle" TargetType="Button">
            <Setter Property="Height" Value="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" />
            <Style.Resources>
                <Style TargetType="{x:Type Border}">
                    <Setter Property="CornerRadius" Value="{Binding ActualWidth, RelativeSource={RelativeSource Self}}" />
                </Style>
            </Style.Resources>
        </Style>
    </StackPanel.Resources>

    <!--  まん丸ボタン Style版  -->
    <Button Width="50" Content="まん丸S" Style="{DynamicResource CircleButtonStyle}" />
</StackPanel>

解説

やってることは同じです。Button.ResourcesじゃなくてStyle.Resourcesになってるくらいです。

まとめ

手っ取り早く標準ボタンを丸くするxaml定義について解説しました。

通常はControlTemplateを継承したボタンを作成するのかな？とも思いますので、とりあえず丸くしたいだけの場合に参考にしてください。

 

なお、今回紹介したTargetType:Borderを指定して丸くする方法ではボタン配下に含まれる全Borderに影響するため、ControlTemplateで自前のデザインを作成している場合は注意が必要です。(プロパティを作って一番外側のBorderにのみCornerRadiusを設定できるようにしてあげるとかする必要があると思います。素直にEllipseでも置けばよいかもですが角丸ができなくなるので。）

勉強中の身ですので、誤りや不備等ありましたらご指摘いただけますと幸いです。