UWP弹出菜单Flyout类的灵活应用

下面是弹出菜单示例(AppName:桌面记事本):

    对于很多UWP控件,都包含一个ContextFlyout属性.比如richeditbox控件.直接定义ContextFlyout 就可以替换掉默认的弹出菜单.

 <RichEditBox >
            <RichEditBox.ContextFlyout>
                <MenuFlyout x:Name="udf_menu" Windows10version1809:ShowMode="TransientWithDismissOnPointerMoveAway">
                    <MenuFlyoutItem Icon="Copy" x:Uid="copy" Text="Copy" Click="OnCopy" />

                    <MenuFlyoutItem Icon="Cut"  x:Uid="cut" Text="Cut" Click="OnCut" />
                    <MenuFlyoutItem Icon="Paste" x:Uid="paste" Text="Paste" Click="OnPaste" />

                    <MenuFlyoutSeparator />

                    <MenuFlyoutSubItem  x:Uid="fontsize" Text="FontSize">
                        <MenuFlyoutSubItem.Icon>
                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE8D2;" />
                        </MenuFlyoutSubItem.Icon>
                        
                        <MenuFlyoutItem Text="8" Tag="8" Click="OnFontSize" />
                        <MenuFlyoutItem Text="9" Tag="9" Click="OnFontSize" />
                        <MenuFlyoutItem Text="10" Tag="10" Click="OnFontSize" />
                        <MenuFlyoutItem Text="12" Tag="12" Click="OnFontSize" />
                        <MenuFlyoutItem Text="15" Tag="15" Click="OnFontSize" />
                        <MenuFlyoutItem Text="16" Tag="16" Click="OnFontSize" />
                        <MenuFlyoutItem Text="20" Tag="20" Click="OnFontSize" />
                        <MenuFlyoutItem Text="24" Tag="24" Click="OnFontSize" />
                        <MenuFlyoutItem Text="36" Tag="36" Click="OnFontSize" />
                        <MenuFlyoutItem Text="48" Tag="48" Click="OnFontSize" />
                    </MenuFlyoutSubItem>

                    <!--分割-->

                    <MenuFlyoutSeparator />

                    <MenuFlyoutSubItem x:Uid="translate" Text="Translate" Tapped="Translate_Tapped">
                        <MenuFlyoutSubItem.Icon>
                            <FontIcon FontFamily="MS Outlook" Glyph="&#xF043;" />
                        </MenuFlyoutSubItem.Icon>

                        <MenuFlyoutItem Text="*-> En" Tag="En" Click="Translate_Click"/>
                        <MenuFlyoutItem Text="*-> 中" Tag="中" Click="Translate_Click" />
                        <MenuFlyoutItem Text="*-> 繁" Tag="繁" Click="Translate_Click" />
                        <MenuFlyoutItem Text="*-> Japan" Tag="Japan" Click="Translate_Click" />
                        <MenuFlyoutItem Text="*-> Korea" Tag="Korea" Click="Translate_Click" />
                        <MenuFlyoutItem Text="*-> Russian" Tag="Russian" Click="Translate_Click" />
                    </MenuFlyoutSubItem>

                    <!--<MenuFlyoutItem x:Uid="translate" Text="Translate" Click="Translate_Click">

                        <MenuFlyoutItem.Icon>
                            <FontIcon FontFamily="MS Outlook" Glyph="&#xF043;" />
                        </MenuFlyoutItem.Icon>
                        
                    </MenuFlyoutItem>-->

                    <!--<MenuFlyoutSubItem x:Uid="underline" Text="Underline">
                        <MenuFlyoutItem x:Uid="no_underline" Text="None" Tag="-1" Click="OnUnderline" />
                        <MenuFlyoutItem x:Uid="single_line" Text="Single Line" Tag="0" Click="OnUnderline" />
                        <MenuFlyoutItem x:Uid="dual_solid" Text="Dual Solid line" Tag="1" Click="OnUnderline" />
                        <MenuFlyoutItem x:Uid="dashed" Text="Dashed" Tag="2" Click="OnUnderline" />
                    </MenuFlyoutSubItem>-->
                    <MenuFlyoutSeparator />
                    <MenuFlyoutItem x:Uid="Insert_Img" Text="Insert Img" Click="InsertImgButton_Click" FontFamily="Segoe UI">
                        <MenuFlyoutItem.Icon>
                            <FontIcon FontFamily="HoloLens MDL2 Assets" Glyph="&#xEB9F;" />
                        </MenuFlyoutItem.Icon>

                    </MenuFlyoutItem>

                    <MenuFlyoutItem x:Uid="Insert_Drawing" Text="Insert Drawing" Click="Insert_Drawing_Click" FontFamily="Segoe UI">
                        <MenuFlyoutItem.Icon>
                           
                            <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEC87;" />
                        </MenuFlyoutItem.Icon>

                    </MenuFlyoutItem>

                </MenuFlyout>
            </RichEditBox.ContextFlyout>
            <!--<RichEditBox.HandwritingView>
                <HandwritingView/>
            </RichEditBox.HandwritingView>-->
            
            
            <!--<FlyoutBase.AttachedFlyout>
                <MenuFlyout>
                    <MenuFlyoutItem  x:Uid="copy" Text="Copy" Click="OnCopy" />
                    <MenuFlyoutItem x:Uid="cut" Text="Cut" Click="OnCut" />
                    <MenuFlyoutItem x:Uid="paste" Text="Paste" Click="OnPaste" />

                    <MenuFlyoutSeparator />

                    <MenuFlyoutSubItem x:Uid="fontsize" Text="FontSize">
                        <MenuFlyoutItem Text="8" Tag="8" Click="OnFontSize" />
                        <MenuFlyoutItem Text="12" Tag="9" Click="OnFontSize" />
                        <MenuFlyoutItem Text="16" Tag="10" Click="OnFontSize" />
                        <MenuFlyoutItem Text="8" Tag="12" Click="OnFontSize" />
                        <MenuFlyoutItem Text="12" Tag="15" Click="OnFontSize" />
                        <MenuFlyoutItem Text="16" Tag="16" Click="OnFontSize" />
                        <MenuFlyoutItem Text="20" Tag="20" Click="OnFontSize" />
                        <MenuFlyoutItem Text="24" Tag="24" Click="OnFontSize" />
                        <MenuFlyoutItem Text="36" Tag="36" Click="OnFontSize" />
                        <MenuFlyoutItem Text="48" Tag="48" Click="OnFontSize" />
                    </MenuFlyoutSubItem>

                    --><!--分割--><!--

                    <MenuFlyoutSeparator />
                    <MenuFlyoutItem x:Uid="translate" Text="Translate" Click="Translate_Click" />

                    <MenuFlyoutSubItem x:Uid="underline" Text="Underline">
                        <MenuFlyoutItem x:Uid="no_underline" Text="None" Tag="-1" Click="OnUnderline" />
                        <MenuFlyoutItem x:Uid="single_line" Text="Single Line" Tag="0" Click="OnUnderline" />
                        <MenuFlyoutItem x:Uid="dual_solid" Text="Dual Solid line" Tag="1" Click="OnUnderline" />
                        <MenuFlyoutItem x:Uid="dashed" Text="Dashed" Tag="2" Click="OnUnderline" />
                    </MenuFlyoutSubItem>
                    <MenuFlyoutSeparator />
                    <MenuFlyoutItem x:Uid="Insert_Img" Text="Insert Img" Click="InsertImgButton_Click" FontFamily="Segoe UI">
               

                    </MenuFlyoutItem>

                    <MenuFlyoutItem x:Uid="Insert_Drawing" Text="Insert Drawing" Click="Insert_Drawing_Click"  FontFamily="Segoe UI">


                    </MenuFlyoutItem>

                </MenuFlyout>
            </FlyoutBase.AttachedFlyout>-->

        </RichEditBox> 

上面的代码替换掉了RichEditBox的默认菜单,如果使用后台代码,需要在弹出事件设置,但其实弹出类(Flyout等...)还有更广泛好用的方法.FlyOut使用代码可以设置在任何页面和UI弹出.比如

Flyout flyout = new Flyout();
flyout.Content = list;
flyout.Closed += (sender, e) => {
foreach (var each in matched_result)
{
var OneRange = redit.Document.GetRange(each.Value, each.Value + textToFind.Length);
//修改匹配项目字体颜色
OneRange.CharacterFormat.BackgroundColor = Colors.Transparent;

}; 
};
//this.ContextFlyout = flyout;

FlyoutShowOptions op = new FlyoutShowOptions
{
ShowMode = FlyoutShowMode.Standard,
Placement = FlyoutPlacementMode.RightEdgeAlignedTop,

};
flyout.ShowAt(redit, op);

其中ShowAt方法可以设置弹出菜单(任何UI)置于哪个UI上部,设置为当前Page(this)也是可以的,但是要注意显示效果.还可以设置弹出后的位置和行为.其中flyout.Content可以使用代码创建UI也可以新建一个自定义控件[使用xaml创建UI].