2016/10/14

    C#のWPFでDropDownMenuButtonを作る

    ボタンを押すとドロップダウンメニューが表示されるようなやつを作る。

     

    ↓こんなやつ。

    ほとんどの仕組みはToggleButtonコントロールが持っている。

    XAML

            <ToggleButton Loaded="ToggleButton_Loaded">
            <ToggleButton.ContextMenu>
                <ContextMenu>
                    <MenuItem Header="Save" />
                    <MenuItem Header="Print" />
                    <Separator />
                    <MenuItem Header="Exit" />
                </ContextMenu>
            </ToggleButton.ContextMenu>
            <WrapPanel Margin="5,0">
                <TextBlock Text="MENU"/>
                <Border Width="8"/>
                <Path Width="6" Height="4" Stretch="Fill" Fill="Black" Data="F1 M0,0 L10,0 L5,10 Z "/>
            </WrapPanel>
        </ToggleButton>

    Loadedにイベントハンドラを追加　(1行目)

    ボタンのChecked状態と連動してメニューを出す為にコードを追加。

    詳細は後述。

     

     

    メニューを作成　(3～8行目)

    ToggleButtonがContextMenuを持っているので、そこへMenuItemやSeparatorを追加してメニューを作る

     

     

     

    ボタンに▼を表示する　(13行目)

    ボタン内の文字の右隣に三角形を表示させてそれっぽく見せている。

    Pathをつかって三角形を描画。

     

     

     

     

     

    コード

            private void ToggleButton_Loaded(object sender, RoutedEventArgs e)
        {
            var btn = (ToggleButton)sender;

            btn.SetBinding(ToggleButton.IsCheckedProperty, new Binding("IsOpen") { Source = btn.ContextMenu });
            btn.ContextMenu.PlacementTarget = btn;
            btn.ContextMenu.Placement = PlacementMode.Bottom;
        }

     IsCheckedとIsOpenを連動させる　(5行目)

    ToggleButtonのIsCheckedプロパティにContextMenuのIsOpenをバインドさせる。

    これにより、ボタンをCheckするとメニューがOpen連動して動作するようになる。

     

     

    メニューの表示位置をセットする　(6～7行目)

    何もしないとマウスカーソルの位置にメニューが出てしまう。

    ToggleButtonの下にメニューが表示されるように以下をセット。

    　PlacementTarget　・・・　配置ターゲットのコントロール　　→ToggleButtonをセット

    　Placement         　・・・　ターゲットのどっち側へ配置するか→Bottomをセット

     

      

    カテゴリ： C#, C#WPF