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、页面切换控件核心代码：
xmlns="
xmlns:x="
xmlns:mc="
xmlns:d="
xmlns:local="clr-namespace:WpfPageTransitions"
mc:Ignorable="d"
d:DesignHeight="" d:DesignWidth="">

<style targettype="{x:Type ContentPresenter}" type="text/css">





</style>










































































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}}" />
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}}" />
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}}" />


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中文字体显示模糊的问题。
xmlns="
xmlns:x="
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" >









































































































































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安全卫士界面截图，可对比一下，还是比较相似的。