ぼやきごと/2015-09-27/WPF・XAML: Menu 直下の MenuItem を右寄せ表示する の変更点


#blog2navi()
*WPF・XAML: Menu 直下の MenuItem を右寄せ表示する [#o5a7bd31]

WPFの @code{Menu}; クラスは @code{ItemsControl}; クラスから派生しているため、下記サイトの内容が一通り使えます。

-[[ItemsControl 攻略 〜 外観のカスタマイズ - grabacr.nét>http://grabacr.net/archives/1240]]

@code{Menu}; はデフォルトでは @code{WrapPanel}; を用いてレイアウトされていますが、これを @code{DockPanel}; に置き換えることで特定のメニュー項目を右寄せ表示することができます。

#code(pre){{
<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfMenuSample"
    x:Class="WpfMenuSample.MainWindow"
    Title="WpfMenuSample"
    Width="400"
    Height="120">
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <Menu.ItemsPanel>
                <ItemsPanelTemplate>
                    <DockPanel />
                </ItemsPanelTemplate>
            </Menu.ItemsPanel>

            <MenuItem Header="ファイル(_F)" TabIndex="0" DockPanel.Dock="Left">
                <!-- 内容略 -->
            </MenuItem>
            <MenuItem Header="編集(_E)" TabIndex="1" DockPanel.Dock="Left">
                <!-- 内容略 -->
            </MenuItem>
            <MenuItem Header="情報(_I)" TabIndex="3" DockPanel.Dock="Right">
                <!-- 内容略 -->
            </MenuItem>
            <MenuItem Header="ヘルプ(_H)" TabIndex="2" HorizontalAlignment="Right">
                <!-- 内容略 -->
            </MenuItem>
        </Menu>
        <TextBlock Text="メニュー表示テスト" Margin="8" />
    </DockPanel>
</Window>
}}

#ref(右寄せメニュー表示.png,left,nolink,右寄せメニュー表示);

注意点は下記の通りです。いずれも @code{Menu}; というよりは @code{DockPanel}; の注意点ですが。

-最後の要素(上述の例だと「ヘルプ」)は横幅がめいっぱい取られるため、 @code{HorizontalAlignment}; プロパティ値を設定する必要がある。
-右寄せしたい項目が複数ある場合、そのままだとタブオーダーがおかしくなるため、 @code{TabIndex}; プロパティ値を明示的に設定する必要がある。
--右寄せしたい項目が1つだけなら不要。
-ウィンドウの横幅を小さくしすぎると最後の要素が隠れてしまう。
--ウィンドウの @code{MinWidth}; プロパティ値を設定する等で回避すべし。

RIGHT:Category: &#x5b;[[WPF・XAML>ぼやきごと/カテゴリ/WPF・XAML]]&#x5d;&#x5b;[[プログラミング>ぼやきごと/カテゴリ/プログラミング]]&#x5d; - 2015-09-27 12:13:20
----
RIGHT:&blog2trackback();
#comment(above)
#blog2navi()