Flyout例子--Button.Flyout和FlyoutBase

Flyout是Button类特有的浮动层，类似于html的div。

如果不是Button类，则可以通过FlyoutBase类的附加属性对其他对象添加Flyout

MainPage.xaml中

<Canvas >
                <Button Content="点我！">
                    <Button.Flyout >
                        <Flyout x:Name="myButtonFL"  Placement="Bottom">
                            <StackPanel >
                                <TextBlock Text="nihao!" />
                                <Button Content="wohao" Click="Button_Click" />
                            </StackPanel>
                        </Flyout>
                    </Button.Flyout>
                </Button>
                
                <Rectangle Width="100" Height="50"  Canvas.Top="50"  Canvas.Left="100" Canvas.ZIndex="5" Fill="Red" StrokeThickness="5" Stroke="Blue" />
                <Rectangle Width="150" Height="40"  Canvas.Top="80"  Canvas.Left="150" Canvas.ZIndex="0" Fill="Green" StrokeThickness="5" Stroke="Blue" />
                <Ellipse Width="120" Height="100" Canvas.Left="130" Canvas.Top="70" Canvas.ZIndex="1" Fill="AliceBlue" StrokeThickness="5" Stroke="Blue" Tapped="Ellipse_Tapped" >
                    <FlyoutBase.AttachedFlyout >
                        <Flyout x:Name="myFL" >
                            <StackPanel >
                                <TextBlock Text="nihao!" />
                                <Button Content="wohao" Click="Button_Click" />
                            </StackPanel>
                        </Flyout>
                    </FlyoutBase.AttachedFlyout>
                </Ellipse>
            </Canvas>

MainPage.cs中

        private void Ellipse_Tapped(object sender, TappedRoutedEventArgs e)
        {
            Ellipse va = (Ellipse)sender;

            va.Fill = new SolidColorBrush(Windows.UI.Colors.Purple);
            FlyoutBase.ShowAttachedFlyout(va);
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            myButtonFL.Hide();
            myFL.Hide();
        }

链接： 【Win 10应用开发】自定义浮动层——Flyout