主要思路如下:
该界面主要有三大部分
第一部分:标题栏部分就是最上面那一行
第二部分:内容区域(也就是页标签部分)
第三部分:换肤部分(点击换肤小按钮弹出的内容部分)
根据分析我们可以使用一个有两行的网格(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");
}
}
}
效果如下:
源代码下载:点击打开链接