WPF界面—仿360安全卫士9.0界面

主要思路如下：

该界面主要有三大部分

第一部分：标题栏部分就是最上面那一行

第二部分：内容区域(也就是页标签部分)

第三部分：换肤部分(点击换肤小按钮弹出的内容部分)

根据分析我们可以使用一个有两行的网格(Grid)进行布局，第一行“标题栏”部分；第二行“页标签部分”,对于“换肤部分”是直接显示在当前界面之上的内容，使用"Popup"标签实现。

代码很长，我只粘贴部分代码，随后将上传至资源区

1、定义无边框窗体样式和Button样式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!--无边框的窗体样式-->
    <Style x:Key="NoResize_window" TargetType="{x:Type Window}">
        <Setter Property="AllowsTransparency" Value="true"/>
        <Setter Property="Background" Value="Transparent"/>
        <!-- <Setter Property="ResizeMode" Value="CanResizeWithGrip"/>-->
        <Setter Property="WindowStyle" Value="None"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Window}">
                    <Grid Margin="5">
                        <Rectangle Fill="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"    >
                            <Rectangle.Effect>
                                <DropShadowEffect BlurRadius="5" ShadowDepth="0"/>
                            </Rectangle.Effect>
                        </Rectangle>
                        <Border Background="{TemplateBinding Background}"    
                        BorderBrush="{TemplateBinding BorderBrush}"    
                        BorderThickness="{TemplateBinding BorderThickness}"    
                        Padding="{TemplateBinding Margin}"    
                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
                            <ContentPresenter />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!--Button样式-->
    <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ValidationStates">
                                <VisualState x:Name="InvalidFocused"/>
                                <VisualState x:Name="InvalidUnfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="5">
                            <Border.Effect>
                                <DropShadowEffect ShadowDepth="0" Opacity="0.85"/>
                            </Border.Effect>
                        </Border>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsFocused" Value="True"/>
                        <Trigger Property="IsDefaulted" Value="True"/>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Effect" TargetName="border">
                                <Setter.Value>
                                    <DropShadowEffect Color="#FF00F3FF" Opacity="0.85" ShadowDepth="0"/>
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True"/>
                        <Trigger Property="IsEnabled" Value="False"/>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- Resource dictionary entries should be defined here. -->
</ResourceDictionary>

2、逻辑处理代码

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Xml;

namespace _360UI9
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.Loaded += MainWindow_Loaded;
        }

        void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            //窗体加载的时候获取保存的皮肤
            XmlDocument doc = new XmlDocument();
            string xmlpath = AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "skin.xml";
            doc.Load(xmlpath);
            XmlNode xnode = doc.SelectSingleNode("bd");
            XmlElement xe = (XmlElement)xnode["skin"];
            skinbrush.Background = App.Current.FindResource(xe.GetAttribute("name")) as Brush;
        }
        //换肤
        private void btnChangeSkin_Click(object sender, RoutedEventArgs e)
        {
            //显示换肤界面
            skinui.IsOpen = true;
        }
        //反馈
        private void btnFeedback_Click(object sender, RoutedEventArgs e)
        {

        }
        //最小化
        private void btnMin_Click(object sender, RoutedEventArgs e)
        {
            this.WindowState = System.Windows.WindowState.Minimized;
        }
        //主菜单
        private void btnMainMenu_Click(object sender, RoutedEventArgs e)
        {

        }
        //最大化
        private void btnMax_Click(object sender, RoutedEventArgs e)
        {
            if (this.WindowState != System.Windows.WindowState.Maximized)
            {
                this.WindowState = System.Windows.WindowState.Maximized;
            }
            else
            {
                this.WindowState = System.Windows.WindowState.Normal;
            }
        }
        //关闭
        private void btnClose_Click(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
        //实现换肤
        private void ChangeSkin(object sender, RoutedEventArgs e)
        {
            Button bt = (Button)sender;
            skinbrush.Background = App.Current.FindResource(bt.Name) as Brush;
            //将选择的皮肤保存到XML文件
            XmlDocument doc = new XmlDocument();
            string xmlpath = AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "skin.xml";
            doc.Load(xmlpath);
            XmlNode xnode = doc.SelectSingleNode("bd");
            XmlElement xe = (XmlElement)xnode["skin"];
            xe.SetAttribute("name", bt.Name);
            doc.Save(AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "skin.xml");
        }
    }
}

效果如下:

源代码下载：点击打开链接