かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

WPF4.5入門 その29 「ContextMenuコントロール」

いや長いですね。その28書いてから1年と1月たってました。でもWPFのバージョンは変わらない!!

ContextMenuコントロール

ContextMenuコントロールは、特定のコントロールに対して固有のメニュー(主に右クリックしたときに表示されるメニュー)を提供するためのコントロールです。ContextMenuコントロールの見た目を以下に示します。

f:id:okazuki:20140811215337p:plain

ContextMenuの基本的な使い方

ContextMenuコントロールは、コントロールの基本クラスであるFrameworkElementクラスで定義されているContextMenuプロパティに設定して利用します。ContextMenuコントロールのItemsプロパティにMenuItemを設定して、メニューの項目を定義します。MenuItemコントロールは、メニューの1項目を表すコントロールで、Headerプロパティに設定した項目を表示します。上記の使用例のようなメニューを定義するXAMLは以下のようになります。

<Border …省略…>
    <Border.ContextMenu>
        <ContextMenu>
            <MenuItem Header="メニュー1"/>
            <MenuItem Header="メニュー2"/>
            <MenuItem Header="メニュー3"/>
            <MenuItem Header="メニュー4"/>
        </ContextMenu>
    </Border.ContextMenu>
</Border>

MenuItemコントロールは、Buttonコントロールと同じようにClickイベントがあります。Clickイベントにイベントハンドラを設定することで、MenuItemが押されたときの処理を記述できます。 メニュー1をクリックしたときに、Hello worldというメッセージを表示するには以下のように記述します。

<Border …省略…>
    <Border.ContextMenu>
        <ContextMenu>
            <MenuItem Header="メニュー1" Click="MenuItem_Click"/>
            <MenuItem Header="メニュー2"/>
            <MenuItem Header="メニュー3"/>
            <MenuItem Header="メニュー4"/>
        </ContextMenu>
    </Border.ContextMenu>
</Border>

コードビハインドには、以下のようなメソッドを定義します。

private void MenuItem_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello world");
}

メニューの表示非表示の制御

ContextMenuコントロールは、基本的にマウスの右クリックで表示されますが、IsOpenプロパティを使用することで、プログラムから表示非表示を制御したり、現在表示中かどうか判断することが出来ます。

プロパティ 説明
public bool IsOpen { get; set; } ContextMenuコントロールが表示されているかどうかを取得または設定します。trueのときに表示、falseのときは非表示を表します。

メニューの階層表示

階層構造を持ったメニューを定義するには、以下のようにMenuItemを入れ子に定義します。このように定義することでMenuItemのItemsプロパティにMenuItemが設定されて、階層構造を持ったメニューを定義できます。

<ContextMenu>
    <MenuItem Header="メニュー1" Click="MenuItem_Click"/>
    <MenuItem Header="メニュー2">
        <MenuItem Header="メニュー 2-1" />
        <MenuItem Header="メニュー 2-2" />
        <MenuItem Header="メニュー 2-3" />
    </MenuItem>
    <MenuItem Header="メニュー3"/>
    <MenuItem Header="メニュー4"/>
</ContextMenu>

実行すると、以下のようにメニュー2に子のメニューが出来ます。

f:id:okazuki:20140811215933p:plain

過去記事