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);
}
}
}



- UWP - Get ComboBox selected item
- UWP - ListView multi select example
- UWP - ListView item style example
- UWP - How to change ListView item height
- UWP - ListView alternate item style
- UWP - How to create a ListView programmatically
- UWP - How to use RadioButton
- UWP - ToggleSwitch example
- UWP - Simple ContentDialog example
- UWP - HyperlinkButton example
- UWP - Show image and text on a Button
- UWP - Simple MessageDialog example
- UWP - Remove control programmatically
- UWP - CheckBox group example
- UWP - Button click event