Flyout

Элемент Flyout позволяет реализовать функциональность всплывающих окон, которое можно убрать, коснувшись любого места за пределами этого окна.

Как и элемент Popup, Flyout может принимать сложное содержимое. Однако он существует не сам по себе, а прикрепляется к какому-нибудь элементу FrameworkElement. Например:

<Button x:Name="ConfirmButton" Content="Удалить" 
    VerticalAlignment="Center" HorizontalAlignment="Center">
    <Button.Flyout>
        <Flyout>
            <StackPanel Height="150" VerticalAlignment="Top">
                <TextBlock FontSize="20" HorizontalAlignment="Center"
                    Text="Подверждение действия" />
                <Button Click="Button_Click" HorizontalAlignment="Center" 
                    Margin="0 20 0 0" Content="Подтвердить" />
            </StackPanel>
        </Flyout>
    </Button.Flyout>
</Button>

В данном случае для прикрепления всплывающего сообщения к кнопке используется свойство Button.Flyout. И по нажатию на кнопку произойдет отображение сообщения:

Во Flyout можно определить различные элементы и прикрепить к ним обработчики событий, как в примере выше с кнопкой.

По умолчанию элемент отображается в верхней части экрана. Однако мы можем также заполнить всплывающим окном все пространство экрана, установив для свойства Placement значение Full:

<Flyout Placement="Full">
	<!---->
</Flyout>

Но не у всех элементов есть прикрепленное свойство Flyout, как у кнопки. При чтобы прикрепить к подобным элементам Flyout, надо использовать свойство FlyoutBase.AttachedFlyout. Правда, в этом случае также надо будет самим реализовать отображения всплывающего окна. Например:

<TextBlock Text="Hello World!" FontSize="25" Tapped="TextBlock_Tapped" 
        VerticalAlignment="Center" HorizontalAlignment="Center">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <StackPanel Height="150" VerticalAlignment="Top">
                <TextBlock FontSize="20" HorizontalAlignment="Center"
                    Text="Подверждение действия" />
                <Button Click="Button_Click" HorizontalAlignment="Center" 
                    Margin="0 20 0 0" Content="Подтвердить" />
            </StackPanel>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>

Но чтобы увидеть окно, надо еще определить следующий обработчик для события Tapped:

private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);  
}