C#WPFで角丸ボタンをxamlだけで作る方法【コピペでOK】

最終更新日: 20240307

はじめに

前に調べたら、xamlだけで完結する方法なかった気がするので本記事に残しときます
MaterialDesignThemesを使う方法もあるけど面倒な上に小回り利かなかったので個人的には微妙かな

目標

スマホやWebアプリに良くある角丸ボタンをWPFでも実装できるようになる

ソースコード

コピペでoK
長いけど特に解説することはないかな
改変したいときはFontSizeとかのプロパティ名を見てもらえば特に難しいところはないかなーと

  <Button x:Name="foo"  Content="hoge"
            FontSize="15"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="150"
            Height="35">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Background" Value="#1877f2" />
                        <Setter Property="Foreground" Value="#EEEEEE" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Border x:Name="border" CornerRadius="15" Background="{TemplateBinding Background}">
                                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="border" Property="Background" Value="#13529c" />
                                            <!-- マウスオーバー時の背景色を変更 -->
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Button.Style>
            </Button>

おわりに

C#WPFで作ったアプリって殺風景になりがちですけど
こういうボタン1個置いとけば印象変わりますよねー

WebやスマホアプリのUiに慣れている人が過半数だと思うので
PCアプリを作るとなってもPCアプリだけ参考にしてたんじゃダメだなーとは個人的に思ってます

vscodeとかの開発環境・エディタをカジュアルよりのデザインにしても違和感あると思うので作るアプリによりけりですが