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

源代码下载

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

可达到练手目的有：

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

程序可实现的效果：

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

效果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="" Width="">

    <Window.DataContext>

        <data:WebPageModel/>

    </Window.DataContext>

    <Grid>

        <!--控制TabControl的页面选择要通过SelectedItem的来选择

        注意ViewModel中要实现INotifyPropertyChange接口-->

        <TabControl   SelectedItem="{Binding Index}"  ItemsSource="{Binding WebBrowser}" Grid.ColumnSpan=""  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="" Margin="20,0,0,0">

                            <Image  Source="/WPF WebBrowser TabControl;component/Image/取消.png"  />

                        </Button>

                    </StackPanel>

                </DataTemplate>

            </TabControl.ItemTemplate>

        </TabControl>

    </Grid>

</Window>