最近看到一個比較漂亮的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 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/ 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>主界面中用 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>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，將其隱藏。
最終的效果截圖如下（感謝園友斧正：下圖的正太分布是正態分布哈！）：
左邊菜單的顏色，想著不選中顯示RGB(0,209,229)，選中顯示RGB(51,51,51)或者黑色。但嘗試了一些方法還未實現。若有園友知道思路的話，歡迎指教！
此代碼進行開源，代碼托管到GitHub上，https://github.com/JackWangCUMT/WPFTabNavigation
-----------------------------------------------------------------------------------------------------------------
上面提到字體無法變更的問題，經過查閱資料已經解決，這里主要用到觸發器設置中的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>
另外將日期控件進行了樣式完善，這里對TextBox控件利用自定義樣式將其設置為具有可以下拉選擇日期的功能。
新聞熱點
疑難解答
