Mahapps Flyout控件被WebView2遮挡及侵入标题栏问题咨询

问题1：Flyout被WebView2遮挡解决方案 #

该问题的核心原因是WebView2默认采用Hwnd独立窗口渲染模式，作为Win32原生控件的WebView2永远会显示在同层级WPF托管控件的上方，和你使用的布局容器类型无关。
推荐优先使用以下方案解决：

• 升级Microsoft.Web.WebView2 Nuget包到1.0.1056及以上版本，给WebView2控件添加CompositionMode="RedirectToRenderSurface"属性，开启WPF兼容渲染模式，WebView2会直接渲染到WPF的渲染表面，不再作为独立窗口存在，自然不会遮挡Flyout：

<wv2:WebView2 Source="http://localhost:4200" CompositionMode="RedirectToRenderSurface"/>

如果受版本限制无法使用上述属性，可以采用次选方案：

• 不要将FlyoutsControl放在MetroWindow.Flyouts集合中，直接把它移到主Grid的最后一个子元素位置，保证它的Z顺序高于WebView2，同时给Flyout设置AllowsTransparency="True"：

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="98*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>
    <Grid Grid.Column="0">
        <wv2:WebView2 Source="http://localhost:4200"/>
    </Grid>
    <StackPanel Grid.Column="1" MouseEnter="StackPanel_MouseEnter" MouseLeave="StackPanel_MouseLeave" Background="{StaticResource MyVisualBrush}"/>
    <!-- FlyoutsControl移到最末尾获得最高Z顺序 -->
    <mah:FlyoutsControl Grid.ColumnSpan="2">
        <mah:Flyout x:Name="flyout" Position="Right" AllowsTransparency="True">
            <TextBlock Text="Some Text"/>
        </mah:Flyout>
    </mah:FlyoutsControl>
</Grid>

问题2：Flyout不延伸到标题栏解决方案 #

MahApps的Flyout控件自带适配标题栏的原生属性，直接给Flyout添加AvoidTitleBar="True"即可，控件会自动计算当前窗口标题栏的高度，自动调整Flyout的位置和尺寸，不会延伸到标题栏区域：

<mah:Flyout x:Name="flyout" Position="Right" AvoidTitleBar="True">
    <TextBlock Text="Some Text"/>
</mah:Flyout>

如果是旧版本MahApps不支持该属性，也可以手动给Flyout设置Top Margin，值和窗口标题栏高度一致即可，一般设置Margin="0 32 0 0"就可以适配默认高度的标题栏。

内容的提问来源于stack exchange，提问作者lukep