WPF WebBrowser+TabControl MVVM模式简单应用提供源码下载

小半 • 2022年5月21日下午10:02 • .NET • 阅读 248

源代码下载

这个程序是TabControl和Webbrowser的练手小程序

可达到练手目的有：

MVVM设计模式的基本使用
Binding（包括相对源[RelativeSource]绑定）的基本使用
IE COM的基本使用
委托和事件基本使用

程序可实现的效果：

控制Webbrowser新窗口在TabItem中
TabItem的标头为网页的标题
TabItem可关闭网页
新开网页自动在前

效果GIF

技术要点：

Xaml

<Window x:Class="WPF_WebBrowser_TabControl.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:WPF_WebBrowser_TabControl"
        xmlns:data="clr-namespace:WPF_WebBrowser_TabControl.ViewModel"
        mc:Ignorable="d"
        Title="WPF WebBrowser 简易应用" Height="450" Width="800">
    <Window.DataContext>
        <data:WebPageModel/>
    </Window.DataContext>
    <Grid>
        <!--控制TabControl的页面选择要通过SelectedItem的来选择
        注意ViewModel中要实现INotifyPropertyChange接口-->
        <TabControl   SelectedItem="{Binding Index}"  ItemsSource="{Binding WebBrowser}" Grid.ColumnSpan="2"  x:Name="TB">
            <!--此处为TabItem的ItemTemplate-->
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <ContentControl   Content="{Binding Web }"/>
                </DataTemplate>
            </TabControl.ContentTemplate>
            <!--此处为TabItem的Header的模板-->
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel   Orientation="Horizontal">
                        <TextBlock Foreground="Red"  Text="{Binding  Title}"/>
                       <!--Button的命令绑定是相对源，使用路径来获取
                        因为TabControl的默认绑定源是Webbrowsr而不是Winodw的Datacontext-->
                        <Button CommandParameter="{Binding   Index}" Command="{Binding RelativeSource={ RelativeSource Mode=FindAncestor,AncestorLevel=1,AncestorType=Window}, Path=DataContext.CloseTab}" 
              Height="15" Margin="20,0,0,0">
                            <Image  Source="/WPF WebBrowser TabControl;component/Image/取消.png"  />
                        </Button>
                    </StackPanel>
                </DataTemplate>
            </TabControl.ItemTemplate>
        </TabControl>
    </Grid>
</Window>