WPF如何實現一個漂亮的頁簽導航UI

本文轉載自查看原文 2015-11-04 10:56 17256 C#/ WPF

最近看到一個比較漂亮的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@cnblogs.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             else
11  { 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>

View Code

另外將日期控件進行了樣式完善，這里對TextBox控件利用自定義樣式將其設置為具有可以下拉選擇日期的功能。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 unigui多頁簽UI框架實現Vue的多頁簽組件 Jquery實現的Tabs頁簽淺談WPF頁間導航超漂亮的WPF界面框架(Modern UI for WPF) 實現多頁簽切換效果 element-ui的tabs默認選中頁簽 React 實現一個漂亮的 Table 如何實現一個既簡單又漂亮的列表 WPF實現導航的幾種方式