WPFでよさげなボタンを作る

よさげなボタンを作る

必要なもの

• FontAwesome.WPF

手順

• NuGetでいれる
  • Install-Package FontAwesome.WPF
  • ※オリジナルのプロジェクトはWeb系。これはそのWPF移植版
• xmlのnamespaceを定義する
  • windowタグを以下のように編集

<!-- xmlns:faを追加 -->
<Window x:Class="Hoge.Fuga"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:fa="http://schemas.fontawesome.io/icons/"
    Title="HogeWindow" Height="480" Width="640">

• 角丸ボタンを作る
  • 構成は以下
    • Border > Button > fa:ImageAwesome
    • Buttonを角丸にしたい場合、外側に角丸のBorderを置いて実現させる
    • 角丸の指定はBorder要素のCornerRadius属性で。
    • 小さめのボタンになるので2pxくらいでよい。

    <!-- リソース定義 -->
    <Application.Resources>
        <Style TargetType="Border" x:Key="FAButtonBorder">
            <Setter Property="Width"  Value="24"></Setter>
            <Setter Property="Height" Value="24"></Setter>
            <Setter Property="CornerRadius" Value="2"></Setter>
            <Setter Property="BorderBrush" Value="#999"></Setter>
            <Setter Property="BorderThickness" Value="1"></Setter>
            <Setter Property="Padding" Value="0"></Setter>
            <Setter Property="Margin" Value="5"></Setter>
        </Style>
        <Style TargetType="Button" x:Key="FAButton">
            <Setter Property="Background"  Value="#FFF"></Setter>
            <Setter Property="Padding" Value="3"></Setter>
        </Style>
    </Application.Resources>

    <!-- Button宣言 -->
    <Border Style="{StaticResource FAButtonBorder}">
        <Button Click="BtnTweetClick" Style="{StaticResource FAButton}">
            <fa:ImageAwesome Icon="Send"/>
        </Button>
    </Border>

素人が20分くらいで作ったにしてはいい感じになったので記念メモ