PG日誌

受託系 PG が C# の事を書いています

WPFのボタンの角を丸くする

前回の「WPFのボタンをフラットデザインに変更する」で表示したボタンは角が四角かったのですが、今回は丸く表示してみようと思います。

といっても大した事はなくて、前回のコードのContentTemplateの子要素のBorderにCornerRadiusを追加するだけです。

見た目はこんな感じになります。左側が通常、右側がマウスオーバーしたときの表示になります。ちょいわかりにくいですが角が丸くなっていると思います。

f:id:Takachan:20171220004211p:plain

<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をつければだいたい丸くできると思います。