WPF实现类似360安全卫士界面的程序源码分享

下面通过图文并茂的方式给大家介绍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、页面切换控件核心代码：

  
   
   
   
   
    
    
   
   
    
    
   
   
   
    
   
   
    
   
   
   
    
   
   
    
   
   
   
    
    
   
   
    
    
   
   
   
    
    
    
   
   
    
    
    
   
   
   
    
    
   
   
    
    
   
   
   
    
    
    
   
   
    
    
    
   
   
   
    
    
       
   
   
    
    
    
   
   
   
    
    
    
    
   
   
    
    
    
    
   
  
  
   
    
     
      
      
      
      
     
    
   
  
 

 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 pages = new Stack();
   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中文字体显示模糊的问题。

 
  
   
    
    
   
  
  
   
    
   
   
    
   
   
    
     
     
     
     
    
    
    
    
     
      
     
    
    
    
     
      
     
    
    
     
      
     
    
    
     
      
     
    
    
     
      
       
        
       
       
        
        
        
        
       
      
     
    
    
     
      
       
       
      
     
    
    
     
      
       
       
      
     
    
    
     
      
       
       
      
     
    
    
     
      
       
       
      
     
    
    
    
      
      
       
      
      
       
        
        
        
       
       
        
        
        
        
       
       
       
       
      
     
     
      
       
      
      
       
        
        
        
       
       
        
        
        
        
       
       
       
       
      
     
     
      
       
      
      
       
        
        
        
       
       
        
        
        
        
       
       
       
       
      
     
     
      
       
      
      
     
     
      
       
      
      
     
     
      
       
      
      
     
     
      
       
      
      
     
     
      
       
      
      
     
     
      
       
      
      
     
    
    
    
    
    
   
  
 

 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
 {
  /// 

  /// LikeMain.xaml 的交互逻辑
  /// 
  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安全卫士界面截图，可对比一下，还是比较相似的。