MenuFlyout
このサンプルは次のXAMLを使用しています。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<FlyoutBase.AttachedFlyout>
<MenuFlyout/>
</FlyoutBase.AttachedFlyout>
<Button x:Name="btnBack" Content="戻る" HorizontalAlignment="Left" Height="55" Margin="97,63,0,0" VerticalAlignment="Top" Width="162" FontSize="20" Background="#FFFF9A9A" Click="btnBack_Click" FontFamily="Global User Interface"/>
<Button x:Name="btn1" Content="Button" HorizontalAlignment="Left" Height="55" Margin="97,151,0,0" VerticalAlignment="Top" Width="162">
<Button.Resources>
<MenuFlyout x:Key="FlyoutBase1">
<MenuFlyoutItem x:Name="menu1" Text="メニューその１" Click="menu1_Click"/>
<MenuFlyoutItem x:Name="menu2" Text="メニューその２" Click="menu2_Click"/>
</MenuFlyout>
</Button.Resources>
<Button.Flyout>
<StaticResource ResourceKey="FlyoutBase1"/>
</Button.Flyout>
</Button>
</Grid>
ボタンを実装します。
このボタンの上にMenuFlyoutをドラッグします。
つぎのようなダイアログが表示されます。
ボタン名がコンボボックス内のリストが表示されているので、
ボタンを選択後、リソースの作成ボタンを選択します。
この例では
「Button: btn1」を選択後、リソースの作成ボタンをクリックしています。
Itemsのボタンをクリックします。
左下のリストから実装したいアイテムを選択します。
このサンプルでは「MenuFlyoutItem」を選択しています。
メニューを2個作成するため2個分作成しました。
プロパティの共通のTextにメニュー名として表示したい名称を入力します。
このサンプルでは「メニューその１」としています。
2個目を「メニューその２」としています。
このように作成後のXAMLが更新されます。
イベントを作成するため、メニューの「名前」に
それぞれの名称を設定します。
このサンプルではmenu1、menu2としています。
その後、イベント（イナズマのマーク）から
クリックイベントを設定します。
各イベントをクリックするとメッセージボックスを表示する
メソッドを実行させています。
これでボタンをクリックするとメニューが表示されるので
メニューその１、メニューその２を選ぶとメッセージボックスが
表示されます。
ヘッダファイルです。
起動後の画面です。
|
|