WPF實現類似360安全衛士界面的程序源碼分享

2020-01-24 01:27:06

字體：大中小

來源：轉載

供稿：網友

下面通過圖文并茂的方式給大家介紹WPF實現類似360安全衛士界面的程序源碼分享，點擊此處下載源碼哦。

以前學習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、頁面切換控件核心代碼：

<UserControl x:Class="WpfPageTransitions.PageTransition"    xmlns="http://schemas.microsoft.com/winfx//xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx//xaml"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/"     xmlns:d="http://schemas.microsoft.com/expression/blend/"     xmlns:local="clr-namespace:WpfPageTransitions"    mc:Ignorable="d"     d:DesignHeight="" d:DesignWidth="">  <UserControl.Resources>   <Style TargetType="{x:Type ContentPresenter}">    <Setter Property="LayoutTransform">     <Setter.Value>      <ScaleTransform />     </Setter.Value>    </Setter>   </Style>   <local:CenterConverter x:Key="centerConverter"/>   <!-- Slide and Fade -->   <Storyboard x:Key="SlideAndFadeIn" >    <ThicknessAnimation Duration="::." Storyboard.TargetProperty="Margin" From=",,-," To="" DecelerationRatio="." />    <DoubleAnimation Duration="::." Storyboard.TargetProperty="Opacity" From="" To="" />   </Storyboard>   <Storyboard x:Key="SlideAndFadeOut">    <ThicknessAnimation Duration="::." Storyboard.TargetProperty="Margin" To="-,,," AccelerationRatio="."/>    <DoubleAnimation Duration="::." Storyboard.TargetProperty="Opacity" To="" />   </Storyboard>   <!-- Fade -->   <Storyboard x:Key="FadeIn" >    <DoubleAnimation Duration="::." Storyboard.TargetProperty="Opacity" From="" To="" />   </Storyboard>   <Storyboard x:Key="FadeOut">    <DoubleAnimation Duration="::." Storyboard.TargetProperty="Opacity" To="" />   </Storyboard>   <!-- Slide -->   <Storyboard x:Key="SlideIn" >    <ThicknessAnimation Duration="::." Storyboard.TargetProperty="Margin" From=",,-," To="" DecelerationRatio="." />   </Storyboard>   <Storyboard x:Key="SlideOut">    <ThicknessAnimation Duration="::." Storyboard.TargetProperty="Margin" To="-,,," AccelerationRatio="."/>   </Storyboard>   <!-- Grow -->   <Storyboard x:Key="GrowIn" >    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleX)" From="" To="" Duration="::." DecelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleY)" From="" To="" Duration="::." DecelerationRatio="." />   </Storyboard>   <Storyboard x:Key="GrowOut">    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleX)" To="" Duration="::." AccelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleY)" To="" Duration="::." AccelerationRatio="." />   </Storyboard>   <!-- Grow and Fade -->   <Storyboard x:Key="GrowAndFadeIn" >    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleX)" From="" To="" Duration="::." DecelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleY)" From="" To="" Duration="::." DecelerationRatio="." />    <DoubleAnimation Duration="::." Storyboard.TargetProperty="Opacity" From="" To="" />   </Storyboard>   <Storyboard x:Key="GrowAndFadeOut">    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleX)" To="" Duration="::." AccelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleY)" To="" Duration="::." AccelerationRatio="." />    <DoubleAnimation Duration="::." Storyboard.TargetProperty="Opacity" To="" />   </Storyboard>   <!-- Flip -->   <Storyboard x:Key="FlipIn" >    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(SkewTransform.AngleX)" From="-" To="" Duration="::." DecelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(SkewTransform.AngleY)" From="-" To="" Duration="::." DecelerationRatio="." />   </Storyboard>   <Storyboard x:Key="FlipOut">    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(SkewTransform.AngleX)" To="" Duration="::." AccelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(SkewTransform.AngleY)" To="" Duration="::." AccelerationRatio="." />   </Storyboard>   <!-- Flip and Fade -->   <Storyboard x:Key="FlipAndFadeIn" >    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(SkewTransform.AngleX)" From="-" To="" Duration="::." DecelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(SkewTransform.AngleY)" From="-" To="" Duration="::." DecelerationRatio="." />    <DoubleAnimation Duration="::." Storyboard.TargetProperty="Opacity" From="" To="" />   </Storyboard>   <Storyboard x:Key="FlipAndFadeOut">    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(SkewTransform.AngleX)" To="" Duration="::." AccelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(SkewTransform.AngleY)" To="" Duration="::." AccelerationRatio="." />    <DoubleAnimation Duration="::." Storyboard.TargetProperty="Opacity" To="" />   </Storyboard>   <!-- Spin -->   <Storyboard x:Key="SpinIn" >    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(RotateTransform.Angle)" From="-" To="" Duration="::." DecelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleX)" From="" To="" Duration="::." DecelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleY)" From="" To="" Duration="::." DecelerationRatio="." />      </Storyboard>   <Storyboard x:Key="SpinOut">    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(RotateTransform.Angle)" To="" Duration="::." AccelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleX)" To="" Duration="::." AccelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleY)" To="" Duration="::." AccelerationRatio="." />   </Storyboard>   <!-- Spin and Fade -->   <Storyboard x:Key="SpinAndFadeIn" >    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(RotateTransform.Angle)" From="-" To="" Duration="::." DecelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleX)" From="" To="" Duration="::." DecelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleY)" From="" To="" Duration="::." DecelerationRatio="." />    <DoubleAnimation Duration="::." Storyboard.TargetProperty="Opacity" From="" To="" />   </Storyboard>   <Storyboard x:Key="SpinAndFadeOut">    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(RotateTransform.Angle)" To="" Duration="::." AccelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleX)" To="" Duration="::." AccelerationRatio="." />    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[].(ScaleTransform.ScaleY)" To="" Duration="::." AccelerationRatio="." />    <DoubleAnimation Duration="::." Storyboard.TargetProperty="Opacity" To="" />   </Storyboard>  </UserControl.Resources>  <Grid Name="page">   <ContentControl Name="contentPresenter" >    <ContentControl.RenderTransform>     <TransformGroup>      <ScaleTransform ScaleX="" ScaleY=""          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="" AngleY=""          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=""           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="" Y="" />     </TransformGroup>    </ContentControl.RenderTransform>   </ContentControl>  </Grid> </UserControl> using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Threading.Tasks; using System.Windows.Media.Animation; 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   {    get    {     return (PageTransitionType)GetValue(TransitionTypeProperty);    }    set     {     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 UserControl;       if (oldPage != null)       {        oldPage.Loaded -= newPage_Loaded;        UnloadPage(oldPage);       }      }      else      {       ShowNextPage();      }     });   }   void ShowNextPage()   {    UserControl newPage = pages.Pop();    newPage.Loaded += newPage_Loaded;    contentPresenter.Content = newPage;   }   void UnloadPage(UserControl page)   {    Storyboard hidePage = (Resources[string.Format("{}Out", TransitionType.ToString())] as Storyboard).Clone();    hidePage.Completed += hidePage_Completed;    hidePage.Begin(contentPresenter);   }   void newPage_Loaded(object sender, RoutedEventArgs e)   {    Storyboard showNewPage = Resources[string.Format("{}In", TransitionType.ToString())] as Storyboard;    showNewPage.Begin(contentPresenter);    CurrentPage = sender as UserControl;   }     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中文字體顯示模糊的問題。

 <Window x:Class="_UI.LikeMain"   xmlns="http://schemas.microsoft.com/winfx//xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx//xaml"   Title="LikeMain" Height="" Width=""    FontFamily="SimSun"   AllowsTransparency="True" WindowStyle="None"    xmlns:pageTransitions="clr-namespace:WpfPageTransitions;assembly=WpfPageTransitions"   Background="{x:Null}" MouseLeftButtonDown="Window_MouseLeftButtonDown" TextOptions.TextFormattingMode="Display" >  <Window.Resources>   <LinearGradientBrush x:Key="MyBrush" EndPoint=".," StartPoint=".,">    <GradientStop Color="#CFFFFFFF"/>    <GradientStop Color="#FFEBDD" Offset=""/>   </LinearGradientBrush>  </Window.Resources>  <Border BorderBrush="Black" BorderThickness="" CornerRadius="" Margin="">   <Border.Effect>    <DropShadowEffect ShadowDepth="" Opacity="."/>   </Border.Effect>   <Border.Background>    <ImageBrush ImageSource="styles/skin/frame.jpg"/>   </Border.Background>   <Grid>    <Grid.RowDefinitions>     <RowDefinition Height="."/>     <RowDefinition Height="."/>     <RowDefinition/>     <RowDefinition Height="."/>    </Grid.RowDefinitions>    <!--上標題欄-->    <Label Content="安全衛士界面" HorizontalAlignment="Left" Width="." Foreground="#AEFF" FontWeight="Bold" TextOptions.TextFormattingMode="Display"/>    <Rectangle Margin="" Stroke="Black" HorizontalAlignment="Right" Width="." Grid.Row="" StrokeThickness="">     <Rectangle.Fill>      <ImageBrush ImageSource="styles/skin/logo.png" Stretch="Uniform"/>     </Rectangle.Fill>    </Rectangle>    <Button Content="x" HorizontalAlignment="Right" Margin=",,.," Style="{DynamicResource SysButtonStyle}" Width="." Name="closeButton" Click="closeButton_Click" />    <Button Content="max" HorizontalAlignment="Right" Margin=",,.," Style="{DynamicResource MaxButtonStyle}" Width="." Name="maxButton" Click="maxButton_Click">     <Button.Background>      <ImageBrush ImageSource="styles/skin/Button/MAX.png" Stretch="Uniform"/>     </Button.Background>    </Button>    <Button Content="mni" HorizontalAlignment="Right" Margin=",,.," Style="{DynamicResource MaxButtonStyle}" Width="." Name="mniButton" Click="mniButton_Click">     <Button.Background>      <ImageBrush ImageSource="styles/skin/Button/MNI.png" Stretch="Uniform"/>     </Button.Background>    </Button>    <Button x:Name="menuButton" HorizontalAlignment="Right" Margin=",,.," Style="{DynamicResource MButtonStyle}" Width="." Click="menuButton_Click">     <Button.Background>      <ImageBrush ImageSource="styles/skin/Button/M.png" Stretch="Uniform"/>     </Button.Background>    </Button>    <Popup x:Name="Menu" AllowsTransparency="True" Margin=",-,," PlacementTarget="{Binding ElementName=menuButton}" StaysOpen="False" PopupAnimation="Scroll">     <Grid Height="." Width="" Margin="" HorizontalAlignment="Left">      <Border BorderThickness="" CornerRadius="" Background="#FFEFEFEF" Margin="">       <Border.Effect>        <DropShadowEffect ShadowDepth="" Opacity="."/>       </Border.Effect>       <StackPanel Margin=",">        <MenuItem Header="設 置" Style="{DynamicResource MenuItemStyle}"/>        <MenuItem Header="更 新"/>        <MenuItem Header="關 于"/>        <MenuItem Header="退 出"/>       </StackPanel>      </Border>     </Grid>    </Popup>    <Rectangle Stroke="Black" StrokeThickness="" Width="" Margin=",,.,." HorizontalAlignment="Right" Height="">     <Rectangle.Fill>      <LinearGradientBrush EndPoint=".," StartPoint=".,">       <GradientStop Color="#"/>       <GradientStop Offset="" Color="#ADDD"/>      </LinearGradientBrush>     </Rectangle.Fill>    </Rectangle>    <Rectangle Stroke="Black" StrokeThickness="" Width="" Margin=",,.,." HorizontalAlignment="Right" Height="">     <Rectangle.Fill>      <LinearGradientBrush EndPoint=".," StartPoint=".,">       <GradientStop Color="#"/>       <GradientStop Offset="" Color="#ADDD"/>      </LinearGradientBrush>     </Rectangle.Fill>    </Rectangle>    <Rectangle Stroke="Black" StrokeThickness="" Width="" Margin=",,.,." HorizontalAlignment="Right" Height="">     <Rectangle.Fill>      <LinearGradientBrush EndPoint=".," StartPoint=".,">       <GradientStop Color="#"/>       <GradientStop Offset="" Color="#ADDD"/>      </LinearGradientBrush>     </Rectangle.Fill>    </Rectangle>    <Rectangle Height="" Margin=",,.," Stroke="Black" StrokeThickness="" VerticalAlignment="Top">     <Rectangle.Fill>      <LinearGradientBrush EndPoint=".," StartPoint=".,">       <GradientStop Color="#FFFFFF"/>       <GradientStop Offset="" Color="#ADDD"/>      </LinearGradientBrush>     </Rectangle.Fill>    </Rectangle>    <!--上導航欄-->    <TabControl Name="tab" Grid.RowSpan="" Margin="" Style="{DynamicResource TabControlStyle}" Grid.Row="" Background="{x:Null}" SelectionChanged="TabControl_SelectionChanged">      <TabItem Header="電腦體驗" Height="" Margin=",,," Width="" Style="{DynamicResource TabItemStyle}" TextOptions.TextFormattingMode="Display">      <TabItem.Background>       <ImageBrush ImageSource="styles/skin/ico/ico_Examine.png"/>      </TabItem.Background>      <Grid Margin="" Background="{DynamicResource MyBrush}">       <Grid.ColumnDefinitions>        <ColumnDefinition Width=".*"/>        <ColumnDefinition Width=".*"/>        <ColumnDefinition Width=".*"/>       </Grid.ColumnDefinitions>       <Grid.RowDefinitions>        <RowDefinition Height="."/>        <RowDefinition Height="."/>        <RowDefinition Height="."/>        <RowDefinition Height="."/>       </Grid.RowDefinitions>       <!--詳細-->       <Label Content="電腦體檢" HorizontalAlignment="Left" Margin="" Width="." Height="" FontSize="." FontWeight="Bold" Grid.Column="" Grid.Row="" Grid.ColumnSpan="" />       <pageTransitions:PageTransition Name="pTransitionControl_" Margin="" TransitionType="SlideAndFade" Grid.Column="" Grid.Row="" Grid.ColumnSpan="" Grid.RowSpan=""/>      </Grid>     </TabItem>     <TabItem Header="查殺木馬" Height="" Margin=",,," Width="" Style="{DynamicResource TabItemStyle}">      <TabItem.Background>       <ImageBrush ImageSource="styles/skin/ico/ico_dsmain.png"/>      </TabItem.Background>      <Grid Margin="" Background="{DynamicResource MyBrush}">       <Grid.ColumnDefinitions>        <ColumnDefinition Width=".*"/>        <ColumnDefinition Width=".*"/>        <ColumnDefinition Width=".*"/>       </Grid.ColumnDefinitions>       <Grid.RowDefinitions>        <RowDefinition Height="."/>        <RowDefinition Height="."/>        <RowDefinition Height="."/>        <RowDefinition Height="."/>       </Grid.RowDefinitions>       <!--詳細-->       <Label Content="查殺木馬" HorizontalAlignment="Left" Margin="" Width="." Height="" FontSize="." FontWeight="Bold" Grid.Column="" Grid.Row="" Grid.ColumnSpan="" />       <pageTransitions:PageTransition Name="pTransitionControl_" Margin="" TransitionType="SlideAndFade" Grid.Column="" Grid.Row="" Grid.ColumnSpan="" Grid.RowSpan=""/>      </Grid>     </TabItem>     <TabItem Header="清理插件" Height="" Margin=",,," Width="" Style="{DynamicResource TabItemStyle}">      <TabItem.Background>       <ImageBrush ImageSource="styles/skin/ico/ico_PluginCleaner.png"/>      </TabItem.Background>      <Grid Margin="" Background="{DynamicResource MyBrush}">       <Grid.ColumnDefinitions>        <ColumnDefinition Width=".*"/>        <ColumnDefinition Width=".*"/>        <ColumnDefinition Width=".*"/>       </Grid.ColumnDefinitions>       <Grid.RowDefinitions>        <RowDefinition Height="."/>        <RowDefinition Height="."/>        <RowDefinition Height="."/>        <RowDefinition Height="."/>       </Grid.RowDefinitions>       <!--詳細-->       <Label Content="清理插件" HorizontalAlignment="Left" Margin="" Width="." Height="" FontSize="." FontWeight="Bold" Grid.Column="" Grid.Row="" Grid.ColumnSpan="" />       <pageTransitions:PageTransition Name="pTransitionControl_" Margin="" TransitionType="SlideAndFade" Grid.Column="" Grid.Row="" Grid.ColumnSpan="" Grid.RowSpan=""/>      </Grid>     </TabItem>     <TabItem Header="修復漏洞" Height="" Margin=",,," Width="" Style="{DynamicResource TabItemStyle}">      <TabItem.Background>       <ImageBrush ImageSource="styles/skin/ico/ico_VulRepair.png"/>      </TabItem.Background>      <Grid Background="{DynamicResource MyBrush}"/>     </TabItem>     <TabItem Header="清理垃圾" Height="" Margin=",,," Width="" Style="{DynamicResource TabItemStyle}">      <TabItem.Background>       <ImageBrush ImageSource="styles/skin/ico/ico_RubbishCleaner.png"/>      </TabItem.Background>      <Grid Background="{DynamicResource MyBrush}"/>     </TabItem>     <TabItem Header="清理痕跡" Height="" Margin=",,," Width="" Style="{DynamicResource TabItemStyle}">      <TabItem.Background>       <ImageBrush ImageSource="styles/skin/ico/ico_TraceCleaner.png"/>      </TabItem.Background>      <Grid Background="{DynamicResource MyBrush}"/>     </TabItem>     <TabItem Header="系統修復" Height="" Margin=",,," Width="" Style="{DynamicResource TabItemStyle}">      <TabItem.Background>       <ImageBrush ImageSource="styles/skin/ico/ico_SysRepair.png"/>      </TabItem.Background>      <Grid Background="{DynamicResource MyBrush}"/>     </TabItem>     <TabItem Header="功能大全" Height="" Margin=",,," Width="" Style="{DynamicResource TabItemStyle}">      <TabItem.Background>       <ImageBrush ImageSource="styles/skin/ico/ico_AdvTools.png"/>      </TabItem.Background>      <Grid Background="{DynamicResource MyBrush}"/>     </TabItem>     <TabItem Header="軟件管家" Height="" Margin=",,," Width="" Style="{DynamicResource TabItemStyle}">      <TabItem.Background>       <ImageBrush ImageSource="styles/skin/ico/ico_softmgr.png"/>      </TabItem.Background>      <Grid Background="{DynamicResource MyBrush}"/>     </TabItem>    </TabControl>    <!--導航詳細-->    <!--下狀態欄-->    <Label Content="歡迎使用仿系統" Margin="" Grid.Row="" Foreground="#AEFF" FontWeight="Bold" BorderThickness="" BorderBrush="White" HorizontalAlignment="Left" Width="." TextOptions.TextFormattingMode="Display" />    <Label Content="已連接網絡" Margin="" Grid.Row="" Foreground="#AEFF" FontWeight="Bold" BorderThickness="" BorderBrush="White" HorizontalAlignment="Right" Width="" TextOptions.TextFormattingMode="Display" />   </Grid>  </Border> </Window> using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Shapes; namespace _UI {  /// <summary>  /// LikeMain.xaml 的交互邏輯  /// </summary>  public partial class LikeMain : Window  {   public LikeMain()   {    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.Maximized;    else     WindowState = WindowState.Normal;    }   private void mniButton_Click(object sender, RoutedEventArgs e)   {    this.WindowState = WindowState.Minimized;   }   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.tab.SelectedIndex;    if (index == )    {     //可以設置TransitionType WpfPage 來更改界面出入的動畫效果     //this.pTransitionControl_.TransitionType = WpfPageTransitions.PageTransitionType.SpinAndFade;     pages.index newPage = new pages.index();     this.pTransitionControl_.ShowPage(newPage);    }    else if (index == )    {     pages.scan newPage = new pages.scan();     this.pTransitionControl_.ShowPage(newPage);    }    else if (index == )    {     pages.scan newPage = new pages.scan();     this.pTransitionControl_.ShowPage(newPage);    }    else    {     pages.index newPage = new pages.index();     this.pTransitionControl_.ShowPage(newPage);    }   }  } }

當用戶單擊Tab頁簽時（切換事件），程序用pages.index newPage = new pages.index();先實例化一個page子頁面（實際繼承UserControl)，然后調用 this.pTransitionControl_1.ShowPage(newPage);將子頁面進行加載(本質上是pTransitionControl_1.Content=newpage）。

4、運行代碼，界面如下：

下面是360安全衛士界面截圖，可對比一下，還是比較相似的。