采取C#WPF实现自己的网页浏览器(自定义Tab控件)
欢迎大家提出意见,一起讨论!
转载请标明是引用于 http://blog.csdn.net/chenyujing1234
源码下载: http://www.rayfile.com/zh-cn/files/459fa05c-bf69-11e1-b0ff-0015c55db73d/
编译平台:VS2008 + .Net Framework 3.5
语言: C#
此博客的目的:
以浏览器程序的实现,学习自定义TabControl的方法,使之能实现系统Tab不具有的功能:
(1)排列方式扩展为:Top、Bottom、Left、Right
(2)增加对TabItem的事件处理
(3)
一、浏览器实现
效果图:
1、启动窗口显示两个按钮
它们的处理函数对应是去创建窗口WindowUsingItemProperty或WindowUsingItemsSourceProperty
接下来的设计我们以WindowUsingItemProperty为例来说明.
2、加入自定义控件Wpf.TabControl
在WindowUsingItemProperty窗口的界面设计文件WindowUsingItemProperty.xaml中加入自定义控件Wpf.TabControl.
3、浏览器界面控件布局
首先将界面分为三行:
3、1 每一行加入TextBlock与TextBox,用于输入网址
当输入网址确认后的处理是获得浏览器对象并让浏览器导航到指定的网址
而浏览器的获得是通过当前TabItem来得到的
3、2 根据自定义控件TabControl的规则加入节点
请注意空间 r: 的原因。
3、2、1 对TabControl中的TabItem显示的三种状态进行设置。
目的是为了看起来像IE7的样子。
3、2、2 加入TabItem
TabItem中包括了对Header、Icon的设置,及在Item中的内容中包裹WebI浏览器
在 3、1 中我们看到GetCurrentWebBrowser的获得有两个步骤:
(1)获得选中的TabItem中的Content,并转化为WindowFormsHost
(2)获得WindowFormsHost的Child,来得到浏览器对象
3、2、2、1 浏览器DocumentTitleChanged、Navigated两个事件的处理
Browser_DocumentTitleChanged主要是更新TabItems的头特性、增加一个Icon到tabItem、把浏览器的DocumentTitle加入到tabItem中的Head中
Browser_Navigated主要是将浏览器当前的网址传给textBox
二、自定义控件Wpf.TabControl
1、控件外观设计(在Generic.xaml文件中)
1、1 整个文件以关键字ResourceDictionary开始
它定义了此控件的空间名字。
1、2 TabControl 样式, 定义 TabControl 外表的样式
在Test工程中若用到TabControl控件,那么得采用 clr-namespace:Wpf.Controls::TabControl的形式;
引用到TabControl 控件中的属性时,得采用类似clr-namespace:Wpf.Controls::TabControl.TabItemNormalBackground的形式。
1、2、1 控件Template 的设计
如上图所示,控件的Template属性默认为TabControlTabPlacementTop.
它被分为两行五列,总共有六种样式(Top、Bottom、Left、Right)。以TabControlTabPlacementTop为例,如下:
TabControlTabPlacementTop里有六样元素:
ToggleButton:显示一个context 菜单,这个菜单显示所有的TabItem;
新建TabItem的按钮:
左RepeatButton:用来在view中向左滚动TabItems
ScrollViewer: 存放TabItem用的滚动面板
右RepeatButton:用来在view中向右滚动TabItems
内容面板:
外表看来是这样:
XAML中代码如下:
1、3 定义TabItem属性、样式
定义属性:
定义TabItem节点的控件模板,里面是一个Border,Border里分三列,分别放Icon、Header 和按钮。
可以看出Icon是在一个ContentPresenter里,通过Content="{TemplateBinding Icon}"绑定节点名字为icon;
Header是在一个Border里,通过Content="{TemplateBinding Header}"绑定节点名字为Header。
2、 TabConrol逻辑及数据设计
2、1 为节点TabControl中的Template属性加载处理函数。
C#提供了绑定的接口,即重载OnApplyTemplate函数。
通过this.Template.FindName找到对应TabControl中的Template里的5个元素。