WPF如何实现一个漂亮的页签导航UI-白红宇

原文:

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

1 UI设计

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

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

2 UI切图

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

3 WPF UI布局实现

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

1 
      
        11     
       
         12         
        
          13             
         
           14                 
           15                 
           16             
          17             
         
           18                 
           19                 
           20             
          21             
          22             
         
           23                 
          
            24                     
            25                 
           26  27                 
          
            28                     
           
             29 
             30 
             31 
            32                     
           
             33 
             34 
             35 
             36 
            37                     
            38                     
            39  40                     
            41  42                     
            43                     
            44                     
            45                     
            46  47                     
            48                     
            49  50                 
           51             
          52             
          53             
         
           54                 
          
            55                     
           
             56 
            
              57 
              58 
             59 60 
            
              61 
              62 
             
               63 
               64 
              65 
              66 
             
               67 
               68 
              69 
              70 
             
               71 
               72 
              73 
              74 
             
               75 
               76 
              77 
              78 
             
               79 
               80 
              81 
              82 
             
               83 
               84 
              85 
              86 
             
               87 
               88 
              89 
              90 
             
               91 
               92 
              93 
              94 
             
               95 
               96 
              97 
              98 
             
               99 
              100 
             101 
             102 
             
              103 
              104 
             105 
            106 107 
           108                     
           109                     
           
            110 
            
             111 
             112 
            113 
            114 
            
             115 
             116 
             
              117 
              118 
             119 
             120 
             
              121 
              122 
             123 
             124 
             
              125 
              126 
             127 
             128 
             
              129 
              130 
             131 
             132 
             
              133 
              134 
             135 
             136 
             
              137 
              138 
             139 
             140 
             
              141 
              142 
             143 
             144 
             
              145 
              146 
             147 
             148 
             
              149 
              150 
             151 
             152 
             
              153 
              154 
             155 
             156 
             
              157 
              158 
             159 
            160 161 
            162 163 
           164 165                     
           
            166 
            
             167 
             168 
            169 
            170 
            
             171 
             172 
             
              173 
              174 
             175 
             176 
             
              177 
              178 
             179 
             180 
             
              181 
              182 
             183 
             184 
             
              185 
              186 
             187 
             188 
             
              189 
              190 
             191 
             192 
             
              193 
              194 
             195 
             196 
             
              197 
              198 
             199 
             200 
             
              201 
              202 
             203 
             204 
             
              205 
              206 
             207 
             208 
             
              209 
              210 
             211 
             212 
             
              213 
              214 
             215 
            216 217 
            218 
           219 220                     
           
            221 
            
             222 
             223 
            224 
            225 
            
             226 
             227 
             
              228 
              229 
             230 
             231 
             
              232 
              233 
             234 
             235 
             
              236 
              237 
             238 
             239 
             
              240 
              241 
             242 
             243 
             
              244 
              245 
             246 
             247 
             
              248 
              249 
             250 
             251 
             
              252 
              253 
             254 
             255 
             
              256 
              257 
             258 
             259 
             
              260 
              261 
             262 
             263 
             
              264 
              265 
             266 
             267 
             
              268 
              269 
             270 
            271 272 
            273 
           274 275                     
           
            276 
            
             277 
             278 
            279 
            280 
            
             281 
             282 
             
              283 
              284 
             285 
             286 
             
              287 
              288 
             289 
             290 
             
              291 
              292 
             293 
             294 
             
              295 
              296 
             297 
             298 
             
              299 
              300 
             301 
             302 
             
              303 
              304 
             305 
             306 
             
              307 
              308 
             309 
             310 
             
              311 
              312 
             313 
             314 
             
              315 
              316 
             317 
             318 
             
              319 
              320 
             321 
             322 
             
              323 
              324 
             325 
            326 327 
            328 
           329 330 331                 
          332             
         333             
         334             
         
          335                 
          336                 
          
           337                     
           
            338 
            339 
           340                 
          341 342                 
          343                 
          344                 345                 
          348             
         349             
         350 351         
        352     
       353

View Code

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

1 
      
         4     
         5     
         6     
        40     
        49     
       
         50         
         51         
         52         
         53         
         54     
        55     
       
         56         
         57         
         58         
         59         
         60     
        61     
        62     
        63     
        64     
        65     
       111                             112                            113                         114                         
       115                         
       
        116                             
        
         117                                 
         
          118                                     
          119                                     
          120                                     
          121                                     
          122                                 
         123                             
        124                         
       125                     126                     
       
        127                         
        128                         
        
         129                             
         130                             
         131                         
        132                         
        
         133                             
         
          134                                 
          135                                 
          136                             
         137                             
         138                             
         
          139                                 
          
           140                                     
           
            141 
            142 
            143 
            144 
            145 
           146                                 
          147                             
         148                         
        149                         
        150                     
       151                 152             153         154     155

View Code

4 WPF逻辑实现

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

　1）窗体拖动；

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

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

1         private void Label_MouseLeftButtonDown_2(object sender, MouseButtonEventArgs e)2         {3             this.pageContainer.Source = new Uri("pages/Page_Chart2.xaml", UriKind.RelativeOrAbsolute);4         }

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

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

1         private bool __isLeftHide = false; 2         private void spliter_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 3         { 4             //显示和隐藏 5             __isLeftHide =! __isLeftHide; 6             if (__isLeftHide) 7             { 8                 this.gridForm.ColumnDefinitions[0].Width = new GridLength(1d); 9             }10             else11             {12                 this.gridForm.ColumnDefinitions[0].Width = new GridLength(200d);13             }14           15         }

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

5 最终效果

　　最终的效果截图如下（感谢园友斧正：下图的正太分布是正态分布哈！）：

6 未实现的功能

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

7 代码开源

　　此代码进行开源，代码托管到GitHub上，

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

8 完善

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

View Code

另外将日期控件进行了样式完善，这里对TextBox控件利用自定义样式将其设置为具有可以下拉选择日期的功能。