C#WPFの道#26！ToolBarの書き方と使い方をわかりやすく解説！

ToolBarとは？

ToolBarとは，画面の上部などにアイコンをならべて，「コピー」とか「保存」とかを行うことのできるボタンの集まりです。ExcelとかWordとか，その他いろんなアプリについいてますよね。今回は，ツールバーの作り方を解説します。

画像の準備

事前に画像の準備をしてください。画像は何でも構いません。ネットなどで「アイコン　フリー画像」などで検索すれば，無料で使える画像がいくらでもあります。

まずWPFのプロジェクトを作って，その下にフォルダーを作ります。今回は「Images」という名前にしておきます。その中にツールバーで使う画像を入れておきましょう。

ツールバーの書き方

ツールバーはToolBarのエリアの中にButtonを置いて，ボタンにイメージを設定します。Image Sourceには，先ほど準備したファイルのパスを指定します。

<ToolBar Height="45"
         VerticalAlignment="Top">
    <Button>
        <Image Source="Images\file.png"/>
    </Button>
</ToolBar>

クリックイベント

クリックイベントは，Buttonのクリックイベントを実装しておきます。

<ToolBar Height="45"
         VerticalAlignment="Top">
    <Button Click="Button_Click">
        <Image Source="Images\graph.jpg"/>
    </Button>
</ToolBar>

Separator

ツールボタンをグループ単位で仕切りたい場合はSeparatorで区切ることができます。これを入れると，縦の線を引っ張ることができます。

<Button>
    <Image Source="Images\file.png"/>
</Button>
<Separator/>
<Button Click="Button_Click">
    <Image Source="Images\graph.jpg"/>
</Button>

サンプルソース全体

<Window x:Class="WPF026.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF026"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="300">
    <Grid>
        <ToolBar Height="45"
                 VerticalAlignment="Top">
            <Button>
                <Image Source="Images\file.png"/>
            </Button>
            <Separator/>
            <Button Click="Button_Click">
                <Image Source="Images\graph.jpg"/>
            </Button>
        </ToolBar>
    </Grid>
</Window>

WPFの道！