[ストアアプリ][入門] Step48. コンテキストメニューを表示する

スポンサーリンク

コンテキストメニューは、右クリックや右タップをしたときに表示されるメニューです。

今回は、このポップアップメニューを作成していきます。

ポップアップメニューには

  • より大きく
  • より小さく

というメニューを表示し、選択されたらTextBlockコントロールに対して操作を行うようにします。

最初に、MainPage.xaml にTextBlockコントロールを貼り付け、NameプロパティをtxbNameにします。

次に、右クリックや右タップに対応できるようにMainPage.xaml のルートコントロールである Gridのイベントを作成します。

XAMLは以下の様になります。

XAMLの例

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" RightTapped="Grid_RightTapped">
    <TextBlock x:Name="txbName"  HorizontalAlignment="Left" Margin="205,219,0,0" 
    	TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top"/>
</Grid>

次に、Grid_RightTappedには以下のようなコードを記述します。

VBの例

Private Async Sub Grid_RightTapped(sender As Object, e As RightTappedRoutedEventArgs)
    Dim popup As New PopupMenu()

    popup.Commands.Add(New UICommand("より大きく", AddressOf OnLarge, 1.5))
    popup.Commands.Add(New UICommand("より小さく", AddressOf OnSmall, 1.5))
    popup.Commands.Add(New UICommandSeparator())
    popup.Commands.Add(New UICommand("赤", AddressOf OnRed, Windows.UI.Colors.Red))

    Await popup.ShowAsync(e.GetPosition(Me))
End Sub

C#の例

async private void Grid_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
    PopupMenu popup = new PopupMenu();

    popup.Commands.Add(new UICommand("より大きく", OnLarge, 1.5));
    popup.Commands.Add(new UICommand("より小さく", OnSmall, 1.5));
    popup.Commands.Add(new UICommandSeparator());
    popup.Commands.Add(new UICommand("赤", OnRed, Windows.UI.Colors.Red));


    await popup.ShowAsync(e.GetPosition(this));
}

ポップアップメニューを作成するにはPopupMenuクラスを使用します。

PopupMenuクラスのインスタンスを作成したら、Command.Addでメニューを追加していきます。

メニュー自体はUICommandクラスで作成します。ちなみに、メニューとメニューの間にセパレータを挿入したい場合は、UICommadSeparatorクラスを使用します。

UICommandクラスの第1引数にはメニューのラベル、第2引数にはメニュークリック時に実行されるイベントハンドラーを指定します。第3引数はイベントハンドラーに渡すパラメータです。

例として「より大きく」と書かれたメニュー部分を見て下さい。第1引数にコンテキストメニューに表示されるラベルとして「より大きく」が指定されています。第2引数は、「より大きく」がクリックされた時に実行されるイベントハンドラーとしてOnLargeを指定しています。第3引数の1.5という数値は、実行時にフォントサイズを元のサイズより1.5倍にするための数値です。第3引数には数値以外に文字や色を渡すことが可能です。

最後に、ポップアップメニューの表示ですがShowAsyncメソッドを使用します。ShowAsyncとなっているくらいですから、このメソッドは非同期で動きます。よってこのメソッドの呼び出しの先頭にはawaitキーワードが必要となります。またGrid_RightTappedイベントは非同期メソッドを含むので、Async(C#はasync)キーワードが必要になります。

参考までに、各メニュー実行時のイベントコードを以下に掲載します。

イベントの引数はIUICommad型のパラメータを受け取ります。受け取ったパラメータは適切な型にキャストして使用します。

VBの例

'より大きく
Private Sub OnLarge(cmd As IUICommand)
    txbName.FontSize *= DirectCast(cmd.Id, Double)
End Sub

'より小さく
Private Sub OnSmall(cmd As IUICommand)
    txbName.FontSize *= DirectCast(cmd.Id, Double)
End Sub

'赤
Private Sub OnRed(cmd As IUICommand)
    txbName.Foreground = New SolidColorBrush(DirectCast(cmd.Id, Windows.UI.Color))
End Sub

C#の例

//より大きく
void OnLarge(IUICommand cmd)
{
    txbName.FontSize *= (double)cmd.Id;
}

//より小さく
void OnSmall(IUICommand cmd)
{
    txbName.FontSize *= (double)cmd.Id;
}

//赤
void OnRed(IUICommand cmd)
{
    txbName.Foreground = new SolidColorBrush((Windows.UI.Color)cmd.Id);
}

ポップアップメニューの例

 

Please follow and like us:

コメント

タイトルとURLをコピーしました