WPF應用中對WindowsFormHost內容進行裁剪

時間 2019-12-16

標籤 wpf 應用 windowsformhost 內容進行裁剪简体版

原文原文鏈接

問題1： 微信

WPF中在使用WindowsFormsHost調用WinFrom控件時，若在WindowsFormsHost上層添加了WPF控件，該控件不會顯示出來。app

 <Grid>
    <WindowsFormsHost Background="White">
          <Winfrm:WebBrowser x:Name="WinFrmWebBrowser"/>
    </WindowsFormsHost>
    <!--運行時 Ellipse 不會顯示出來-->
    <Ellipse Width="100" Height="100" Fill="Red"/>
 </Grid>

解決方案：使用Popup對上層的WPF控件內容進行包裝。測試

<Style TargetType="{x:Type local:MyBrowser}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:MyBrowser}">
                <Border Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid>
                        <Border x:Name="Part_BdrWinfrmHostContainer">
                            <WindowsFormsHost x:Name="Part_WinfrmHost" Background="Gray">
                                <Winfrm:WebBrowser x:Name="Part_WinFrmWebBrowser"/>
                            </WindowsFormsHost>
                        </Border>
                        <Popup x:Name="PART_Popup" IsOpen="True" Placement="Center" 
                               AllowsTransparency="True">
                            <!--全部WPF內容添加至這個Border裏面-->
                            <Border x:Name="PART_Content"/>
                        </Popup>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我測試時封裝成了自定義的CustomControl。對應的.cs文件中定義了Link、 Content兩個依賴屬性接收參數。this

<Grid x:Name="GdPopupWays" Grid.Column="1">
    <local:MyBrowser Link="http://www.baidu.com">
        <local:MyBrowser.Content>
            <!--local:OverLayer是自定義的UserControl-->
            <local:OverLayer/>
        </local:MyBrowser.Content>
    </local:MyBrowser>
</Grid>

如右側，我建立了一個黃色的Ellipse疊加在WindowsFormHost 上面成功呈現出來。（tips：我在WindowsFormHost 裏面加載了WinForm的WebBrowser）。spa

問題2：3d

想要將加載在WindowsFormHost中的內容進行裁剪。code

解決方案：WinForm控件的Region屬性限制顯示區域。至關於WPF的Clip。 示例以下：orm

GraphicsPath path = new GraphicsPath() { FillMode = FillMode.Winding };
path.StartFigure();
path.AddEllipse(new System.Drawing.Rectangle(0, 0, (int)182, (int)182));
path.AddRectangle(new System.Drawing.Rectangle(90, 0, 90, 90));
path.CloseFigure();
this.WinformRtx.Region = new Region(path);

個人測試效果，WPF中用Image加載了一張星空圖，右上角放置了WindowsFormHost內容。我對其進行了顯示區域限制。blog

3：問題三ip

兩個WindowsFormHost疊加時，WindowsFormHost對於png的背景圖不支持透明。以下圖：

<Grid x:Name="GdMain">
    <Image x:Name="ImgSky" Source="Sky.jpg" Stretch="Fill"/>

    <!--加載Winform的WebBrowser-->
    <WindowsFormsHost Background="White">
        <Winfrm:WebBrowser x:Name="WinFrmWebBrowser"/>
    </WindowsFormsHost>

    <WindowsFormsHost Width="182" Height="182" HorizontalAlignment="Right" 
                      x:Name="WinfrmHostOverlayer" VerticalAlignment="Top" 
                      Background="Transparent">
        <Winfrm:Panel x:Name="WinfrmPanel"/>
    </WindowsFormsHost>
</Grid>

能夠看到右上角的png邊框分明（實時上我放的是一張三個角均爲透明的圓形png）。若對右上角的Winform Panel進行裁剪。

裁剪完後，下面一層的WindowsFormHost也被裁了，露出了我用Image加載的星空底圖，以下圖：

解決方案：將要加載的Winform控件放在一塊兒，能夠是在同一個Winform Panel下面，這時在進行裁剪就不會有問題。如

<Grid x:Name="GdMain">
    <Image x:Name="ImgSky" Source="Sky.jpg" Stretch="Fill"/>
    <WindowsFormsHost HorizontalAlignment="Right" 
                      x:Name="WinfrmHostOverlayer" VerticalAlignment="Top" 
                      Background="Transparent">
        <Winfrm:Panel x:Name="WinfrmPanel">
            <!--<Winfrm:WebBrowser x:Name="WinFrmWebBrowser"/>-->
            <!--<Winfrm:Panel x:Name="WinFrmSubPanel"/>-->
        </Winfrm:Panel>
    </WindowsFormsHost>
</Grid>