基于MPF的动态天气背景QQ界面

        本文拟使用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进行咨询。