WPF で ボタン に 画像 を 使用する 方法

WPF で Button 要素に画像を利用するにはどうしたら良いかについて調べたのでまとめました。 いろいろなサンプルコードを参照しながら検証したのですが…マウスオーバーやマウスプレスを利用する場合に Style と Trigger を利用した xaml の記載が必要になります。 単純に画像だけでよければ Image を利用するだけで事足ります。

画像を使うので リソース でもいくつか問題が発生しましたが… WPF の リソース に関しては 別記事 にします。。

目次

• 基本の画像ボタン
• 画像と文字列を含むボタン
• マウスオーバーで画像変更するボタン

サンプルコード

• GitHub / samplecode_ResidentApplication
• ダウンロード

基本の画像ボタン

ボタン背景として文字列ではなく画像を利用するような入力要素を作成します。 マウスオーバーやマウスプレスといったイベントには対応せず、単純に背景とする例です。

Button の直下に Image を記述することで画像ボタンが作成できます。 Button.Background に ImageBrush を利用するとパッと見はできているように見えるのですが…マウスオーバーすると画像がなくなってしまい、思うような動作となってくれません。 以下のサンプルコードに記載の通り、Button の直下に Image を記述する方法が単純にやりたいことが実現できます。

Mainwindow.xaml

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <ResourceDictionary>
      <BitmapImage x:Key="ImageSource1" UriSource="./Resources/user.png" />
    </ResourceDictionary>
  </Window.Resources>
  <Grid>
    <Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="30" Height="30" >
      <Image Source="{StaticResource ImageSource1}" />
    </Button>
  </Grid>
</Window>

画像と文字列を含むボタン

文字と画像を含むボタンの例です。

Button の直下に要素を追加する点は前述の画像ボタンと類似しています。 ここで追加する要素は StackPanel を利用しています。

Mainwindow.xaml

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <ResourceDictionary>
      <BitmapImage x:Key="ImageSource1" UriSource="./Resources/user.png" />
    </ResourceDictionary>
  </Window.Resources>
  <Grid>
    <Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" Height="40" Grid.Column="1">
      <StackPanel Orientation="Horizontal" Margin="4,2">
        <Image Source="{StaticResource ImageSource1}" VerticalAlignment="Center" />
        <Label Content="ユーザー" VerticalAlignment="Center" Margin="10,0,0,0"/>
      </StackPanel>
    </Button>
  </Grid>
</Window>

マウスオーバーで画像変更するボタン

マウスオーバー、マウスプレスで画像や見た目を変更する例です。

マウスオーバー、マウスプレスを利用する場合、ControlTemplate を利用します。 Trigger の IsMouseOver にて マウスオーバー 時 に画像を差し替えるようにします。 Trigger の IsPressed にて マウスプレス 時 の見た目を記述します。 少し構造が入り組んでいるため各要素に Name を指定しておき、 Trigger の Setter において要素を特定して変更を加えます。

Mainwindow.xaml

<Window x:Class="WpfApplication.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <ResourceDictionary>
      <BitmapImage x:Key="ImageSource10" UriSource="./Resources/user.png" />
      <BitmapImage x:Key="ImageSource20" UriSource="./Resources/users.png" />
    </ResourceDictionary>
  </Window.Resources>
  <Grid>
    <Button HorizontalAlignment="Center" VerticalAlignment="Center" Width="75" Height="75" Grid.Column="1">
      <Button.Style>
        <Style TargetType="Button">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="Button">
                <Border Name="border" BorderThickness="1" BorderBrush="#707070">
                  <StackPanel Name="panel" Orientation="Horizontal" Background="#DDDDDD">
                    <Image Name="image" Source="{StaticResource ImageSource10}" />
                  </StackPanel>
                </Border>
                <ControlTemplate.Triggers>
                  <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="border" Property="BorderBrush" Value="#3C7FB1" />
                    <Setter TargetName="image" Property="Source" Value="{StaticResource ImageSource20}" />
                    <Setter TargetName="panel" Property="Background" Value="#BEE6FD" />
                  </Trigger>
                  <Trigger Property="IsPressed" Value="true">
                    <Setter TargetName="border" Property="BorderBrush" Value="#2A597D" />
                    <Setter TargetName="image" Property="Opacity" Value="0.8" />
                    <Setter TargetName="panel" Property="Background" Value="#738B99" />
                  </Trigger>
                </ControlTemplate.Triggers>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </Button.Style>
    </Button>
  </Grid>
</Window>

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね！」または 「Twitter の フォロー」 お願いします！！

• Facebook ページ
• twitter