最近一直在研究WPF这个微软提供的用于设计软件产品界面的类库,WPF有一个明显的好处,就是界面设计与界面功能代码编写完全分离,而且从真正意义上实现了数据驱动程序的原理,对于目前正在做软件产品设计的产品设计师们,是一个很大的福音啊.
在正式开始介绍本章内容之前,请大家确保已经准备好了以下工具:
1. Microsoft Express Blend4
2. Microsoft Visual Studio 2010
3. 一款XML文件的编辑器工具(网上好多,其实用记事本就可以编辑)
在大家准备好以上工具之后,就开始准备整个项目的神奇之旅吧!!!
步骤一:
打开Blend4工具,建立一个工程(注意选择WPF应用程序),选择.Net FrameWork的版本为4.0
步骤二:
在Blend4工具上的"控件"项中,分别像Form中拖入一个Menu菜单并命名为"SysMenu",一个TreeView树型控件并命名为"SysTreeView",以及一个TabControl控件,并命名为"SysTabControl".
步骤三:
打开编辑XML文件的工具,分别编写供Menu以及TreeView使用的XML文件,分别命名为Menu.xml以及TreeView.xml
1. Menu.xml
<?xml version="1.0" encoding="utf-8" ?>
<menu>
<menuitem Name="File">
<menuitem Name="Open" />
<menuitem Name="Open Recent" />
<menuitem Name="Save" />
<menuitem Name="Exit" />
</menuitem>
<menuitem Name="Tool">
<menuitem Name="Verify" />
<menuitem Name="Sign" />
<menuitem Name="Compare" />
<menuitem Name="Check" />
</menuitem>
</menu>
2. TreeView.xml
<?xml version="1.0" encoding="utf-8" ?>
<item>
<viewitem name="Management">
<viewitem name="First">
<viewitem name="information" />
<viewitem name="download file" />
<viewitem name="delete file" />
<viewitem name="execute file" />
</viewitem>
<viewitem name="Second">
<viewitem name="information" />
<viewitem name="download file" />
<viewitem name="delete file" />
<viewitem name="execute file" />
</viewitem>
</viewitem>
</item>
步骤四:
修改MainWindow.xaml文件中的Menu以及TreeView控件中的Item显示模板,具体修改部分为:
<Menu Name="SysMenu" Height="31" VerticalAlignment="Top" Style="{DynamicResource MFaceStyle}">
<Menu.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding XPath=menuitem}">
<TextBlock Text="{Binding XPath=@Name}" />
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
</Menu>
<TreeView Name="SysTreeView" HorizontalAlignment="Left" Margin="4,35,0,4" Width="200">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding XPath=viewitem}">
<TextBlock Text="{Binding XPath=@name}" MouseLeftButtonDown="TextBlock_MouseLeftButtonDown"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
步骤五:
修改MainWindow.xaml.cs中内容
1. 将XML文件作为数据源绑定到Menu中
private void LoadMenuItem()
{
string xmlpath = Directory.GetCurrentDirectory() + "\\Menu.xml";
XmlDocument xml = new XmlDocument();
xml.Load(xmlpath);
XmlDataProvider xdp = new XmlDataProvider();
xdp.Document = xml;
xdp.XPath = @"/menu/menuitem";
this.SysMenu.DataContext = xdp;
this.SysMenu.SetBinding(Menu.ItemsSourceProperty, new Binding());
}
2. 将XML文件作为数据源绑定到TreeView中
private void LoadTreeView()
{
string xmlpath = Directory.GetCurrentDirectory() + "\\TreeView.xml";
XmlDocument xml = new XmlDocument();
xml.Load(xmlpath);
XmlDataProvider xdp = new XmlDataProvider();
xdp.Document = xml;
xdp.XPath = @"/item/viewitem";
this.SysTreeView.DataContext = xdp;
this.SysTreeView.SetBinding(TreeView.ItemsSourceProperty, new Binding());
}
3. 增加选择TreeView中的Item后,修改TabControl控件中Tab的标题
private void TextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
TextBlock tb = (TextBlock)sender;
if (tb.Text == "information")
{
((TabItem)this.SysTabControl.Items[0]).Header = tb.Text;
}
else if (tb.Text == "download file")
{
((TabItem)this.SysTabControl.Items[0]).Header = tb.Text;
}
else if (tb.Text == "delete file")
{
((TabItem)this.SysTabControl.Items[0]).Header = tb.Text;
}
else if (tb.Text == "execute file")
{
((TabItem)this.SysTabControl.Items[0]).Header = tb.Text;
}
else
{
((TabItem)this.SysTabControl.Items[0]).Header = "初始信息";
}
}
4. 增加初始化内容
public MainWindow()
{
this.InitializeComponent();
// 在此点下面插入创建对象所需的代码。
LoadMenuItem();
LoadTreeView();
}
步骤六:
保存Blend4编译的工程文件后,使用VS2010打开工程并编译,就能看到效果啦!!!!!!