UWP - Simple Flyout example

MainPage.xaml


<Page
    x:Class="UniversalAppTutorials.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniversalAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <StackPanel 
        x:Name="stack_panel1" 
        Margin="50" 
        Orientation="Vertical"
        Background="AliceBlue"
        Padding="35"
        >
        <Button Content="Click Me" Margin="50">
            <Button.Flyout>
                <Flyout Placement="Right">
                    <TextBlock Text="This is a simple Flyout."/>
                </Flyout>
            </Button.Flyout>
        </Button>
        
        <!-- Show Flyout on Image -->
        <Image
            x:Name="image1"
            Source="Assets/butterfly.jpeg" 
            Margin="50"
            Tapped="Image1_Tapped"
            Width="150"
            HorizontalAlignment="Left"
            >
            <FlyoutBase.AttachedFlyout>
                <Flyout>
                    <TextBlock Text="This is another Flyout." Foreground="Red"/>
                </Flyout>
            </FlyoutBase.AttachedFlyout>
        </Image>
    </StackPanel>
</Page>

MainPage.xaml.cs


using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Input;

namespace UniversalAppTutorials
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

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