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>