WPF如何实现一个漂亮的页签导航UI

2019-11-14 13:48:53

字体：大中小

来源：转载

供稿：网友

最近看到一个比较漂亮的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 <Window  2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/PResentation"  3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  4           xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"  5           x:Class="WpfTabNavigation.MainWindow"  6         Title="MainWindow" Height="610" Width="880"  7          AllowsTransparency="True" WindowStyle="None"   8         Background="{x:Null}" MouseLeftButtonDown="Window_MouseLeftButtonDown"  9          10         > 11     <Grid Background="Black" d:IsHidden="True"> 12         <Grid x:Name="gridForm" d:IsHidden="True"> 13             <Grid.RowDefinitions> 14                 <RowDefinition Height="60" /> 15                 <RowDefinition Height="Auto" /> 16             </Grid.RowDefinitions> 17             <Grid.ColumnDefinitions> 18                 <ColumnDefinition Width="200" x:Name="gridFormLeft"/> 19                 <ColumnDefinition Width="*" /> 20             </Grid.ColumnDefinitions> 21             <!-- toolbar--> 22             <StackPanel  Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Margin="1,1,1,0"  Orientation="Horizontal" d:IsHidden="True" > 23                 <StackPanel.Background> 24                     <ImageBrush ImageSource="images/toolbarbg.png" Stretch="UniformToFill"/> 25                 </StackPanel.Background> 26  27                 <Grid Width="878" d:IsHidden="True"> 28                     <Grid.RowDefinitions> 29                         <RowDefinition Height="36" /> 30                         <RowDefinition Height="Auto" /> 31                     </Grid.RowDefinitions> 32                     <Grid.ColumnDefinitions> 33                         <ColumnDefinition Width="200" /> 34                         <ColumnDefinition Width="0.8*" /> 35                         <ColumnDefinition Width="*" /> 36                     </Grid.ColumnDefinitions> 37                     <TextBlock x:Name="appName" FontWeight="Bold" FontSize="22"  Margin="8,2,2,2" Text="WPF DashBoard"   Grid.Column="0" Grid.Row="0"    VerticalAlignment="Center" d:IsHidden="True" /> 38                     <TextBlock x:Name="authorName" FontWeight="Bold" FontSize="10"  Margin="8,0,2,8" Text="JackWang-Cumt@VEVb.com"  Foreground="#FF463E3E" Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" d:IsHidden="True" /> 39  40                     <TextBlock x:Name="userInfo" FontWeight="Bold" FontSize="16"  Margin="60,18,18,18" Text="Welcome to Admin"  Foreground="#FF333333" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Center" d:IsHidden="True" /> 41  42                     <DatePicker x:Name="datePick"   Margin="22.4,18,194.4,18"   Foreground="#FF333333" Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Center" Width="160" d:IsHidden="True"/> 43                     <Image Source="images/email.png"  Stretch="Uniform" Margin="0,15,112,19" Grid.Column="2" Grid.Row="0" Grid.RowSpan="2"  Width="26" HorizontalAlignment="Right" d:IsHidden="True"/> 44                     <Image Source="images/notify.png"  Stretch="Uniform" Margin="254.4,9,102.4,10.2" Grid.Column="2" Grid.Row="0" Height="20" Width="20" d:IsHidden="True"/> 45                     <TextBlock x:Name="notifyCount"  FontSize="9"  Margin="259.4,12,99.4,15.2" Grid.Column="2" Grid.Row="0"  Text="18"  Foreground="#FFFFFFFF" VerticalAlignment="Center" Width="18" d:IsHidden="True"/> 46  47                     <Image Source="images/settings.png"  Stretch="Uniform" Margin="0,15,72,19" Grid.Column="2" Grid.Row="0" Height="26" Width="30" HorizontalAlignment="Right" Grid.RowSpan="2" d:IsHidden="True"  /> 48                     <Image x:Name="Logout"  MouseLeftButtonDown="Logout_MouseLeftButtonDown_1"  Source="images/logout.png"  Stretch="Uniform" Margin="0,15,36,19" Grid.Column="2" Grid.Row="0" Height="26" Width="30" HorizontalAlignment="Right" Grid.RowSpan="2" Cursor="Hand" d:IsHidden="True"/> 49  50                 </Grid> 51             </StackPanel> 52             <!--end toolbar--> 53             <StackPanel  x:Name="LeftBar" Background="#FF333333" Margin="0,0.2,0,0" Grid.Column="0" Grid.Row="1" d:IsHidden="True" > 54                 <TabControl  x:Name="LeftTabControl" TabStripPlacement="Left" Background="#FF00D1E5" Height="548" d:IsHidden="True"> 55                     <TabItem Header="Home" Height="80" Margin="0,0,-3,0" Width="80" FontWeight="Bold" Style="{DynamicResource TabItemStyle}" TextOptions.TextFormattingMode="Display" MouseMove="TabItem_MouseMove_1" d:IsHidden="True"> 56                         <TabItem.Background> 57                             <ImageBrush ImageSource="images/homeicon.png" /> 58                         </TabItem.Background> 59  60                         <StackPanel Margin="2,6,2,2" d:IsHidden="True" > 61                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" MouseLeftButtonDown="Label_MouseLeftButtonDown_1" d:IsHidden="True"/> 62                             <Border d:IsHidden="True" > 63                                 <Image Source="images/line.png" d:IsHidden="True"/> 64                             </Border> 65                             <Label Content="Web Design" Foreground="White" Margin="0,6,0,6" MouseLeftButtonDown="Label_MouseLeftButtonDown_2" d:IsHidden="True"/> 66                             <Border d:IsHidden="True" > 67                                 <Image Source="images/line.png" d:IsHidden="True"/> 68                             </Border> 69                             <Label Content="Icon Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/> 70                             <Border d:IsHidden="True" > 71                                 <Image Source="images/line.png" d:IsHidden="True"/> 72                             </Border> 73                             <Label Content="PSD Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/> 74                             <Border d:IsHidden="True" > 75                                 <Image Source="images/line.png" d:IsHidden="True"/> 76                             </Border> 77                             <Label Content="Line Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/> 78                             <Border d:IsHidden="True" > 79                                 <Image Source="images/line.png" d:IsHidden="True"/> 80                             </Border> 81                             <Label Content="Paper Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/> 82                             <Border d:IsHidden="True" > 83                                 <Image Source="images/line.png" d:IsHidden="True"/> 84                             </Border> 85                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/> 86                             <Border d:IsHidden="True" > 87                                 <Image Source="images/line.png" d:IsHidden="True"/> 88                             </Border> 89                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/> 90                             <Border d:IsHidden="True" > 91                                 <Image Source="images/line.png" d:IsHidden="True"/> 92                             </Border> 93                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/> 94                             <Border d:IsHidden="True" > 95                                 <Image Source="images/line.png" d:IsHidden="True"/> 96                             </Border> 97                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/> 98                             <Border d:IsHidden="True" > 99                                 <Image Source="images/line.png" d:IsHidden="True"/>100                             </Border>101                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>102                             <Border d:IsHidden="True" >103                                 <Image Source="images/line.png" d:IsHidden="True"/>104                             </Border>105                         </StackPanel>106 107                     </TabItem>108                     <!-- Margin="0,0,-3,0" 中的-3为了消除右边的边框-->109                     <TabItem Header="Projects" Height="80" Margin="0,0,-3,0" Width="80" FontWeight="Bold" Style="{DynamicResource TabItemStyle}" TextOptions.TextFormattingMode="Display" d:IsHidden="True">110                         <TabItem.Background>111                             <ImageBrush ImageSource="images/projects.png" />112                         </TabItem.Background>113                         <!--内容区-->114                         <StackPanel Margin="2,6,2,2" d:IsHidden="True" >115                             <Label Content="CSS Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>116                             <Border d:IsHidden="True" >117                                 <Image Source="images/line.png" d:IsHidden="True"/>118                             </Border>119                             <Label Content="JS Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>120                             <Border d:IsHidden="True" >121                                 <Image Source="images/line.png" d:IsHidden="True"/>122                             </Border>123                             <Label Content="HTML Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>124                             <Border d:IsHidden="True" >125                                 <Image Source="images/line.png" d:IsHidden="True"/>126                             </Border>127                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>128                             <Border d:IsHidden="True" >129                                 <Image Source="images/line.png" d:IsHidden="True"/>130                             </Border>131                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>132                             <Border d:IsHidden="True" >133                                 <Image Source="images/line.png" d:IsHidden="True"/>134                             </Border>135                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>136                             <Border d:IsHidden="True" >137                                 <Image Source="images/line.png" d:IsHidden="True"/>138                             </Border>139                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>140                             <Border d:IsHidden="True" >141                                 <Image Source="images/line.png" d:IsHidden="True"/>142                             </Border>143                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>144                             <Border d:IsHidden="True" >145                                 <Image Source="images/line.png" d:IsHidden="True"/>146                             </Border>147                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>148                             <Border d:IsHidden="True" >149                                 <Image Source="images/line.png" d:IsHidden="True"/>150                             </Border>151                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>152                             <Border d:IsHidden="True" >153                                 <Image Source="images/line.png" d:IsHidden="True"/>154                             </Border>155                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>156                             <Border d:IsHidden="True" >157                                 <Image Source="images/line.png" d:IsHidden="True"/>158                             </Border>159                         </StackPanel>160 161                         <!--end 内容区-->162 163                     </TabItem>164 165                     <TabItem Header="Tasks" Height="80" Margin="0,0,-3,0" Width="80" FontWeight="Bold" Style="{DynamicResource TabItemStyle}" TextOptions.TextFormattingMode="Display" d:IsHidden="True">166                         <TabItem.Background>167                             <ImageBrush ImageSource="images/taskicon.png" />168                         </TabItem.Background>169                         <!--内容区-->170                         <StackPanel Margin="2,6,2,2" d:IsHidden="True" >171                             <Label Content="AI Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>172                             <Border d:IsHidden="True" >173                                 <Image Source="images/line.png" d:IsHidden="True"/>174                             </Border>175                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>176                             <Border d:IsHidden="True" >177                                 <Image Source="images/line.png" d:IsHidden="True"/>178                             </Border>179                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>180                             <Border d:IsHidden="True" >181                                 <Image Source="images/line.png" d:IsHidden="True"/>182                             </Border>183                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>184                             <Border d:IsHidden="True" >185                                 <Image Source="images/line.png" d:IsHidden="True"/>186                             </Border>187                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>188                             <Border d:IsHidden="True" >189                                 <Image Source="images/line.png" d:IsHidden="True"/>190                             </Border>191                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>192                             <Border d:IsHidden="True" >193                                 <Image Source="images/line.png" d:IsHidden="True"/>194                             </Border>195                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>196                             <Border d:IsHidden="True" >197                                 <Image Source="images/line.png" d:IsHidden="True"/>198                             </Border>199                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>200                             <Border d:IsHidden="True" >201                                 <Image Source="images/line.png" d:IsHidden="True"/>202                             </Border>203                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>204                             <Border d:IsHidden="True" >205                                 <Image Source="images/line.png" d:IsHidden="True"/>206                             </Border>207                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>208                             <Border d:IsHidden="True" >209                                 <Image Source="images/line.png" d:IsHidden="True"/>210                             </Border>211                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>212                             <Border d:IsHidden="True" >213                                 <Image Source="images/line.png" d:IsHidden="True"/>214                             </Border>215                         </StackPanel>216 217                         <!--end 内容区-->218                     </TabItem>219 220                     <TabItem Header="Calendar" Height="80" Margin="0,0,-3,0" Width="80" FontWeight="Bold" Style="{DynamicResource TabItemStyle}" TextOptions.TextFormattingMode="Display" d:IsHidden="True">221                         <TabItem.Background>222                             <ImageBrush ImageSource="images/calendaricon.png" />223                         </TabItem.Background>224                         <!--内容区-->225                         <StackPanel Margin="2,6,2,2" d:IsHidden="True" >226                             <Label Content="DOC Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>227                             <Border d:IsHidden="True" >228                                 <Image Source="images/line.png" d:IsHidden="True"/>229                             </Border>230                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>231                             <Border d:IsHidden="True" >232                                 <Image Source="images/line.png" d:IsHidden="True"/>233                             </Border>234                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>235                             <Border d:IsHidden="True" >236                                 <Image Source="images/line.png" d:IsHidden="True"/>237                             </Border>238                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>239                             <Border d:IsHidden="True" >240                                 <Image Source="images/line.png" d:IsHidden="True"/>241                             </Border>242                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>243                             <Border d:IsHidden="True" >244                                 <Image Source="images/line.png" d:IsHidden="True"/>245                             </Border>246                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>247                             <Border d:IsHidden="True" >248                                 <Image Source="images/line.png" d:IsHidden="True"/>249                             </Border>250                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>251                             <Border d:IsHidden="True" >252                                 <Image Source="images/line.png" d:IsHidden="True"/>253                             </Border>254                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>255                             <Border d:IsHidden="True" >256                                 <Image Source="images/line.png" d:IsHidden="True"/>257                             </Border>258                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>259                             <Border d:IsHidden="True" >260                                 <Image Source="images/line.png" d:IsHidden="True"/>261                             </Border>262                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>263                             <Border d:IsHidden="True" >264                                 <Image Source="images/line.png" d:IsHidden="True"/>265                             </Border>266                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>267                             <Border d:IsHidden="True" >268                                 <Image Source="images/line.png" d:IsHidden="True"/>269                             </Border>270                         </StackPanel>271 272                         <!--end 内容区-->273                     </TabItem>274 275                     <TabItem Header="Statistics" Height="80" Margin="0,0,-3,0" Width="80" FontWeight="Bold" Style="{DynamicResource TabItemStyle}" TextOptions.TextFormattingMode="Display" d:IsHidden="True">276                         <TabItem.Background>277                             <ImageBrush ImageSource="images/graphicon.png" />278                         </TabItem.Background>279                         <!--内容区-->280                         <StackPanel Margin="2,6,2,2" d:IsHidden="True" >281                             <Label Content="JD Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>282                             <Border d:IsHidden="True" >283                                 <Image Source="images/line.png" d:IsHidden="True"/>284                             </Border>285                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>286                             <Border d:IsHidden="True" >287                                 <Image Source="images/line.png" d:IsHidden="True"/>288                             </Border>289                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>290                             <Border d:IsHidden="True" >291                                 <Image Source="images/line.png" d:IsHidden="True"/>292                             </Border>293                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>294                             <Border d:IsHidden="True" >295                                 <Image Source="images/line.png" d:IsHidden="True"/>296                             </Border>297                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>298                             <Border d:IsHidden="True" >299                                 <Image Source="images/line.png" d:IsHidden="True"/>300                             </Border>301                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>302                             <Border d:IsHidden="True" >303                                 <Image Source="images/line.png" d:IsHidden="True"/>304                             </Border>305                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>306                             <Border d:IsHidden="True" >307                                 <Image Source="images/line.png" d:IsHidden="True"/>308                             </Border>309                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>310                             <Border d:IsHidden="True" >311                                 <Image Source="images/line.png" d:IsHidden="True"/>312                             </Border>313                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>314                             <Border d:IsHidden="True" >315                                 <Image Source="images/line.png" d:IsHidden="True"/>316                             </Border>317                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>318                             <Border d:IsHidden="True" >319                                 <Image Source="images/line.png" d:IsHidden="True"/>320                             </Border>321                             <Label Content="Graphic Design" Foreground="White" Margin="0,6,0,6" d:IsHidden="True"/>322                             <Border d:IsHidden="True" >323                                 <Image Source="images/line.png" d:IsHidden="True"/>324                             </Border>325                         </StackPanel>326 327                         <!--end 内容区-->328                     </TabItem>329 330 331                 </TabControl>332             </StackPanel>333             <!--end tab-->334             <StackPanel  Grid.Column="1" Grid.Row="1" Background="White" Margin="0,0,1,0" Orientation="Horizontal" d:IsHidden="True">335                 <!-- Expand button-->336                 <Border x:Name="spliter" Width="32" Height="64" Margin="-10" Cursor="Hand" MouseLeftButtonDown="spliter_MouseLeftButtonDown" d:IsHidden="True">337                     <Border.Background>338                         <ImageBrush ImageSource="images/panelexpand.png" Stretch="UniformToFill"/>339                     </Border.Background>340                 </Border>341 342                 <!--end Expand button-->343                 <!--加载其他的page xaml-->344                 <Frame x:Name="pageContainer" Margin="33,18,33,18" ScrollViewer.CanContentScroll="True" NavigationUIVisibility="Hidden" d:IsHidden="True"  />345                 <!--加载其他的xaml窗体,但是必须frm.show才能显示，有闪烁346                 <ContentControl Name="frmContainter" Margin="2" ></ContentControl>347                 -->348             </StackPanel>349             <!--end Content-->350 351         </Grid>352     </Grid>353 </Window>

View Code

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

  1 <ResourceDictionary  2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   3     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" mc:Ignorable="d">  4     <SolidColorBrush x:Key="TabControlNormalBorderBrush" Color="#8C8E94"/>  5     <!-- 应该在此定义资源字典条目。-->  6     <Style x:Key="TabControlStyle" TargetType="{x:Type TabControl}">  7         <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>  8         <Setter Property="Padding" Value="4,4,4,4"/>  9         <Setter Property="BorderThickness" Value="1"/> 10         <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/> 11         <Setter Property="Background" Value="#F9F9F9"/> 12         <Setter Property="HorizontalContentAlignment" Value="Center"/> 13         <Setter Property="VerticalContentAlignment" Value="Center"/> 14         <Setter Property="Template"> 15             <Setter.Value> 16                 <ControlTemplate TargetType="{x:Type TabControl}"> 17                     <Grid ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local"> 18                         <Grid.ColumnDefinitions> 19                             <ColumnDefinition x:Name="ColumnDefinition0"/> 20                             <ColumnDefinition x:Name="ColumnDefinition1" Width="0"/> 21                         </Grid.ColumnDefinitions> 22                         <Grid.RowDefinitions> 23                             <RowDefinition x:Name="RowDefinition0" Height="Auto" MinHeight="84.5"/> 24                             <RowDefinition x:Name="RowDefinition1"/> 25                         </Grid.RowDefinitions> 26                         <Border x:Name="ContentPanel" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local" Margin="0"> 27                             <ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Opacity="1"/> 28                         </Border> 29                         <Canvas x:Name="HeaderPanel" HorizontalAlignment="Stretch" Height="Auto" Width="Auto" IsItemsHost="True"/> 30                     </Grid> 31                     <ControlTemplate.Triggers> 32                         <Trigger Property="IsEnabled" Value="false"> 33                             <Setter Property="Foreground" Value="#FF00D1E5"/> 34                         </Trigger> 35                     </ControlTemplate.Triggers> 36                 </ControlTemplate> 37             </Setter.Value> 38         </Setter> 39     </Style> 40     <Style x:Key="TabItemFocusVisual"> 41         <Setter Property="Control.Template"> 42             <Setter.Value> 43                 <ControlTemplate> 44                     <Rectangle Margin="3,3,3,1" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> 45                 </ControlTemplate> 46             </Setter.Value> 47         </Setter> 48     </Style> 49     <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0"> 50         <GradientStop Color="#F3F3F3" Offset="0"/> 51         <GradientStop Color="#EBEBEB" Offset="0.5"/> 52         <GradientStop Color="#DDDDDD" Offset="0.5"/> 53         <GradientStop Color="#CDCDCD" Offset="1"/> 54     </LinearGradientBrush> 55     <LinearGradientBrush x:Key="TabItemHotBackground" EndPoint="0,1" StartPoint="0,0"> 56         <GradientStop Color="#EAF6FD" Offset="0.15"/> 57         <GradientStop Color="#D9F0FC" Offset=".5"/> 58         <GradientStop Color="#BEE6FD" Offset=".5"/> 59         <GradientStop Color="#A7D9F5" Offset="1"/> 60     </LinearGradientBrush> 61     <SolidColorBrush x:Key="TabItemSelectedBackground" Color="#F9F9F9"/> 62     <SolidColorBrush x:Key="TabItemHotBorderBrush" Color="#3C7FB1"/> 63     <SolidColorBrush x:Key="TabItemDisabledBackground" Color="#F4F4F4"/> 64     <SolidColorBrush x:Key="TabItemDisabledBorderBrush" Color="#FFC9C7BA"/> 65     <Style x:Key="TabItemStyle" TargetType="{x:Type TabItem}"> 66         <Setter Property="FocusVisualStyle" Value="{StaticResource TabItemFocusVisual}"/> 67         <Setter Property="Foreground" Value="#FF00D1E5"/> 68         <Setter Property="Padding" Value="6,1,6,1"/> 69         <Setter Property="BorderBrush" Value="{StaticResource TabControlNormalBorderBrush}"/> 70         <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/> 71         <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 72         <Setter Property="VerticalContentAlignment" Value="Stretch"/> 73         <Setter Property="Template"> 74             <Setter.Value> 75                 <ControlTemplate TargetType="{x:Type TabItem}"> 76                     <Grid SnapsToDevicePixels="true"> 77                         <Grid.RowDefinitions> 78                             <RowDefinition Height="0.66*"/> 79                             <RowDefinition Height="0.34*"/> 80                         </Grid.RowDefinitions> 81                         <Border x:Name="Bd" BorderThickness="0" CornerRadius="3" BorderBrush="Black" Margin="0" Grid.RowSpan="2" Visibility="Hidden"> 82                             <Border.Background> 83                                 <ImageBrush ImageSource="/WpfTabNavigation;component/images/hoverbutton.png" /> 84                             </Border.Background> 85                         </Border> 86                         <Border x:Name="fg" BorderThickness="0" CornerRadius="3" BorderBrush="#FF00D1D1" Margin="0" Grid.RowSpan="2" Visibility="Hidden" RenderTransformOrigin="0.5,0.5"> 87                             <Border.RenderTransform> 88                                 <TransformGroup> 89                                     <ScaleTransform/> 90                                     <SkewTransform/> 91                                     <RotateTransform/> 92                                     <TranslateTransform/> 93                                 </TransformGroup> 94                             </Border.RenderTransform> 95                             <Border.Background> 96                                 <ImageBrush ImageSource="/WpfTabNavigation;component/images/hoverbutton.png"/> 97                             </Border.Background> 98                         </Border> 99                         <!--文本颜色设置-->100                         <TextBlock Name="PART_Text" Margin="0,0.333,0,3.833" TextWrapping="Wrap" VerticalAlignment="Stretch" d:LayoutOverrides="Height" Grid.Row="1" HorizontalAlignment="Center" Text="{TemplateBinding Header}" Foreground="Black" >101 102                             <TextBlock.Style>103                                 <Style TargetType="TextBlock">104                                     <Setter Property= "Foreground" Value="#FF00D1E5"/>105                                     <Style.Triggers>106                                         <Trigger Property ="IsMouSEOver" Value="True">107                                             <Setter Property= "Foreground" Value="Black"/>108                                         </Trigger>109                                     </Style.Triggers>110                                 </Style>111                             </TextBlock.Style>112                            113                         </TextBlock>114                         <!--图标-->115                         <Border x:Name="ico" BorderThickness="0" CornerRadius="3" BorderBrush="Black" Margin="4,4,4.25,0" Grid.RowSpan="1" HorizontalAlignment="Center" VerticalAlignment="Center" Width="32" Height="32" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">116                             <Border.RenderTransform>117                                 <TransformGroup>118                                     <ScaleTransform/>119                                     <SkewTransform/>120                                     <RotateTransform/>121                                     <TranslateTransform/>122                                 </TransformGroup>123                             </Border.RenderTransform>124                         </Border>125                     </Grid>126                     <ControlTemplate.Triggers>127                         <Trigger Property="IsMouseOver" Value="true"/>128                         <Trigger Property="IsSelected" Value="true">129                             <Setter Property="Visibility" TargetName="Bd" Value="Visible"/>130                             <Setter Property="Panel.ZIndex" TargetName="ico" Value="1"/>131                         </Trigger>132                         <MultiTrigger>133                             <MultiTrigger.Conditions>134                                 <Condition Property="IsSelected" Value="false"/>135                                 <Condition Property="IsMouseOver" Value="true"/>136                             </MultiTrigger.Conditions>137                             <Setter Property="Visibility" TargetName="fg" Value="Visible"/>138                             <Setter Property="RenderTransform" TargetName="ico">139                                 <Setter.Value>140                                     <TransformGroup>141                                         <ScaleTransform ScaleX="1.05" ScaleY="1.05"/>142                                         <SkewTransform/>143                                         <RotateTransform/>144                                         <TranslateTransform/>145                                     </TransformGroup>146                                 </Setter.Value>147                             </Setter>148                         </MultiTrigger>149                         <Trigger Property="IsEnabled" Value="false"/>150                     </ControlTemplate.Triggers>151                 </ControlTemplate>152             </Setter.Value>153         </Setter>154     </Style>155 </ResourceDictionary>

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上，https://github.com/JackWangCUMT/WPFTabNavigation

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

8 完善

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

 1     <Style x:Key="TabItemStyle" TargetType="{x:Type TabItem}"> 2         ...... 3         <Setter Property="Template"> 4             <Setter.Value> 5                 <ControlTemplate TargetType="{x:Type TabItem}"> 6                     <Grid SnapsToDevicePixels="true"> 7                         ...... 8                         <!--页签文本 PART_Text--> 9                         <TextBlock Name="PART_Text" Margin="0,0.333,0,3.833" TextWrapping="Wrap" VerticalAlignment="Stretch" d:LayoutOverrides="Height" Grid.Row="1" HorizontalAlignment="Center" Text="{TemplateBinding Header}" Foreground="#FF00D1E5" >10                            11                         </TextBlock>12                         <!--图标-->13                            ......14                     </Grid>15                     <ControlTemplate.Triggers>16                         <Trigger Property="IsMouseOver" Value="true"/>17                         <!--页签选中后进行触发-->18                         <Trigger Property="IsSelected" Value="true">19                             <Setter Property="Visibility" TargetName="Bd" Value="Visible"/>20                             <Setter Property="Panel.ZIndex" TargetName="ico" Value="1"/>21                             <!--在控件模板下,一个控件的Triggers可利用TargetName属性对其他控件的样式-->22                             <Setter Property="Foreground" TargetName="PART_Text" Value="Black" />23                          </Trigger>24                         <MultiTrigger>25                             <MultiTrigger.Conditions>26                                 <Condition Property="IsSelected" Value="false"/>27                                 <Condition Property="IsMouseOver" Value="true"/>28                             </MultiTrigger.Conditions>29                             <Setter Property="Visibility" TargetName="fg" Value="Visible"/>30                             <Setter Property="RenderTransform" TargetName="ico">31                                 <Setter.Value>32                                     <TransformGroup>33                                         <ScaleTransform ScaleX="1.05" ScaleY="1.05"/>34                                         <SkewTransform/>35                                         <RotateTransform/>36                                         <TranslateTransform/>37                                     </TransformGroup>38                                 </Setter.Value>39                             </Setter>40                         </MultiTrigger>41                         <Trigger Property="IsEnabled" Value="false"/>42                     </ControlTemplate.Triggers>43                 </ControlTemplate>44             </Setter.Value>45         </Setter>46     </Style>