CODEWITHSUNDEEP
wpfmahapps.metrowebview2flyout
lukep
lukep

Reputation: 131

Mahapp Flyout is hidden by webview2 control

I feel like I'm missing something obvious, but:

I was hoping to use the mahapps Flyout control to do a fairly simple flyout over a webview2 control. However, the the flyout shows behind the webview2 control, leaving most of the flyout hidden.

The control is wrapped in a Grid in the code below because I noticed that if I put the webview in a StackPanel, then the webview doesn't show (no height/width measurements given) but the flyout does appear in front as expected. So I tried DockPanel and Grid which show the webview page but hide the flyout.

The hatched area on the right of the screenshot is so the user has a mouseover area which should auto expand the flyout:

Hatch without mouseover

And this is how the flyout renders whether webview is without a wrapper, or in a DockPanel or Grid: Hidden flyout

<mah:MetroWindow x:Class="Fraxinus.EdBoard.UI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Fraxinus.EdBoard.UI"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Window.Resources>
        <VisualBrush x:Key="MyVisualBrush" TileMode="Tile" Viewport="0,0,5,5" ViewportUnits="Absolute" Viewbox="0,0,5,5" ViewboxUnits="Absolute">
            <VisualBrush.Visual>
                <Grid Background="Black">
                    <Path Data="M 0 5 L 5 0" Stroke="Gray" />
                    <Path Data="M 0 0 L 5 5" Stroke="Gray" />
                </Grid>
            </VisualBrush.Visual>
        </VisualBrush>
    </Window.Resources>
    <mah:MetroWindow.Flyouts>
        <mah:FlyoutsControl Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2">
            <mah:Flyout x:Name="flyout" Position="Right">
                <TextBlock Text="Some Text"/>
            </mah:Flyout>
        </mah:FlyoutsControl>

    </mah:MetroWindow.Flyouts>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="98*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" Grid.Row="0">
        <wv2:WebView2 Source="http://localhost:4200"></wv2:WebView2>
        </Grid>
        <StackPanel Grid.Column="1" Grid.Row="0" MouseEnter="StackPanel_MouseEnter" MouseLeave="StackPanel_MouseLeave" Background="{StaticResource MyVisualBrush}">
        </StackPanel>
    </Grid>
</mah:MetroWindow>

Also is it a simple thing to prevent the flyout from extending into the title bar?

Thanks, Luke

Upvotes: 0

Views: 343

Answers (1)

mattjs
mattjs

Reputation: 153

Yep: I have the exact same problem with MahApps Metro async dialogs displaying underneath. Menus and Context Menus work fine although the latter isn't styled like the former which is a real bummer and headache to do.

Glad I didnt try the Hamburger Menu: besides I dont want my WebView2 based Javascript Web Map to have to resize itself on every flyout of this menu if heavily loaded with serious maps!

I'll try styling the Context Menu but the answer is that I am seriously thinking of just doing all of the menus and dialogs in JavaScript leaving just the WebView2 plus Mahapps shell with an Hamburger icon which I did get working. As I can always just use JS to C# interop to do processing with C# libraries in the effective back end in which I case I could go with Photino but then I wouldn't be able to use my Hamburger icon in the MetroWindow Title Bar so I will stick with it. Decisions. Decisions..

This is the definitive answer to use of WebView2: menus, context menus, or else JavaScript menus and dialogs for everything. Although I am pretty sure regular Windows popup dialogs or custom ones in their own windows will work but again you will have to style them and I am beginning to think that styling in JS and CSS will be one hell of a lot easier!

From the Ticket AirHack looks to be the only other option but requires re-inheriting all of your controls = nope!

Upvotes: 1

Related Questions