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="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>