本文拟使用MPF来制作带有动画天气切换的QQ界面,MPF是一款采用C++写的优秀的界面引擎,其实现了WPF的依赖属性、事件系统(事件的隧道、冒泡等)以及控件模板定制,最大程度使得绘制、控件的状态变化对用户透明,相对于目前市面上的界面库有其自己的特点,目前其提供了内核(suicore.dll)和控件(suiwgx.dll)两个库,废话不多说,下面进入正题。
首先,使用Visual Studio2005建立一个win32工程(MPF本身不依赖任何版本的Visual Studio工具,我们也可以使用2008或2010都可以),工程名称为QQDemon,然后在Main函数里填入如下 代码:
//加载资源文件
suic::LoadRes("default.sres","def");
suic::StringstrApp =_T("layout/QQ/QQDemonApp.xml");
// 载入布局资源并运行系统
suic::Application::RunApplication(newQQWindow(),strApp.c_str());
启动代码够简单吧,下面对如上代码做一个解释,由于MPF分为核心引擎库和第三方的控件库(居于MPF内核扩展的控件),suic::LoadRes("default.sres","def");载入默认的样式、资源或布局文件,此文件支持加密;最后suic::Application::RunApplication(newQQWindow(),strApp.c_str());就是载入布局文件,主窗体使用分配的QQWindow窗体。QQWindow继承于内核的Window对象。
下面对"layout/QQ/QQDemonApp.xml"描述的布局做一个简单说明,因为,QQ2013主窗体支持动态背景天气变化,因此,在窗体布局里需要加入FlashBox用于显示动态天气变化Flash;注意,FlashBox必须位于窗体布局的第二层(第一层为主窗体布局),其它的诸如标题,搜索栏等位于其上,布局代码片段如下(完成请查看资源包):
<PanelName="MainPanel"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"Background1="{bk}" >
<!--背景动画-->
<FlashBoxName="TitleFlash"Width="620"Height="342"Source="swf/sun.swf"HorizontalAlignment="Right" />
<PanelName="TopPanel"HorizontalAlignment="Stretch"VerticalAlignment="Top"Height="125" >
<!--标题栏-->
<StackLayoutHorizontalAlignment="Stretch"VerticalAlignment="Top"Height="22" >
<LabelName="CapText"GlowTextColor="#FFFFFF"Foreground="#222222"Font="{CapFont}"Text="QQ2013"Margin="4,0,0,0"
HorizontalAlignment="Stretch"VerticalAlignment=" Stretch"VerticalContentAlignment="Center" />
<ButtonName="SkinBtn"Style="{SkinButton}" ToolTip="更改外观" />
<SystemMinButton Name="SysMin"ToolTip="最小化" />
<SystemCloseButtonName="SysClose"ToolTip="最大化" />
</StackLayout>
对于QQ的登录界面也是同样原理,完成后的效果先启动QQ登录界面,如下:
点击做了简单的输入验证处理,只有输入了QQ号码和密码才能进入主窗体,否则提示错误,效果如下:
输入了QQ号码和密码后,进入QQ的主面板窗口,效果如下:
进入后天气默认为晴天(因为测试用,没有连接实时天气),为了达到和QQ的相同的文字发光效果,需要在元素绘制属性加入GlowTextColor="#FFFFFF",标识绘制白色的发光文字效果,布局代码片段如下:
<!--标题栏-->
<StackLayoutHorizontalAlignment="Stretch"VerticalAlignment="Top"Height="22" >
<LabelName="CapText"GlowTextColor="#FFFFFF"Foreground="#222222"
下面为了实现动态的天气变化效果,加入一个定时器,5秒后天气效果切换到下雨,因为MPF支持窗体定时器(传统的WM_TIMER消息)和线程定时器,我们这里简单使用窗体定时器,在Window里的OnLoaded里启动定时器,为什么要在OnLoaded事件里启动窗口定时器呢,那是因为MPF只有接收到OnLoaded事件后真实的窗体才存在,所以,设置的定时器也才有效果,代码如下:
voidQQWindow::OnLoaded(suic::LoadedEventArg&e)
{
__super::OnLoaded(e);
LoginWindowPtrlogin(suic::Application::LoadComponent(newQQLoginWindow(),"layout/QQ/QQLogin.xml"));
// 窗口居中显示
CenterWindow();
if (login)
{
login->SetOwner(this);
login->ShowDialog();
//登录不成功,直接关闭主窗口
if (!login->IsLogin())
{
AsyncClose();
return;
}
}
// 初始化用户信息
InitUserInfo();
_timerId = SetTimer(1000);
}
上面红色部分就是启动了窗口定时器,变化频率为1秒钟,定时器代码如下:
if (_weather == 0 ||_weather == 5)
{
SetBackground(FindResource(_weather == 0 ?_T("bk") :_T("rain_bk")));
ui::FlashBoxPtrflash(FindName(_T("TitleFlash")));
flash->LoadMovie(_weather == 0 ?_T("swf/sun.swf") :_T("swf/rain.swf"));
suic::WidgetPtrweather(FindName(_T("Weather")));
weather->SetBackground(newsuic::ImageBrush(_T("images/QQ/Weather/Big_8.png")));
KillTimer(_timerId);
}
我们5秒后切换到雨天效果,并关闭定时器,因此,此后的界面都处于雨天效果状态,变化后的界面效果如下:
大家可以下载Demon实际运行看看效果,如果需要源码的,可以到群206378966进行咨询。