前回の「WPFのボタンをフラットデザインに変更する」で表示したボタンは角が四角かったのですが、今回は丸く表示してみようと思います。
といっても大した事はなくて、前回のコードのContentTemplateの子要素のBorderにCornerRadiusを追加するだけです。
見た目はこんな感じになります。左側が通常、右側がマウスオーバーしたときの表示になります。ちょいわかりにくいですが角が丸くなっていると思います。
<Application.Resources> <!-- スタイルだけ抜粋 --> <Style x:Key="FlatButton" TargetType="Button" BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"> <!-- デフォルトのテーマを無効化 --> <Setter Property="OverridesDefaultStyle" Value="True" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border CornerRadius="3" Background="{TemplateBinding Background}"> ★ここにCornerRadiusを追加 <ContentPresenter /> </Border> </ControlTemplate> </Setter.Value> </Setter> <!-- マウスオーバーした時に色を変える --> <Style.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Background" Value="#CDD2D4"/> </Trigger> </Style.Triggers> </Style> </Application.Resources>
WPFで角を丸くしたいときは基本、Borderを親にしてRadiusをつければだいたい丸くできると思います。