VB のたまご

作成日: 2017/03/06, 更新日: 2017/03/06



ToolBar

    イメージ
  •  ToolBar は、メニューの下に配置されるショートカットバーの事で、通常は関連性のある画像を割り当てたアイコンを表示します。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「ToolBarWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


  •  プロジェクト内に「images」フォルダを追加して、その中に適当な画像を追加します。この時、ビルドアクションは「Resource」に設定します。 というか別に画像は不要で構いません。

  • <Window x:Class="ToolBarWindow1"
            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:w04_NormalControls"
            mc:Ignorable="d"
            Title="ToolBarWindow1" Height="300" Width="300">
        
        <DockPanel>
    
            <ToolBarTray DockPanel.Dock="Top">
    
                <ToolBar>
                    <Button Content="button1" />
                    <Button Content="button2" />
                    <Separator />
                    <Button>
                        <Image Source="./images/smile.png" Width="16" Height="16" />
                    </Button>
                    <Separator />
                    <Button Content="button3" />
                </ToolBar>
                
            </ToolBarTray>
    
            <Button Content="button1" Margin="10" />
    
        </DockPanel>
        
    </Window>
    

  •  ToolBar は、ToolBar を配置するための ToolBarTray 内に配置します。 ToolBarTray の中には複数の ToolBar を配置することが可能です。以下はそのサンプルです。

  • <Window x:Class="ToolBarWindow2"
            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:w04_NormalControls"
            mc:Ignorable="d"
            Title="ToolBarWindow2" Height="300" Width="300">
    
        <DockPanel>
    
            <ToolBarTray DockPanel.Dock="Top">
    
                <ToolBar>
                    <Button Content="button1" />
                    <Button Content="button2" />
                    <Separator />
                    <Button>
                        <Image Source="./images/smile.png" Width="16" Height="16" />
                    </Button>
                    <Separator />
                    <Button Content="button3" />
                </ToolBar>
    
                <ToolBar>
                    <Button Content="button4" />
                    <Button Content="button5" />
                    <Separator />
                    <Button>
                        <Image Source="./images/smile.png" Width="16" Height="16" />
                    </Button>
                    <Separator />
                    <Button Content="button6" />
                </ToolBar>
    
            </ToolBarTray>
    
            <Button Content="button1" Margin="10" />
    
        </DockPanel>
    
    </Window>
    

  •  このサンプルでは、ToolBarTray の中に2つの ToolBar が配置されていて、ToolBarTray の中だけですが、このバーは場所移動することができます。 実行後、「:」のような場所をドラッグして移動させてみてください。移動できることが分かると思います。

  • スポンサーリンク


  •  この ToolBar の位置はデザイン時に指定することができます。以下のサンプルです。

  • <Window x:Class="ToolBarWindow3"
            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:w04_NormalControls"
            mc:Ignorable="d"
            Title="ToolBarWindow3" Height="300" Width="525">
    
        <DockPanel>
    
            <ToolBarTray DockPanel.Dock="Top">
    
                <ToolBar Band="0" BandIndex="0">
                    <Button Content="button1" />
                </ToolBar>
    
                <ToolBar Band="0" BandIndex="1">
                    <Button Content="button2" />
                </ToolBar>
    
                <ToolBar Band="1" BandIndex="0">
                    <Button Content="button3" />
                </ToolBar>
    
                <ToolBar Band="1" BandIndex="1">
                    <Button Content="button4" />
                </ToolBar>
    
                <ToolBar Band="1" BandIndex="2">
                    <Button Content="button5" />
                </ToolBar>
    
            </ToolBarTray>
    
            <Button Content="button1" Margin="10" />
    
        </DockPanel>
    
    </Window>
    

  •  ツールバーもメニュー等と同じく、内部に配置したコントロールは、専用コントロールではなく通常コントロールとして扱えます。 例えば、ツールバー内に配置したボタンの扱いは、通常のボタンの扱いと同様です。

  • <Window x:Class="ToolBarWindow4"
            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:w04_NormalControls"
            mc:Ignorable="d"
            Title="ToolBarWindow4" Height="300" Width="300">
    
        <DockPanel>
    
            <ToolBarTray DockPanel.Dock="Top">
    
                <ToolBar Band="0" BandIndex="0">
                    <Button Content="button1" Click="Click" />
                </ToolBar>
    
            </ToolBarTray>
    
            <Button Content="button1" Margin="10" />
    
        </DockPanel>
    
    </Window>
    

    Public Class ToolBarWindow4
    
        Private Sub Click(sender As Object, e As RoutedEventArgs)
    
            MessageBox.Show("Hello, WPF!")
    
        End Sub
    
    End Class