Flyoutとは、一時的に表示されるUIです。画面の他の場所をタップやクリックをすると非表示になります。
Flyoutは、Flyoutプロパティを持つコントロールとそうでないコントロールとでは、表示方法が異なります。
今回はFlyoutプロパティを持つButtonコントロールを使用してみます。
最初にXamlを見てみましょう。以下はButtonコントロールのFlyoutプロパティにStackPanelを配置しています。
StackPanelを配置することでFlyout表示の中に複数のオブジェクトを配置することができます。もちろん、コンテナになるコントロールであればStackPanelでなくても構いません。
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="40,40,0,0" VerticalAlignment="Top"> <Button.Flyout> <Flyout> <StackPanel> <TextBlock>Flyout中のTextBlock</TextBlock> <Button>ボタン</Button> </StackPanel> </Flyout> </Button.Flyout> </Button>
上記の実行例を以下に示します。
ButtonをクリックするとFlyoutが表示され、TextBlockとButtonが表示されます。別の場所をクリックするとFlyoutは非表示になります。
Please follow and like us:
コメント