[WPF][ToolBar] ツールバーにアイコンを表示する

ToolBar

2024.04.02

概要
構文
1. XAMLの構文
2. コードビハインドの構文
使用例
1. XAMLの例
2. コードビハインドの例
アイコンが表示されない場合
まとめ

概要

この記事では、WPFのToolbarコントロールに配置したボタンにアイコンを表示する方法について説明します。

構文

XAMLの構文

<ToolBar>
  <Button>
    <Image Source="icon.png" /> 
  </Button> 
</ToolBar>

コードビハインドの構文

Button button = new Button(); 
button.Content = new Image { 
  Source = new BitmapImage(new Uri("icon.png", UriKind.RelativeOrAbsolute)) 
}; 
toolbar.Items.Add(button);

上記の構文では、Toolbarコントロール内に配置したButtonコントロールにアイコンを表示するために、Imageコントロールを使用しています。

使用例

XAMLの例

<ToolBar x:Name="toolbar" VerticalAlignment="Top">
  <Button>
    <Image Source="/save.png" Height="16" Width="16"/>
  </Button>
  <Button>
    <Image Source="/open.png" Height="16" Width="16" />
  </Button>
</ToolBar>

コードビハインドの例

Button saveButton = new Button();
saveButton.Content = new Image
{
    Source = new BitmapImage(new Uri("/save.png", UriKind.RelativeOrAbsolute))
};
saveButton.Height = 16;
saveButton.Width = 16;
toolbar.Items.Add(saveButton); Button openButton = new Button();
openButton.Content = new Image
{
    Source = new BitmapImage(new Uri("/open.png", UriKind.RelativeOrAbsolute))
};
openButton.Height = 16;
openButton.Width = 16;
toolbar.Items.Add(openButton);

上記の例では、Toolbarコントロール内に保存ボタンと開くボタンを配置し、それぞれのボタンにアイコンを表示しています。