[UWP][Flyout] Flyoutプロパティを持つコントロールを使用する

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は非表示になります。