アプリケーションメニューのコントロール : Windows リボンフレームワーク
この資料では前の資料 アプリケーションメニューの仕組み に引き続き、Windows リボンフレームワークのアプリケーションコントロールについて説明します。 この資料では、アプリケーションメニューで使えるコントロールについて記載します。
アプリケーションメニューのコントロール
ここでは典型的なアプリケーションメニューに不可欠な、 ボタン (Button)、ドロップダウンボタン (Drop-Down Button)、スプリットボタン (Split Button) について、 その書き方を説明します。
土台となるスケルトンプログラムについては、 Windows リボンフレームワークの概要とスケルトンプログラムの作成 をみてください。
ボタン
はじめに、ボタン(Button) の作り方を示します。 下のスクリーンショットの "New" とか "Exit" と書かれたメニュー項目が、ボタンで出来ています。 ユーザーはこれをクリックすることが出来ます。
ボタンを示す XAML マークアップ・コードは次のようになります。
<?xml version='1.0' encoding='utf-8'?>
<Application xmlns="http://schemas.microsoft.com/windows/2009/Ribbon">
<Application.Commands>
<Command Name="cmdNew" LabelTitle="New">
<Command.LargeImages>
<Image Source="res/new.bmp"/>
</Command.LargeImages>
</Command>
<Command Name="cmdExit" LabelTitle="Exit">
<Command.LargeImages>
<Image Source="res/exit.bmp"/>
</Command.LargeImages>
</Command>
<Command Name="cmdMRUList" LabelTitle="Recent Documents"/>
</Application.Commands>
<Application.Views>
<Ribbon>
<Ribbon.ApplicationMenu>
<ApplicationMenu>
<ApplicationMenu.RecentItems>
<RecentItems CommandName="cmdMRUList" MaxCount="10" />
</ApplicationMenu.RecentItems>
<MenuGroup Class="MajorItems">
<Button CommandName="cmdNew"/>
<Button CommandName="cmdExit"/>
</MenuGroup>
</ApplicationMenu>
</Ribbon.ApplicationMenu>
</Ribbon>
</Application.Views>
</Application>
ボタンとボタンの間にセパレータを入れる場合は、MenuGroup を分けます。
... <Ribbon.ApplicationMenu> <ApplicationMenu> <ApplicationMenu.RecentItems> <RecentItems CommandName="cmdMRUList" MaxCount="10" /> </ApplicationMenu.RecentItems> <MenuGroup Class="MajorItems"> <Button CommandName="cmdNew"/> </MenuGroup> <MenuGroup Class="MajorItems"> <Button CommandName="cmdExit"/> </MenuGroup> </ApplicationMenu> </Ribbon.ApplicationMenu> ...
ドロップダウンボタンとスプリットボタン
ドロップダウンボタンは次のようなメニュー項目です。
Web のカスケードメニューのように、第一階層のメニュー項目 (上記の例では "Draw") の下に、メニュー項目が展開されます (この例では "Draw" の下に "Circle", "Rectangle", "Cross" がぶら下がっています)。 ドロップダウンボタンは、単純でわかりやすいですね。
似たようなメニュー項目に、スプリットボタン というものもあります。これは次のようなメニューです。
スプリットボタンでは、展開したときに子供の階層にあるメニュー項目の中の、デフォルトボタン (プライマリーボタンといいます) が親の階層に表示されています。
Windows 7 付属の「ペイント」を例にとってみるとわかりやすいと思います。アプリケーションメニューのなかに、 印刷 (Print) というメニュー項目があります。Print をクリックすれば、そのまま印刷 (Print) コマンドが実行されます。 しかし、プリントボタンの右端側をクリックすると、さらに Print のオプションが表示されます。
オプションの中には、印刷 (Print) の他、ページ設定 (Page setup) やプレビュー (Print preview) などがあります。 印刷に関連するコマンドなので、これらがまとめて表示されるべきですが、この中でも印刷は最もメインのコマンドであるために、 オプションとして展開するまでも無く、親階層にボタンが表示されている、というわけです。
尚、ペイントのオプションの先頭にヘッダが表示されていることがわかりますが、 メニューグループの見出し は次のように表示します。
メニューグループの見出し
メニューグループの見出しを設定するには、メニューグループ (MenuGroup) のコマンドを設定し、 コマンドの LabelTitle 属性を設定します。
ドロップダウンボタン (DropDownButton) を含む XAML コードは次のように成ります。
<?xml version='1.0' encoding='utf-8'?> <Application xmlns="http://schemas.microsoft.com/windows/2009/Ribbon"> <Application.Commands> <Command Name="cmdNew" LabelTitle="New"> <Command.LargeImages> <Image Source="res/new.bmp"/> </Command.LargeImages> </Command> <Command Name="cmdOpen" LabelTitle="Open"> <Command.LargeImages> <Image Source="res/open.bmp"/> </Command.LargeImages> </Command> <Command Name="cmdSave" LabelTitle="Save"> <Command.LargeImages> <Image Source="res/save.bmp"/> </Command.LargeImages> </Command> <Command Name="cmdSaveAs" LabelTitle="Save as"> <Command.LargeImages> <Image Source="res/saveas.bmp"/> </Command.LargeImages> </Command> <Command Name="cmdExit" LabelTitle="Exit"> <Command.LargeImages> <Image Source="res/exit.bmp"/> </Command.LargeImages> </Command> <Command Name="cmdMRUList" LabelTitle="Recent Documents"/> <Command Name="cmdDraw" LabelTitle="Draw"> <Command.LargeImages> <Image Source="res/draw.bmp"/> </Command.LargeImages> </Command> <Command Name="cmdCircle" LabelTitle="Circle"> <Command.LabelDescription>Draw a circle</Command.LabelDescription> <Command.LargeImages> <Image Source="res/orange-circle1.bmp"/> </Command.LargeImages> </Command> <Command Name="cmdRect" LabelTitle="Rectangle"> <Command.LabelDescription>Draw a rectangle or a round rectangle</Command.LabelDescription> <Command.LargeImages> <Image Source="res/blue-round-rect1.bmp"/> </Command.LargeImages> </Command> <Command Name="cmdCross" LabelTitle="Cross"> <Command.LabelDescription>Draw a cross</Command.LabelDescription> <Command.LargeImages> <Image Source="res/green-cross1.bmp"/> </Command.LargeImages> </Command> <Command Name="cmdDrawMenuGroup" LabelTitle="Draw"/> </Application.Commands> <Application.Views> <Ribbon> <Ribbon.ApplicationMenu> <ApplicationMenu> <ApplicationMenu.RecentItems> <RecentItems CommandName="cmdMRUList" MaxCount="10" /> </ApplicationMenu.RecentItems> <MenuGroup Class="MajorItems"> <DropDownButton CommandName="cmdDraw"> <MenuGroup Class="MajorItems" CommandName="cmdDrawMenuGroup"> <Button CommandName="cmdCircle"/> <Button CommandName="cmdRect"/> <Button CommandName="cmdCross"/> </MenuGroup> </DropDownButton> <Button CommandName="cmdNew"/> <Button CommandName="cmdOpen"/> <Button CommandName="cmdSave"/> <Button CommandName="cmdSaveAs"/> </MenuGroup> <MenuGroup Class="MajorItems"> <Button CommandName="cmdExit"/> </MenuGroup> </ApplicationMenu> </Ribbon.ApplicationMenu> </Ribbon> </Application.Views> </Application>
同様に、スプリットボタン (SplitButton) は以下のようになります。MenuGroup の中に以下のコードが入ります。
... <SplitButton> <SplitButton.MenuGroups> <MenuGroup Class="MajorItems" CommandName="cmdDraw"> <Button CommandName="cmdCircle"/> <Button CommandName="cmdRect"/> <Button CommandName="cmdCross"/> </MenuGroup> </SplitButton.MenuGroups> </SplitButton> ...
また、アプリケーションメニューに見えているボタン部分にも、区切り線があるのと無いところに違いがあります。 ドロップダウンボタンには、以下のように区切り線がありません。
