Not logged in▾
Log In Register
Forgot Password Resend Validation E-mail

Popuped ToolWindow is displayed behind WebView2

Docking/MDI for WPF Forum

Posted 2 years ago by Yuki
Version: 21.1.3
Platform: .NET 3.1 (Core)
Environment: Windows 10 (64-bit)
Avatar

Hello,

I'm using WebView2 in content of DocumentWindow/ToolWindow.

When auto hide ToolWindow and popup it, the ToolWindow is displayed behind WebView2 of other window.

Would you please tell me the workaround?

  

Procedure :

1. Modify sample app. (SimpleIde)

  - Put WebView2 in EditorDocumentWindow.xaml

<docking:DocumentWindow
~~
    xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
~~
    ImageSource="/Images/Icons/TextDocument16.png">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Border
            x:Name="symbolSelectorBorder"
            Background="{DynamicResource {x:Static themes:AssetResourceKeys.ToolBarHorizontalBackgroundNormalBrushKey}}"
            Visibility="Collapsed">
            <syntaxeditor:NavigableSymbolSelector
                x:Name="symbolSelector"
                Margin="0,0,0,1"
                SyntaxEditor="{Binding ElementName=editor}" />
        </Border>

        <syntaxeditor:SyntaxEditor
            x:Name="editor"
            Grid.Row="1"
            BorderThickness="0"
            CanSplitHorizontally="False"
            DocumentIsModifiedChanged="OnEditorDocumentIsModifiedChanged"
            DocumentParseDataChanged="OnEditorDocumentParseDataChanged"
            HasSearchOverlayPaneKeyBindings="False"
            UserInterfaceUpdate="OnEditorUserInterfaceUpdate"
            ViewSearch="OnEditorViewSearch" />

        <wv2:WebView2
            Grid.Row="2"
            Height="300"
            Source="https://www.microsoft.com" />
    </Grid>
</docking:DocumentWindow>

2. Start sample app and show Simple IDE.

3. Dock "Output" ToolWindow to left side and execute AutoHide.

4. Popup "Output" ToolWindow.

    --> "Output" ToolWindow will be displayed behind WebView2 area of "About.txt" DocumentWindow.

Comments (4)

Posted 2 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

Yes interop controls like WebView2 have airspace issues in WPF where they always appear above any WPF content in the same Window or Popup.  That is a general issue in WPF and not something caused by us.

We do have some features you can enable for our product to handle auto-hide differently to work around the interop airspace issues.  Please read this documentation topic for details.

Actipro Software Support

Posted 2 years ago by Yuki
Avatar

Hello,

Thank you for replying.

I set DockSite.UseHostedPopups property to false, then ToolWindow popup was displayed above WebView2 content.

When application window is maximized, sometimes ToolWindow popup is Displayed out of PC monitor.

I'm going to check if there is way to control popup position or not. (Is there a way to control it?)

Posted 2 years ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

Please make sure you do ALL the things mentioned in that topic if you are using interop controls like WebView2, not just the UseHostedPopups property.

The popup position is controlled by us and should be showing in the correct location.  If you see it showing on the wrong monitor, please give us details on your setup for each monitor (orientation, monitor pixel sizes, DPI), and exactly how to reproduce it with our Sample Browser app (not your app).

I am testing by going into our main Docking / MDI demo by clicking the button at the top of the first Sample Browser page.  Then I select "Options / Use Hosted Popups" to uncheck it.  I auto-hide tool windows on all sides and maximized the Window.  All popups show where they are expected to for me.  I tried on multiple monitors.

Actipro Software Support

Posted 2 years ago by Yuki
Avatar

Hello,

Thank you for checking.

In my app, high DPI setting in manifest file(App.manifest) was not properly.

After I modified the setting, popup was displayed at correct position.

Sorry for troubling you and thank you very much for your support.

  

App.manifest

--> SupportedOS remained comment in my app.

  <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
    <application>

      <!-- Windows Vista -->
      <!--<supportedOS Id="{e2011457-1546-43c5-a5fe-008deee3d3f0}" />-->

      <!-- Windows 7 -->
      <!--<supportedOS Id="{35138b9a-5d96-4fbd-8e2d-a2440225f93a}" />-->

      <!-- Windows 8 -->
      <!--<supportedOS Id="{4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38}" />-->

      <!-- Windows 8.1 -->
      <!--<supportedOS Id="{1f676c76-80e1-4239-95bb-83d0f6d0da78}" />-->

      <!-- I did not uncomment this -->
      <!-- Windows 10 -->
      <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />

    </application>
  </compatibility>

  <application xmlns="urn:schemas-microsoft-com:asm.v3">
    <windowsSettings>
      <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitor</dpiAwareness>
    </windowsSettings>
  </application>
The latest build of this product (v24.1.1) was released 2 months ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.