1809の新しいUIコントロール
Windows 10 1809で追加されたコントロールには、次のようなものがあります。
この中からいくつか紹介していきましょう。
メニューバー
待ち望んでいたメニューバーが追加されました（少なくとも業務アプリ開発者には吉報でしょう）。次の画像に見えるように、メニュー項目にはアイコンも付けられますし、ショートカットキー（キーボードアクセラレータ）も設定できます（画像の「Save」メニュー）。また、Altキーを押したときに表示されるアクセスキーも設定可能です（画像の「P」／「R」／「O」）。
このメニューバーのXAMLは次のコードのような感じです（「Plain Text Document」メニューと「Save」メニューに関連する部分のみ抜粋）。
<MenuBar Background="AliceBlue" >
<MenuBarItem Title="File" AccessKey="F">
<MenuFlyoutSubItem Text="New" AccessKey="N">
<MenuFlyoutItem Text="Plain Text Document" AccessKey="P"
Command="{x:Bind _menuCommand}"
CommandParameter="Plain Text Document" />
<!-- ……省略…… -->
</MenuFlyoutSubItem>
<!-- ……省略…… -->
<MenuFlyoutItem Text="Save" AccessKey="S" Icon="Save"
Command="{x:Bind _menuCommand}"
CommandParameter="Save">
<MenuFlyoutItem.KeyboardAccelerators>
<KeyboardAccelerator Key="S" Modifiers="Control"/>
</MenuFlyoutItem.KeyboardAccelerators>
</MenuFlyoutItem>
<MenuFlyoutSeparator />
<!-- ……省略…… -->
</MenuBarItem>
<!-- ……省略…… -->
</MenuBar>
ドロップダウン系ボタン3種
いずれもドロップダウンを表示できるボタンです。各コントロールのFlyoutプロパティにドロップダウンを自由に定義します。
DropDownButton
単純に、ボタンがクリックされたときにドロップダウンを出すだけのコントロールです。
SplitButton
ボタン右側の「v」部分をクリックすると、ドロップダウンが出ます。それ以外の部分をクリックしたときは、普通のボタンです。MS Officeで文字色などを設定するボタンといえばお分かりでしょう。
ToggleSplitButton
上のSplitButtonに似ていますが、ボタン本体の動作がトグルになっています。
テキストボックス系コントロールのコンテキストメニュー
1809では、テキストボックス系のコンテキストメニューが刷新されました。次の画像はRichEditBoxコントロールの例です。文字列を選択しただけで、MS Officeのようにミニツールバー（コマンドフライアウト）が出てきます。これには、TextCommandBarFlyoutコントロールが使われています。
このコマンドフライアウトには［…］ボタンがあります。それをクリックするか、あるいは、コマンドフライアウトが出ていない状態で右クリックすると、次の画像のように拡張されたモードのコマンドフライアウトになります。
このコマンドフライアウトはカスタマイズ可能で、ボタンやメニューを追加／削除できます。例えば、次の画像ではボタンを追加しています。
上のようにボタンを追加するには、ページが表示されるときに次のようなコードを記述します。
this.richEdit.Loaded += (s, e)
=> this.richEdit.ContextFlyout.Opening += ContextFlyout_Opening;
this.richEdit.Unloaded += (s, e)
=> this.richEdit.ContextFlyout.Opening -= ContextFlyout_Opening;
void ContextFlyout_Opening(object sender, object e)
{
var shareCommand = new StandardUICommand(StandardUICommandKind.Share);
shareCommand.ExecuteRequested += (cmd, args) =>
{
// ボタンクリック時の処理を書く
};
var shareButton = new AppBarButton { Command = shareCommand, };
(sender as CommandBarFlyout).PrimaryCommands.Add(shareButton);
}
上のコードに登場するStandardUICommandクラスは、これも1809で追加されたもので、UIでよく使うコマンドの実装を楽にしてくれます。UIコマンドの種類（ここではStandardUICommandKind.Share＝共有）とコマンド実行時の処理を書くだけで、アイコンやツールチップの設定などはしなくて済みます。また、ここではUIコマンドがセットされたボタンをPrimaryCommandsに追加しているので、折りたたんだ小さいツールバーに追加のボタンが表示されます。拡張した下側のコンテキストメニューに表示したいときは、SecondaryCommandsに追加します。
