以前學習Windows Form編程的時候，總感覺自己做的界面很丑，看到360安全衛士、迅雷等軟件的UI設計都非常美觀，心里總是憧憬着要是自己能實現這樣的UI效果該多好！！！另一個困擾我的問題是，這個UI皮膚是如何用技術實現的呢？！雖然好多年過去了，但心里的憧憬和疑惑一直沒有消失，而且越來越強烈。在日常的工作和學習中，自己在網上也經常留意類似的技術或者文章。最近在學習WPF的過程中，看到網上也有仿360和仿迅雷UI設計的資源，通過對資源的學習和自己的動手實踐，終於實現了下面的仿360安全衛士界面：
由於項目文件比較多，這里羅列出核心的過程和代碼：
1、VS解決方案結構：
WpfPageTransitions是一個WPF類庫，實現UI頁面切換動畫效果，支持多種動畫，可以通過TransitionType屬性進行設置，其原理是定義了多個切換動畫類型的Storyboard,程序根據配置的TransitionType去執行匹配的Storyboard動畫（分出入動畫，xxxxxxIn和xxxxxxOut)。360UI是一個WPF 桌面應用程序，styles文件夾下存放了定義的按鈕樣式、菜單項樣式、頁簽樣式等樣式和需要的所有UI切圖資源。pages文件夾下存放切換的詳細子頁面。
（備注：圖片資源和部分文件來自互聯網，特別感謝KXFang360項目提供的360整套配圖和布局文件）
2、頁面切換控件核心代碼：
1 <UserControl x:Class="WpfPageTransitions.PageTransition"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
5 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
6 xmlns:local="clr-namespace:WpfPageTransitions"
7 mc:Ignorable="d"
8 d:DesignHeight="300" d:DesignWidth="300">
9 <UserControl.Resources>
10
11 <Style TargetType="{x:Type ContentPresenter}">
12 <Setter Property="LayoutTransform">
13 <Setter.Value>
14 <ScaleTransform />
15 </Setter.Value>
16 </Setter>
17 </Style>
18
19 <local:CenterConverter x:Key="centerConverter"/>
20
21 <!-- Slide and Fade -->
22 <Storyboard x:Key="SlideAndFadeIn" >
23 <ThicknessAnimation Duration="0:0:.75" Storyboard.TargetProperty="Margin" From="500,0,-500,0" To="0" DecelerationRatio=".9" />
24 <DoubleAnimation Duration="0:0:.25" Storyboard.TargetProperty="Opacity" From="0" To="1" />
25 </Storyboard>
26
27 <Storyboard x:Key="SlideAndFadeOut">
28 <ThicknessAnimation Duration="0:0:.5" Storyboard.TargetProperty="Margin" To="-500,0,500,0" AccelerationRatio=".9"/>
29 <DoubleAnimation Duration="0:0:.5" Storyboard.TargetProperty="Opacity" To="0" />
30 </Storyboard>
31
32 <!-- Fade -->
33 <Storyboard x:Key="FadeIn" >
34 <DoubleAnimation Duration="0:0:.25" Storyboard.TargetProperty="Opacity" From="0" To="1" />
35 </Storyboard>
36
37 <Storyboard x:Key="FadeOut">
38 <DoubleAnimation Duration="0:0:.5" Storyboard.TargetProperty="Opacity" To="0" />
39 </Storyboard>
40
41 <!-- Slide -->
42 <Storyboard x:Key="SlideIn" >
43 <ThicknessAnimation Duration="0:0:.75" Storyboard.TargetProperty="Margin" From="500,0,-500,0" To="0" DecelerationRatio=".9" />
44 </Storyboard>
45
46 <Storyboard x:Key="SlideOut">
47 <ThicknessAnimation Duration="0:0:.5" Storyboard.TargetProperty="Margin" To="-500,0,500,0" AccelerationRatio=".9"/>
48 </Storyboard>
49
50 <!-- Grow -->
51 <Storyboard x:Key="GrowIn" >
52 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" />
53 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" />
54 </Storyboard>
55
56 <Storyboard x:Key="GrowOut">
57 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="0" Duration="0:0:.75" AccelerationRatio=".9" />
58 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="0" Duration="0:0:.75" AccelerationRatio=".9" />
59 </Storyboard>
60
61 <!-- Grow and Fade -->
62 <Storyboard x:Key="GrowAndFadeIn" >
63 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" />
64 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" />
65 <DoubleAnimation Duration="0:0:.25" Storyboard.TargetProperty="Opacity" From="0" To="1" />
66 </Storyboard>
67
68 <Storyboard x:Key="GrowAndFadeOut">
69 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="0" Duration="0:0:.75" AccelerationRatio=".9" />
70 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="0" Duration="0:0:.75" AccelerationRatio=".9" />
71 <DoubleAnimation Duration="0:0:.75" Storyboard.TargetProperty="Opacity" To="0" />
72 </Storyboard>
73
74 <!-- Flip -->
75 <Storyboard x:Key="FlipIn" >
76 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" From="-100" To="0" Duration="0:0:.75" DecelerationRatio=".9" />
77 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" From="-100" To="0" Duration="0:0:.75" DecelerationRatio=".9" />
78 </Storyboard>
79
80 <Storyboard x:Key="FlipOut">
81 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" To="100" Duration="0:0:.75" AccelerationRatio=".9" />
82 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" To="100" Duration="0:0:.75" AccelerationRatio=".9" />
83 </Storyboard>
84
85 <!-- Flip and Fade -->
86 <Storyboard x:Key="FlipAndFadeIn" >
87 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" From="-100" To="0" Duration="0:0:.75" DecelerationRatio=".9" />
88 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" From="-100" To="0" Duration="0:0:.75" DecelerationRatio=".9" />
89 <DoubleAnimation Duration="0:0:.25" Storyboard.TargetProperty="Opacity" From="0" To="1" />
90 </Storyboard>
91
92 <Storyboard x:Key="FlipAndFadeOut">
93 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" To="100" Duration="0:0:.75" AccelerationRatio=".9" />
94 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" To="100" Duration="0:0:.75" AccelerationRatio=".9" />
95 <DoubleAnimation Duration="0:0:.75" Storyboard.TargetProperty="Opacity" To="0" />
96 </Storyboard>
97
98 <!-- Spin -->
99 <Storyboard x:Key="SpinIn" >
100 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" From="-360" To="0" Duration="0:0:.75" DecelerationRatio=".9" />
101 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" />
102 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" />
103 </Storyboard>
104
105 <Storyboard x:Key="SpinOut">
106 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="360" Duration="0:0:.75" AccelerationRatio=".9" />
107 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="0" Duration="0:0:.75" AccelerationRatio=".9" />
108 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="0" Duration="0:0:.75" AccelerationRatio=".9" />
109 </Storyboard>
110
111 <!-- Spin and Fade -->
112 <Storyboard x:Key="SpinAndFadeIn" >
113 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" From="-360" To="0" Duration="0:0:.75" DecelerationRatio=".9" />
114 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" />
115 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" />
116 <DoubleAnimation Duration="0:0:.25" Storyboard.TargetProperty="Opacity" From="0" To="1" />
117 </Storyboard>
118
119 <Storyboard x:Key="SpinAndFadeOut">
120 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="360" Duration="0:0:.75" AccelerationRatio=".9" />
121 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="0" Duration="0:0:.75" AccelerationRatio=".9" />
122 <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="0" Duration="0:0:.75" AccelerationRatio=".9" />
123 <DoubleAnimation Duration="0:0:.75" Storyboard.TargetProperty="Opacity" To="0" />
124 </Storyboard>
125
126 </UserControl.Resources>
127
128 <Grid Name="page">
129
130 <ContentControl Name="contentPresenter" >
131 <ContentControl.RenderTransform>
132 <TransformGroup>
133 <ScaleTransform ScaleX="1" ScaleY="1"
134 CenterX="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualWidth, Converter={StaticResource centerConverter}}"
135 CenterY="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualHeight, Converter={StaticResource centerConverter}}" />
136 <SkewTransform AngleX="0" AngleY="0"
137 CenterX="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualWidth, Converter={StaticResource centerConverter}}"
138 CenterY="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualHeight, Converter={StaticResource centerConverter}}" />
139 <RotateTransform Angle="0"
140 CenterX="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualWidth, Converter={StaticResource centerConverter}}"
141 CenterY="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualHeight, Converter={StaticResource centerConverter}}" />
142 <TranslateTransform X="0" Y="0" />
143 </TransformGroup>
144 </ContentControl.RenderTransform>
145
146 </ContentControl>
147
148 </Grid>
149
150 </UserControl>
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Windows; 6 using System.Windows.Controls; 7 using System.Windows.Data; 8 using System.Windows.Documents; 9 using System.Windows.Input; 10 using System.Windows.Media; 11 using System.Windows.Media.Imaging; 12 using System.Windows.Navigation; 13 using System.Windows.Shapes; 14 using System.Threading.Tasks; 15 using System.Windows.Media.Animation; 16
17 namespace WpfPageTransitions 18 { 19 public partial class PageTransition : UserControl 20 { 21 Stack<UserControl> pages = new Stack<UserControl>(); 22
23 public UserControl CurrentPage { get; set; } 24
25 public static readonly DependencyProperty TransitionTypeProperty = DependencyProperty.Register("TransitionType", 26 typeof(PageTransitionType), 27 typeof(PageTransition), new PropertyMetadata(PageTransitionType.SlideAndFade)); 28
29 public PageTransitionType TransitionType 30 { 31 get
32 { 33 return (PageTransitionType)GetValue(TransitionTypeProperty); 34 } 35 set
36 { 37 SetValue(TransitionTypeProperty, value); 38 } 39 } 40
41 public PageTransition() 42 { 43 InitializeComponent(); 44 } 45
46 public void ShowPage(UserControl newPage) 47 { 48 pages.Push(newPage); 49 Task.Factory.StartNew(() => ShowNewPage()); 50 } 51
52 void ShowNewPage() 53 { 54 Dispatcher.Invoke((Action)delegate
55 { 56
57 if (contentPresenter.Content != null) 58 { 59 UserControl oldPage = contentPresenter.Content as UserControl; 60
61 if (oldPage != null) 62 { 63 oldPage.Loaded -= newPage_Loaded; 64
65 UnloadPage(oldPage); 66
67 } 68 } 69 else
70 { 71 ShowNextPage(); 72 } 73
74 }); 75 } 76
77 void ShowNextPage() 78 { 79 UserControl newPage = pages.Pop(); 80
81 newPage.Loaded += newPage_Loaded; 82
83 contentPresenter.Content = newPage; 84 } 85
86 void UnloadPage(UserControl page) 87 { 88 Storyboard hidePage = (Resources[string.Format("{0}Out", TransitionType.ToString())] as Storyboard).Clone(); 89
90 hidePage.Completed += hidePage_Completed; 91
92 hidePage.Begin(contentPresenter); 93 } 94
95 void newPage_Loaded(object sender, RoutedEventArgs e) 96 { 97 Storyboard showNewPage = Resources[string.Format("{0}In", TransitionType.ToString())] as Storyboard; 98
99 showNewPage.Begin(contentPresenter); 100
101 CurrentPage = sender as UserControl; 102 } 103
104 void hidePage_Completed(object sender, EventArgs e) 105 { 106 contentPresenter.Content = null; 107 ShowNextPage(); 108 } 109 } 110 }
3、Like360Main核心代碼為：
其中AllowsTransparency="True" WindowStyle="None" Background="{x:Null}"的目的是讓WPF窗體隱藏默認的邊框，這樣可以允許用背景圖片填充WPF定義窗體外觀。在這區間可以自定義關閉、最小化和最大化按鈕等。MouseLeftButtonDown="Window_MouseLeftButtonDown" 目的是為了支持窗體拖動。FontFamily="SimSun" TextOptions.TextFormattingMode="Display"的目的是為了解決WPF中文字體顯示模糊的問題。
1 <Window x:Class="_360UI.Like360Main"
2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4 Title="Like360Main" Height="610" Width="860"
5 FontFamily="SimSun"
6 AllowsTransparency="True" WindowStyle="None"
7 xmlns:pageTransitions="clr-namespace:WpfPageTransitions;assembly=WpfPageTransitions"
8 Background="{x:Null}" MouseLeftButtonDown="Window_MouseLeftButtonDown" TextOptions.TextFormattingMode="Display" >
9 <Window.Resources>
10 <LinearGradientBrush x:Key="MyBrush" EndPoint="0.5,1" StartPoint="0.5,0">
11 <GradientStop Color="#CFFFFFFF"/>
12 <GradientStop Color="#FF7EBDD8" Offset="1"/>
13 </LinearGradientBrush>
14 </Window.Resources>
15 <Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Margin="10">
16 <Border.Effect>
17 <DropShadowEffect ShadowDepth="0" Opacity="0.8"/>
18 </Border.Effect>
19 <Border.Background>
20 <ImageBrush ImageSource="styles/skin/frame.jpg"/>
21 </Border.Background>
22 <Grid>
23 <Grid.RowDefinitions>
24 <RowDefinition Height="25.77"/>
25 <RowDefinition Height="83.122"/>
26 <RowDefinition/>
27 <RowDefinition Height="24.5"/>
28 </Grid.RowDefinitions>
29 <!--上標題欄-->
30 <Label Content="360安全衛士界面" HorizontalAlignment="Left" Width="171.79" Foreground="#A794E9FF" FontWeight="Bold" TextOptions.TextFormattingMode="Display"/>
31 <Rectangle Margin="0" Stroke="Black" HorizontalAlignment="Right" Width="151.5" Grid.Row="1" StrokeThickness="0">
32 <Rectangle.Fill>
33 <ImageBrush ImageSource="styles/skin/logo.png" Stretch="Uniform"/>
34 </Rectangle.Fill>
35 </Rectangle>
36 <Button Content="x" HorizontalAlignment="Right" Margin="0,0,2.625,8" Style="{DynamicResource SysButtonStyle}" Width="44.315" Name="closeButton" Click="closeButton_Click" />
37 <Button Content="max" HorizontalAlignment="Right" Margin="0,0,46.94,8" Style="{DynamicResource MaxButtonStyle}" Width="41.5" Name="maxButton" Click="maxButton_Click">
38 <Button.Background>
39 <ImageBrush ImageSource="styles/skin/Button/MAX.png" Stretch="Uniform"/>
40 </Button.Background>
41 </Button>
42 <Button Content="mni" HorizontalAlignment="Right" Margin="0,0,88.441,8" Style="{DynamicResource MaxButtonStyle}" Width="41.5" Name="mniButton" Click="mniButton_Click">
43 <Button.Background>
44 <ImageBrush ImageSource="styles/skin/Button/MNI.png" Stretch="Uniform"/>
45 </Button.Background>
46 </Button>
47 <Button x:Name="menuButton" HorizontalAlignment="Right" Margin="0,0,129.942,8" Style="{DynamicResource MButtonStyle}" Width="31.833" Click="menuButton_Click">
48 <Button.Background>
49 <ImageBrush ImageSource="styles/skin/Button/M.png" Stretch="Uniform"/>
50 </Button.Background>
51 </Button>
52 <Popup x:Name="Menu" AllowsTransparency="True" Margin="0,-1,0,1" PlacementTarget="{Binding ElementName=menuButton}" StaysOpen="False" PopupAnimation="Scroll">
53 <Grid Height="113.667" Width="96" Margin="0" HorizontalAlignment="Left">
54 <Border BorderThickness="1" CornerRadius="3" Background="#FFEFEFEF" Margin="3">
55 <Border.Effect>
56 <DropShadowEffect ShadowDepth="0" Opacity="0.495"/>
57 </Border.Effect>
58 <StackPanel Margin="0,4">
59 <MenuItem Header="設 置" Style="{DynamicResource MenuItemStyle}"/>
60 <MenuItem Header="更 新"/>
61 <MenuItem Header="關 於"/>
62 <MenuItem Header="退 出"/>
63 </StackPanel>
64 </Border>
65 </Grid>
66 </Popup>
67 <Rectangle Stroke="Black" StrokeThickness="0" Width="1" Margin="0,0,129.2,10.77" HorizontalAlignment="Right" Height="17">
68 <Rectangle.Fill>
69 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
70 <GradientStop Color="#85000000"/>
71 <GradientStop Offset="1" Color="#1A4D4D4D"/>
72 </LinearGradientBrush>
73 </Rectangle.Fill>
74 </Rectangle>
75 <Rectangle Stroke="Black" StrokeThickness="0" Width="1" Margin="0,0,88.2,8.77" HorizontalAlignment="Right" Height="17">
76 <Rectangle.Fill>
77 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
78 <GradientStop Color="#85000000"/>
79 <GradientStop Offset="1" Color="#1A4D4D4D"/>
80 </LinearGradientBrush>
81 </Rectangle.Fill>
82 </Rectangle>
83 <Rectangle Stroke="Black" StrokeThickness="0" Width="1" Margin="0,0,46.2,8.77" HorizontalAlignment="Right" Height="17">
84 <Rectangle.Fill>
85 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
86 <GradientStop Color="#85000000"/>
87 <GradientStop Offset="1" Color="#1A4D4D4D"/>
88 </LinearGradientBrush>
89 </Rectangle.Fill>
90 </Rectangle>
91 <Rectangle Height="3" Margin="0,0,161.775,0" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top">
92 <Rectangle.Fill>
93 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
94 <GradientStop Color="#61FFFFFF"/>
95 <GradientStop Offset="1" Color="#1A4D4D4D"/>
96 </LinearGradientBrush>
97 </Rectangle.Fill>
98 </Rectangle>
99 <!--上導航欄-->
100
101 <TabControl Name="tab360" Grid.RowSpan="2" Margin="0" Style="{DynamicResource TabControlStyle}" Grid.Row="1" Background="{x:Null}" SelectionChanged="TabControl_SelectionChanged">
102 <TabItem Header="電腦體驗" Height="83" Margin="5,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}" TextOptions.TextFormattingMode="Display">
103 <TabItem.Background>
104 <ImageBrush ImageSource="styles/skin/ico/ico_Examine.png"/>
105 </TabItem.Background>
106 <Grid Margin="0" Background="{DynamicResource MyBrush}">
107 <Grid.ColumnDefinitions>
108 <ColumnDefinition Width="0.052*"/>
109 <ColumnDefinition Width="0.9*"/>
110 <ColumnDefinition Width="0.048*"/>
111 </Grid.ColumnDefinitions>
112 <Grid.RowDefinitions>
113 <RowDefinition Height="40.73"/>
114 <RowDefinition Height="56.667"/>
115 <RowDefinition Height="338.833"/>
116 <RowDefinition Height="26.9999999999997"/>
117 </Grid.RowDefinitions>
118
119 <!--詳細-->
120 <Label Content="電腦體檢" HorizontalAlignment="Left" Margin="0" Width="94.25" Height="36" FontSize="14.667" FontWeight="Bold" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" />
121 <pageTransitions:PageTransition Name="pTransitionControl_1" Margin="0" TransitionType="SlideAndFade" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="2"/>
122
123 </Grid>
124 </TabItem>
125 <TabItem Header="查殺木馬" Height="83" Margin="80,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}">
126 <TabItem.Background>
127 <ImageBrush ImageSource="styles/skin/ico/ico_dsmain.png"/>
128 </TabItem.Background>
129 <Grid Margin="0" Background="{DynamicResource MyBrush}">
130 <Grid.ColumnDefinitions>
131 <ColumnDefinition Width="0.052*"/>
132 <ColumnDefinition Width="0.9*"/>
133 <ColumnDefinition Width="0.048*"/>
134 </Grid.ColumnDefinitions>
135 <Grid.RowDefinitions>
136 <RowDefinition Height="40.73"/>
137 <RowDefinition Height="56.667"/>
138 <RowDefinition Height="338.833"/>
139 <RowDefinition Height="26.9999999999997"/>
140 </Grid.RowDefinitions>
141 <!--詳細-->
142 <Label Content="查殺木馬" HorizontalAlignment="Left" Margin="0" Width="94.25" Height="36" FontSize="14.667" FontWeight="Bold" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" />
143 <pageTransitions:PageTransition Name="pTransitionControl_2" Margin="0" TransitionType="SlideAndFade" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="2"/>
144
145 </Grid>
146 </TabItem>
147 <TabItem Header="清理插件" Height="83" Margin="155,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}">
148 <TabItem.Background>
149 <ImageBrush ImageSource="styles/skin/ico/ico_PluginCleaner.png"/>
150 </TabItem.Background>
151 <Grid Margin="0" Background="{DynamicResource MyBrush}">
152 <Grid.ColumnDefinitions>
153 <ColumnDefinition Width="0.052*"/>
154 <ColumnDefinition Width="0.9*"/>
155 <ColumnDefinition Width="0.048*"/>
156 </Grid.ColumnDefinitions>
157 <Grid.RowDefinitions>
158 <RowDefinition Height="40.73"/>
159 <RowDefinition Height="56.667"/>
160 <RowDefinition Height="338.833"/>
161 <RowDefinition Height="26.9999999999997"/>
162 </Grid.RowDefinitions>
163 <!--詳細-->
164 <Label Content="清理插件" HorizontalAlignment="Left" Margin="0" Width="94.25" Height="36" FontSize="14.667" FontWeight="Bold" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" />
165 <pageTransitions:PageTransition Name="pTransitionControl_3" Margin="0" TransitionType="SlideAndFade" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="2"/>
166
167 </Grid>
168 </TabItem>
169 <TabItem Header="修復漏洞" Height="83" Margin="230,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}">
170 <TabItem.Background>
171 <ImageBrush ImageSource="styles/skin/ico/ico_VulRepair.png"/>
172 </TabItem.Background>
173 <Grid Background="{DynamicResource MyBrush}"/>
174 </TabItem>
175 <TabItem Header="清理垃圾" Height="83" Margin="305,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}">
176 <TabItem.Background>
177 <ImageBrush ImageSource="styles/skin/ico/ico_RubbishCleaner.png"/>
178 </TabItem.Background>
179 <Grid Background="{DynamicResource MyBrush}"/>
180 </TabItem>
181 <TabItem Header="清理痕跡" Height="83" Margin="380,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}">
182 <TabItem.Background>
183 <ImageBrush ImageSource="styles/skin/ico/ico_TraceCleaner.png"/>
184 </TabItem.Background>
185 <Grid Background="{DynamicResource MyBrush}"/>
186 </TabItem>
187 <TabItem Header="系統修復" Height="83" Margin="455,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}">
188 <TabItem.Background>
189 <ImageBrush ImageSource="styles/skin/ico/ico_SysRepair.png"/>
190 </TabItem.Background>
191 <Grid Background="{DynamicResource MyBrush}"/>
192 </TabItem>
193 <TabItem Header="功能大全" Height="83" Margin="530,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}">
194 <TabItem.Background>
195 <ImageBrush ImageSource="styles/skin/ico/ico_AdvTools.png"/>
196 </TabItem.Background>
197 <Grid Background="{DynamicResource MyBrush}"/>
198 </TabItem>
199 <TabItem Header="軟件管家" Height="83" Margin="605,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}">
200 <TabItem.Background>
201 <ImageBrush ImageSource="styles/skin/ico/ico_softmgr.png"/>
202 </TabItem.Background>
203 <Grid Background="{DynamicResource MyBrush}"/>
204 </TabItem>
205 </TabControl>
206
207 <!--導航詳細-->
208 <!--下狀態欄-->
209 <Label Content="歡迎使用仿360系統" Margin="0" Grid.Row="3" Foreground="#A794E9FF" FontWeight="Bold" BorderThickness="0" BorderBrush="White" HorizontalAlignment="Left" Width="147.5" TextOptions.TextFormattingMode="Display" />
210 <Label Content="已連接網絡" Margin="0" Grid.Row="3" Foreground="#A794E9FF" FontWeight="Bold" BorderThickness="0" BorderBrush="White" HorizontalAlignment="Right" Width="80" TextOptions.TextFormattingMode="Display" />
211 </Grid>
212 </Border>
213 </Window>
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 using System.Windows; 7 using System.Windows.Controls; 8 using System.Windows.Data; 9 using System.Windows.Documents; 10 using System.Windows.Input; 11 using System.Windows.Media; 12 using System.Windows.Media.Imaging; 13 using System.Windows.Shapes; 14 15 namespace _360UI 16 { 17 /// <summary> 18 /// Like360Main.xaml 的交互邏輯 19 /// </summary> 20 public partial class Like360Main : Window 21 { 22 public Like360Main() 23 { 24 InitializeComponent(); 25 } 26 27 private void closeButton_Click(object sender, RoutedEventArgs e) 28 { 29 this.Close(); 30 } 31 32 private void maxButton_Click(object sender, RoutedEventArgs e) 33 { 34 if (WindowState == WindowState.Normal) 35 WindowState = WindowState.Maximized; 36 else 37 WindowState = WindowState.Normal; 38 } 39 40 private void mniButton_Click(object sender, RoutedEventArgs e) 41 { 42 this.WindowState = WindowState.Minimized; 43 } 44 45 private void menuButton_Click(object sender, RoutedEventArgs e) 46 { 47 Menu.IsOpen = true; 48 } 49 50 private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 51 { 52 //拖動 53 this.DragMove(); 54 } 55 56 private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e) 57 { 58 int index = this.tab360.SelectedIndex; 59 if (index == 0) 60 { 61 //可以設置TransitionType WpfPage 來更改界面出入的動畫效果 62 //this.pTransitionControl_1.TransitionType = WpfPageTransitions.PageTransitionType.SpinAndFade; 63 pages.index newPage = new pages.index(); 64 this.pTransitionControl_1.ShowPage(newPage); 65 66 } 67 68 else if (index == 1) 69 { 70 pages.scan newPage = new pages.scan(); 71 this.pTransitionControl_2.ShowPage(newPage); 72 } 73 else if (index == 2) 74 { 75 pages.scan newPage = new pages.scan(); 76 this.pTransitionControl_3.ShowPage(newPage); 77 } 78 else 79 { 80 pages.index newPage = new pages.index(); 81 this.pTransitionControl_1.ShowPage(newPage); 82 } 83 } 84 } 85 }
當用戶單擊Tab頁簽時（切換事件），程序 用pages.index newPage = new pages.index();先實例化一個page子頁面（實際繼承UserControl)，然后調用 this.pTransitionControl_1.ShowPage(newPage);將子頁面進行加載(本質上是pTransitionControl_1.Content=newpage）。
4、運行代碼，界面如下：
下面是360安全衛士界面截圖，可對比一下，還是比較相似的。
