最近看到一个比较漂亮的UI主界面，该UI是用左边的页签进行导航，比较有特色，就想着尝试用WPF来实现一下。经过一番尝试，基本上将UI设计图的效果用WPF程序进行了实现。下面介绍一下主要的思路：

　该UI的PSD设计图效果如下：

　　UI结构分析：先可以把UI分成上下两个区域，上面是一个区域放置一些appName，用户信息和配置按钮等，下面的再分成竖向的页签导航区域和内容区。但从WPF程序实现上来说，可以有多种区域划分方法，每个人的划分方法不同。

　　内容区域的图片不做切图，它会动态根据左边的导航菜单的配置动态进行加载内容。本文只实现主界面UI框架。在Photoshop中可以在图片所在图层进行重命名，例如A的图层有一个按钮图标，可以将其命名为A.png（注意之前需要勾选Photoshop的生成【图片资源】项目），那么就可以在PSD文件同级目录中生成一个同名的文件夹，里面就有A.png的图标了！

　　PSD设计的UI需要转换成WPF程序，必须要将其UI结构用WPF的布局进行重新梳理，我的布局划分（主要是Grid)代码如下所示：

1 <Window 加载其他的xaml窗体,但是必须frm.show才能显示，有闪烁 346 <ContentControl Margin="2" ></ContentControl>

　　主界面中用 AllowsTransparency="True" WindowStyle="None" Background="{x:Null}" 对窗体的边框进行隐藏。坐标的页签是tabControl控件，但是必须要重新定义其Style样式：Style="{DynamicResource TabItemStyle}，其中TabItemStyle的代码如下：

1 <ResourceDictionary

　UI界面有了，还必须附加一些业务逻辑：

　1）窗体拖动；

Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 2 { 3 this.DragMove(); 4 }

   2）单击页签菜单项目，进行导航到相应的页面；

Label_MouseLeftButtonDown_2(object sender, MouseButtonEventArgs e) 2 { , UriKind.RelativeOrAbsolute); 4 }

　　在主界面中有一个名为pageContainer的Frame控件，它能加载Page类型的界面(注意不是window).详细页面的正太分布图形用的Oxyplot控件。

　3）坐标的页签菜单栏可以隐藏和显示

__isLeftHide = false; spliter_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 3 { __isLeftHide =! __isLeftHide; 6 if (__isLeftHide) 7 { 8 this.gridForm.ColumnDefinitions[0].Width = new GridLength(1d); 9 } { 12 this.gridForm.ColumnDefinitions[0].Width = new GridLength(200d); 13 } 14 15 }

　　由于Grid没有visiable属性，我这里获取页签所在的Grid列，然后设置其width属性为1，将其隐藏。

　　最终的效果截图如下：

　　左边菜单的颜色，想着不选中显示RGB(0,209,229)，选中显示RGB(51,51,51)或者黑色。但尝试了一些方法还未实现。若有园友知道思路的话，欢迎指教！

　　此代码进行开源，代码托管到GitHub上，https://github.com/JackWangCUMT/WPFTabNavigation

-----------------------------------------------------------------------------------------------------------------

　　上面提到字体无法变更的问题，经过查阅资料已经解决，这里主要用到触发器设置中的TargetName属性，将设置的值应用到名为TargetName设置的控件对应属性上：