[WPF][Button] Contentプロパティを使用して Buttonに画像を表示する

Button

2023.05.19

概要
構文
使用例

概要

WPF（Windows Presentation Foundation）のButtonコントロールは、標準で文字列を表示する機能がありますが、Contentプロパティを使用することで、ボタンに画像を表示することもできます。この記事では、ButtonコントロールのContentプロパティを使用して、画像を表示する方法を解説します。

公式サイト情報はコチラを参照してください。

構文

以下は、ButtonコントロールのContentプロパティを使用して、画像とテキストを表示するXAMLの例です。

<Button>
  <StackPanel Orientation="Horizontal">
    <Image Source="/image.png" Width="50" Height="50"/>
    <TextBlock Text="画像付きボタン"/>
  </StackPanel>
</Button>

Contentプロパティを使用して、StackPanel要素内にImageとTextBlock要素を配置しています。Image要素のSource属性には、表示する画像のファイルパスを指定し、WidthとHeight属性でサイズを設定しています。

使用例

以下は、ButtonコントロールのContentプロパティを使用して、画像を表示するコードビハインドの例です。

Button button = new Button();
StackPanel stackPanel = new StackPanel();
TextBlock textBlock = new TextBlock();

stackPanel.Orientation = Orientation.Horizontal;

Image image = new Image();
image.Source = new BitmapImage(new Uri("/image.png", UriKind.Relative));
image.Width = 50;
image.Height = 50;

textBlock.Text = "画像付きボタン";

stackPanel.Children.Add(image);
stackPanel.Children.Add(textBlock);

button.Content = stackPanel;

上記の例では、ButtonとStackPanelを作成し、StackPanel内にImageとTextBlock要素を配置しています。Image要素のSourceプロパティには、PNGイメージを作成し、ファイルパスを指定しています。最後に、ButtonのContentプロパティにStackPanelを設定しています。これにより、画像とテキストを持つボタンが作成されます。