&　　以前学习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"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="/expression/blend/2008"
xmlns:local="clr-namespace:WpfPageTransitions"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"&
&UserControl.Resources&
&Style TargetType="{x:Type ContentPresenter}"&
&Setter Property="LayoutTransform"&
&Setter.Value&
&ScaleTransform /&
&/Setter.Value&
&local:CenterConverter x:Key="centerConverter"/&
&!-- Slide and Fade --&
&Storyboard x:Key="SlideAndFadeIn" &
&ThicknessAnimation Duration="0:0:.75" Storyboard.TargetProperty="Margin" From="500,0,-500,0" To="0" DecelerationRatio=".9" /&
&DoubleAnimation Duration="0:0:.25" Storyboard.TargetProperty="Opacity" From="0" To="1" /&
&/Storyboard&
&Storyboard x:Key="SlideAndFadeOut"&
&ThicknessAnimation Duration="0:0:.5" Storyboard.TargetProperty="Margin" To="-500,0,500,0" AccelerationRatio=".9"/&
&DoubleAnimation Duration="0:0:.5" Storyboard.TargetProperty="Opacity" To="0" /&
&/Storyboard&
&!-- Fade --&
&Storyboard x:Key="FadeIn" &
&DoubleAnimation Duration="0:0:.25" Storyboard.TargetProperty="Opacity" From="0" To="1" /&
&/Storyboard&
&Storyboard x:Key="FadeOut"&
&DoubleAnimation Duration="0:0:.5" Storyboard.TargetProperty="Opacity" To="0" /&
&/Storyboard&
&!-- Slide --&
&Storyboard x:Key="SlideIn" &
&ThicknessAnimation Duration="0:0:.75" Storyboard.TargetProperty="Margin" From="500,0,-500,0" To="0" DecelerationRatio=".9" /&
&/Storyboard&
&Storyboard x:Key="SlideOut"&
&ThicknessAnimation Duration="0:0:.5" Storyboard.TargetProperty="Margin" To="-500,0,500,0" AccelerationRatio=".9"/&
&/Storyboard&
&!-- Grow --&
&Storyboard x:Key="GrowIn" &
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" /&
&/Storyboard&
&Storyboard x:Key="GrowOut"&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="0" Duration="0:0:.75" AccelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="0" Duration="0:0:.75" AccelerationRatio=".9" /&
&/Storyboard&
&!-- Grow and Fade --&
&Storyboard x:Key="GrowAndFadeIn" &
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" /&
&DoubleAnimation Duration="0:0:.25" Storyboard.TargetProperty="Opacity" From="0" To="1" /&
&/Storyboard&
&Storyboard x:Key="GrowAndFadeOut"&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="0" Duration="0:0:.75" AccelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="0" Duration="0:0:.75" AccelerationRatio=".9" /&
&DoubleAnimation Duration="0:0:.75" Storyboard.TargetProperty="Opacity" To="0" /&
&/Storyboard&
&!-- Flip --&
&Storyboard x:Key="FlipIn" &
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" From="-100" To="0" Duration="0:0:.75" DecelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" From="-100" To="0" Duration="0:0:.75" DecelerationRatio=".9" /&
&/Storyboard&
&Storyboard x:Key="FlipOut"&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" To="100" Duration="0:0:.75" AccelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" To="100" Duration="0:0:.75" AccelerationRatio=".9" /&
&/Storyboard&
&!-- Flip and Fade --&
&Storyboard x:Key="FlipAndFadeIn" &
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" From="-100" To="0" Duration="0:0:.75" DecelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" From="-100" To="0" Duration="0:0:.75" DecelerationRatio=".9" /&
&DoubleAnimation Duration="0:0:.25" Storyboard.TargetProperty="Opacity" From="0" To="1" /&
&/Storyboard&
&Storyboard x:Key="FlipAndFadeOut"&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" To="100" Duration="0:0:.75" AccelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" To="100" Duration="0:0:.75" AccelerationRatio=".9" /&
&DoubleAnimation Duration="0:0:.75" Storyboard.TargetProperty="Opacity" To="0" /&
&/Storyboard&
&!-- Spin --&
&Storyboard x:Key="SpinIn" &
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" From="-360" To="0" Duration="0:0:.75" DecelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" /&
&/Storyboard&
&Storyboard x:Key="SpinOut"&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="360" Duration="0:0:.75" AccelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="0" Duration="0:0:.75" AccelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="0" Duration="0:0:.75" AccelerationRatio=".9" /&
&/Storyboard&
&!-- Spin and Fade --&
&Storyboard x:Key="SpinAndFadeIn" &
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" From="-360" To="0" Duration="0:0:.75" DecelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" From="0" To="1" Duration="0:0:.75" DecelerationRatio=".9" /&
&DoubleAnimation Duration="0:0:.25" Storyboard.TargetProperty="Opacity" From="0" To="1" /&
&/Storyboard&
&Storyboard x:Key="SpinAndFadeOut"&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" To="360" Duration="0:0:.75" AccelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="0" Duration="0:0:.75" AccelerationRatio=".9" /&
&DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" To="0" Duration="0:0:.75" AccelerationRatio=".9" /&
&DoubleAnimation Duration="0:0:.75" Storyboard.TargetProperty="Opacity" To="0" /&
&/Storyboard&
&/UserControl.Resources&
&Grid Name="page"&
&ContentControl Name="contentPresenter" &
&ContentControl.RenderTransform&
&TransformGroup&
&ScaleTransform ScaleX="1" ScaleY="1"
CenterX="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualWidth, Converter={StaticResource centerConverter}}"
CenterY="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualHeight, Converter={StaticResource centerConverter}}" /&
&SkewTransform AngleX="0" AngleY="0"
CenterX="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualWidth, Converter={StaticResource centerConverter}}"
CenterY="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualHeight, Converter={StaticResource centerConverter}}" /&
&RotateTransform Angle="0"
CenterX="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualWidth, Converter={StaticResource centerConverter}}"
CenterY="{Binding RelativeSource={RelativeSource AncestorType=Grid, Mode=FindAncestor}, Path=ActualHeight, Converter={StaticResource centerConverter}}" /&
&TranslateTransform X="0" Y="0" /&
&/TransformGroup&
&/ContentControl.RenderTransform&
&/ContentControl&
150 &/UserControl&
2 using System.Collections.G
3 using System.L
4 using System.T
5 using System.W
6 using System.Windows.C
7 using System.Windows.D
8 using System.Windows.D
9 using System.Windows.I
10 using System.Windows.M
11 using System.Windows.Media.I
12 using System.Windows.N
13 using System.Windows.S
14 using System.Threading.T
15 using System.Windows.Media.A
17 namespace WpfPageTransitions
public partial class PageTransition : UserControl
Stack&UserControl& pages = new Stack&UserControl&();
public UserControl CurrentPage { get; set; }
public static readonly DependencyProperty TransitionTypeProperty = DependencyProperty.Register("TransitionType",
typeof(PageTransitionType),
typeof(PageTransition), new PropertyMetadata(PageTransitionType.SlideAndFade));
public PageTransitionType TransitionType
return (PageTransitionType)GetValue(TransitionTypeProperty);
SetValue(TransitionTypeProperty, value);
public PageTransition()
InitializeComponent();
public void ShowPage(UserControl newPage)
pages.Push(newPage);
Task.Factory.StartNew(() =& ShowNewPage());
void ShowNewPage()
Dispatcher.Invoke((Action)delegate
if (contentPresenter.Content != null)
UserControl oldPage = contentPresenter.Content as UserC
if (oldPage != null)
oldPage.Loaded -= newPage_L
UnloadPage(oldPage);
ShowNextPage();
void ShowNextPage()
UserControl newPage = pages.Pop();
newPage.Loaded += newPage_L
contentPresenter.Content = newP
void UnloadPage(UserControl page)
Storyboard hidePage = (Resources[string.Format("{0}Out", TransitionType.ToString())] as Storyboard).Clone();
pleted += hidePage_C
hidePage.Begin(contentPresenter);
void newPage_Loaded(object sender, RoutedEventArgs e)
Storyboard showNewPage = Resources[string.Format("{0}In", TransitionType.ToString())] as S
showNewPage.Begin(contentPresenter);
CurrentPage = sender as UserC
void hidePage_Completed(object sender, EventArgs e)
contentPresenter.Content = null;
ShowNextPage();
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"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
Title="Like360Main"
Height="610" Width="860"
FontFamily="SimSun"
AllowsTransparency="True" WindowStyle="None"
xmlns:pageTransitions="clr-namespace:WpfPageTassembly=WpfPageTransitions"
Background="{x:Null}" MouseLeftButtonDown="Window_MouseLeftButtonDown" TextOptions.TextFormattingMode="Display" &
&Window.Resources&
&LinearGradientBrush x:Key="MyBrush" EndPoint="0.5,1" StartPoint="0.5,0"&
&GradientStop Color="#CFFFFFFF"/&
&GradientStop Color="#FF7EBDD8" Offset="1"/&
&/LinearGradientBrush&
&/Window.Resources&
&Border BorderBrush="Black" BorderThickness="1" CornerRadius="5" Margin="10"&
&Border.Effect&
&DropShadowEffect ShadowDepth="0" Opacity="0.8"/&
&/Border.Effect&
&Border.Background&
&ImageBrush ImageSource="styles/skin/frame.jpg"/&
&/Border.Background&
&Grid.RowDefinitions&
&RowDefinition Height="25.77"/&
&RowDefinition Height="83.122"/&
&RowDefinition/&
&RowDefinition Height="24.5"/&
&/Grid.RowDefinitions&
&!--上标题栏--&
&Label Content="360安全卫士界面" HorizontalAlignment="Left"
Width="171.79" Foreground="#A794E9FF" FontWeight="Bold" TextOptions.TextFormattingMode="Display"/&
&Rectangle Margin="0" Stroke="Black" HorizontalAlignment="Right" Width="151.5" Grid.Row="1" StrokeThickness="0"&
&Rectangle.Fill&
&ImageBrush ImageSource="styles/skin/logo.png" Stretch="Uniform"/&
&/Rectangle.Fill&
&/Rectangle&
&Button Content="x" HorizontalAlignment="Right" Margin="0,0,2.625,8" Style="{DynamicResource SysButtonStyle}" Width="44.315" Name="closeButton" Click="closeButton_Click" /&
&Button Content="max" HorizontalAlignment="Right" Margin="0,0,46.94,8" Style="{DynamicResource MaxButtonStyle}" Width="41.5" Name="maxButton" Click="maxButton_Click"&
&Button.Background&
&ImageBrush ImageSource="styles/skin/Button/MAX.png" Stretch="Uniform"/&
&/Button.Background&
&Button Content="mni" HorizontalAlignment="Right" Margin="0,0,88.441,8" Style="{DynamicResource MaxButtonStyle}" Width="41.5" Name="mniButton" Click="mniButton_Click"&
&Button.Background&
&ImageBrush ImageSource="styles/skin/Button/MNI.png" Stretch="Uniform"/&
&/Button.Background&
&Button x:Name="menuButton" HorizontalAlignment="Right" Margin="0,0,129.942,8" Style="{DynamicResource MButtonStyle}" Width="31.833" Click="menuButton_Click"&
&Button.Background&
&ImageBrush ImageSource="styles/skin/Button/M.png" Stretch="Uniform"/&
&/Button.Background&
&Popup x:Name="Menu" AllowsTransparency="True" Margin="0,-1,0,1" PlacementTarget="{Binding ElementName=menuButton}" StaysOpen="False" PopupAnimation="Scroll"&
&Grid Height="113.667" Width="96" Margin="0" HorizontalAlignment="Left"&
&Border BorderThickness="1" CornerRadius="3" Background="#FFEFEFEF" Margin="3"&
&Border.Effect&
&DropShadowEffect ShadowDepth="0" Opacity="0.495"/&
&/Border.Effect&
&StackPanel Margin="0,4"&
&MenuItem Header="设 置" Style="{DynamicResource MenuItemStyle}"/&
&MenuItem Header="更 新"/&
&MenuItem Header="关 于"/&
&MenuItem Header="退 出"/&
&/StackPanel&
&Rectangle Stroke="Black" StrokeThickness="0" Width="1" Margin="0,0,129.2,10.77" HorizontalAlignment="Right" Height="17"&
&Rectangle.Fill&
&LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&
&GradientStop Color="#"/&
&GradientStop Offset="1" Color="#1A4D4D4D"/&
&/LinearGradientBrush&
&/Rectangle.Fill&
&/Rectangle&
&Rectangle Stroke="Black" StrokeThickness="0" Width="1" Margin="0,0,88.2,8.77" HorizontalAlignment="Right" Height="17"&
&Rectangle.Fill&
&LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&
&GradientStop Color="#"/&
&GradientStop Offset="1" Color="#1A4D4D4D"/&
&/LinearGradientBrush&
&/Rectangle.Fill&
&/Rectangle&
&Rectangle Stroke="Black" StrokeThickness="0" Width="1" Margin="0,0,46.2,8.77" HorizontalAlignment="Right" Height="17"&
&Rectangle.Fill&
&LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&
&GradientStop Color="#"/&
&GradientStop Offset="1" Color="#1A4D4D4D"/&
&/LinearGradientBrush&
&/Rectangle.Fill&
&/Rectangle&
&Rectangle Height="3" Margin="0,0,161.775,0" Stroke="Black" StrokeThickness="0" VerticalAlignment="Top"&
&Rectangle.Fill&
&LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&
&GradientStop Color="#61FFFFFF"/&
&GradientStop Offset="1" Color="#1A4D4D4D"/&
&/LinearGradientBrush&
&/Rectangle.Fill&
&/Rectangle&
&!--上导航栏--&
&TabControl
Name="tab360"
Grid.RowSpan="2" Margin="0" Style="{DynamicResource TabControlStyle}" Grid.Row="1" Background="{x:Null}" SelectionChanged="TabControl_SelectionChanged"&
&TabItem Header="电脑体验" Height="83" Margin="5,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}" TextOptions.TextFormattingMode="Display"&
&TabItem.Background&
&ImageBrush ImageSource="styles/skin/ico/ico_Examine.png"/&
&/TabItem.Background&
&Grid Margin="0" Background="{DynamicResource MyBrush}"&
&Grid.ColumnDefinitions&
&ColumnDefinition Width="0.052*"/&
&ColumnDefinition Width="0.9*"/&
&ColumnDefinition Width="0.048*"/&
&/Grid.ColumnDefinitions&
&Grid.RowDefinitions&
&RowDefinition Height="40.73"/&
&RowDefinition Height="56.667"/&
&RowDefinition Height="338.833"/&
&RowDefinition Height="26.7"/&
&/Grid.RowDefinitions&
&!--详细--&
&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" /&
&pageTransitions:PageTransition Name="pTransitionControl_1" Margin="0" TransitionType="SlideAndFade" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="2"/&
&/TabItem&
&TabItem Header="查杀木马" Height="83" Margin="80,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}"&
&TabItem.Background&
&ImageBrush ImageSource="styles/skin/ico/ico_dsmain.png"/&
&/TabItem.Background&
&Grid Margin="0" Background="{DynamicResource MyBrush}"&
&Grid.ColumnDefinitions&
&ColumnDefinition Width="0.052*"/&
&ColumnDefinition Width="0.9*"/&
&ColumnDefinition Width="0.048*"/&
&/Grid.ColumnDefinitions&
&Grid.RowDefinitions&
&RowDefinition Height="40.73"/&
&RowDefinition Height="56.667"/&
&RowDefinition Height="338.833"/&
&RowDefinition Height="26.7"/&
&/Grid.RowDefinitions&
&!--详细--&
&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" /&
&pageTransitions:PageTransition Name="pTransitionControl_2" Margin="0" TransitionType="SlideAndFade" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="2"/&
&/TabItem&
&TabItem Header="清理插件" Height="83" Margin="155,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}"&
&TabItem.Background&
&ImageBrush ImageSource="styles/skin/ico/ico_PluginCleaner.png"/&
&/TabItem.Background&
&Grid Margin="0" Background="{DynamicResource MyBrush}"&
&Grid.ColumnDefinitions&
&ColumnDefinition Width="0.052*"/&
&ColumnDefinition Width="0.9*"/&
&ColumnDefinition Width="0.048*"/&
&/Grid.ColumnDefinitions&
&Grid.RowDefinitions&
&RowDefinition Height="40.73"/&
&RowDefinition Height="56.667"/&
&RowDefinition Height="338.833"/&
&RowDefinition Height="26.7"/&
&/Grid.RowDefinitions&
&!--详细--&
&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" /&
&pageTransitions:PageTransition Name="pTransitionControl_3" Margin="0" TransitionType="SlideAndFade" Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Grid.RowSpan="2"/&
&/TabItem&
&TabItem Header="修复漏洞" Height="83" Margin="230,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}"&
&TabItem.Background&
&ImageBrush ImageSource="styles/skin/ico/ico_VulRepair.png"/&
&/TabItem.Background&
&Grid Background="{DynamicResource MyBrush}"/&
&/TabItem&
&TabItem Header="清理垃圾" Height="83" Margin="305,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}"&
&TabItem.Background&
&ImageBrush ImageSource="styles/skin/ico/ico_RubbishCleaner.png"/&
&/TabItem.Background&
&Grid Background="{DynamicResource MyBrush}"/&
&/TabItem&
&TabItem Header="清理痕迹" Height="83" Margin="380,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}"&
&TabItem.Background&
&ImageBrush ImageSource="styles/skin/ico/ico_TraceCleaner.png"/&
&/TabItem.Background&
&Grid Background="{DynamicResource MyBrush}"/&
&/TabItem&
&TabItem Header="系统修复" Height="83" Margin="455,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}"&
&TabItem.Background&
&ImageBrush ImageSource="styles/skin/ico/ico_SysRepair.png"/&
&/TabItem.Background&
&Grid Background="{DynamicResource MyBrush}"/&
&/TabItem&
&TabItem Header="功能大全" Height="83" Margin="530,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}"&
&TabItem.Background&
&ImageBrush ImageSource="styles/skin/ico/ico_AdvTools.png"/&
&/TabItem.Background&
&Grid Background="{DynamicResource MyBrush}"/&
&/TabItem&
&TabItem Header="软件管家" Height="83" Margin="605,0,0,0" Width="74" Style="{DynamicResource TabItemStyle}"&
&TabItem.Background&
&ImageBrush ImageSource="styles/skin/ico/ico_softmgr.png"/&
&/TabItem.Background&
&Grid Background="{DynamicResource MyBrush}"/&
&/TabItem&
&/TabControl&
&!--导航详细--&
&!--下状态栏--&
&Label Content="欢迎使用仿360系统"
Margin="0" Grid.Row="3" Foreground="#A794E9FF" FontWeight="Bold" BorderThickness="0" BorderBrush="White" HorizontalAlignment="Left" Width="147.5" TextOptions.TextFormattingMode="Display" /&
&Label Content="已连接网络" Margin="0" Grid.Row="3" Foreground="#A794E9FF" FontWeight="Bold" BorderThickness="0" BorderBrush="White" HorizontalAlignment="Right" Width="80" TextOptions.TextFormattingMode="Display" /&
213 &/Window&
2 using System.Collections.G
3 using System.L
4 using System.T
5 using System.Threading.T
6 using System.W
7 using System.Windows.C
8 using System.Windows.D
9 using System.Windows.D
10 using System.Windows.I
11 using System.Windows.M
12 using System.Windows.Media.I
13 using System.Windows.S
15 namespace _360UI
/// &summary&
/// Like360Main.xaml 的交互逻辑
/// &/summary&
public partial class Like360Main : Window
public Like360Main()
InitializeComponent();
private void closeButton_Click(object sender, RoutedEventArgs e)
this.Close();
private void maxButton_Click(object sender, RoutedEventArgs e)
if (WindowState == WindowState.Normal)
WindowState = WindowState.M
WindowState = WindowState.N
private void mniButton_Click(object sender, RoutedEventArgs e)
this.WindowState = WindowState.M
private void menuButton_Click(object sender, RoutedEventArgs e)
Menu.IsOpen = true;
private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
this.DragMove();
private void TabControl_SelectionChanged(object sender, SelectionChangedEventArgs e)
int index = this.tab360.SelectedI
if (index == 0)
//可以设置TransitionType WpfPage 来更改界面出入的动画效果
//this.pTransitionControl_1.TransitionType = WpfPageTransitions.PageTransitionType.SpinAndF
pages.index newPage = new pages.index();
this.pTransitionControl_1.ShowPage(newPage);
else if (index == 1)
pages.scan newPage = new pages.scan();
this.pTransitionControl_2.ShowPage(newPage);
else if (index == 2)
pages.scan newPage = new pages.scan();
this.pTransitionControl_3.ShowPage(newPage);
pages.index newPage = new pages.index();
this.pTransitionControl_1.ShowPage(newPage);
&当用户单击Tab页签时（切换事件），程序&用pages.index newPage = new pages.index();先实例化一个page子页面（实际继承UserControl)，然后调用 this.pTransitionControl_1.ShowPage(newPage);将子页面进行加载(本质上是pTransitionControl_1.Content=newpage）。
4、运行代码，界面如下：
下面是360安全卫士界面截图，可对比一下，还是比较相似的。
源码下载地址：
阅读(...) 评论()