読者です 読者をやめる 読者になる 読者になる

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

よさげなボタンを作る

f:id:hkdnet:20150520003828p:plain

必要なもの

  • 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分くらいで作ったにしてはいい感じになったので記念メモ