Qt和WP7的页面渐变效果

Comments

(no comments yet)

Log in or Join to leave comments.

文章信息

---

代码示例

源文件: Media: PageTransitionQt.zip Media: pageTransitionWP7.zip

---

文章

翻译:

翻译自: Page transition in Qt and WP7

由 WS_YiLunLuo

最后由 hamishwillee 在 30 Nov 2012 编辑

本文说明如何在WP7中实现类似Qt中的sliding transition的页面切换时的渐变效果。

简介

在本文中你会看到如何在页面切换时实现一个sliding transition效果。Qt和WP7的实现方法是不同的。在WP7中我们使用 Silverlight Toolkit实现整个页面的渐变。在Qt中我们使用State和Transition实现某个 ListView中的渐变。但视觉效果基本上是一致的。

Qt	Windows Phone
Sliding Transition in Qt	Sliding Transition in WP7
Example of Qt	Example of WP

Note: 在上述静态截图中，渐变效果看不出来。请下载运行示例文件看到效果。

基本思路

我们创建两个页面。第一个页面中有一个按钮，点击后导航到第二个页面，在这个过程中展现一个渐变效果。第二个页面中也有一个按钮可以导航回第一个页面。

实现

创建一个空的Qt和WP7项目。首先先看Qt然后再看WP7。

Qt项目(main.qml)

两个页面都是包括 ListView和 Button的Item。第一个页面的按钮被按下时，该对象默认的State改变了， PropertyChanges使该Item的值的当前状态改变成了新的状态，这就展示了一个渐变效果。

//Page 1
        Item {
            id: view1
            width: parent.width
            height: parent.height
           ListView {
               Text {
                   id: header1
                   text: qsTr("First Page")
                   color: "white"
                   font.pixelSize: 30
                   font.bold: true;
                   anchors.horizontalCenter: parent.horizontalCenter;
                   anchors.top :parent.top
               }
               Button{
               id: button1
               text: "Go next"
               anchors.verticalCenter: parent.verticalCenter
               anchors.horizontalCenter: parent.horizontalCenter
               onClicked:
               {
                   loadSecond();
               }
              }
                id: lView1;
                width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100;
            }
            states:
                State {
                name: "ListView"; when: screen.inFirstScreen == true
                PropertyChanges { target: lView1; x: 0 }
                PropertyChanges { target: photoListViewIngredient2; x: -(parent.width * 1.5) }
                       }
            transitions: Transition {
                NumberAnimation { properties: "x"; duration: 700; easing.type: Easing.InOutQuad }
            }
   }
 
 
        //Page 2
        Item {
            id: view2
            width: parent.width
            height: parent.height
            anchors.top: parent.top; anchors.bottom: parent.bottom
           ListView {
               Text {
                   id: header2
                   text: qsTr("Second Page")
                   color: "white"
                   font.pixelSize: 30
                   font.bold: true;
                   anchors.horizontalCenter: parent.horizontalCenter;
                   anchors.top :parent.top
               }
               Image {
                   id: image2
                   source: "Nokia-Lumia-800-Logo.jpg"
                   anchors.top:header2.bottom
                   anchors.horizontalCenter: parent.horizontalCenter
                   height: 170
                   width: 320
               }
               Button{
               id: button2
               text: "Go back"
               anchors.verticalCenter: parent.verticalCenter
               anchors.horizontalCenter: parent.horizontalCenter
               onClicked:
               {
                   loadFirst();
               }
              }
                id: lView2;
                width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100;
            }
            states:
                State {
                name: "ListView"; when: screen.inSecondScreen == true
                PropertyChanges { target: lView2; x: 0 }
                PropertyChanges { target: lView1; x: -(parent.width * 1.5) }
                       }
            transitions: Transition {
                NumberAnimation { properties: "x"; duration: 700; easing.type: Easing.InOutQuad }
            }
         }

WP7项目(MainPage.xaml)

首先要下载Silverlight Toolkit，并且添加Microsoft.Phone.Controls.Toolkit的引用。接下来创建一个新的XAML页面（NewPage.xaml），这就是第二个页面，MainPage.xaml是第一个页面。添加一个命名空间的引用：

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

现在在两个XAML页面中都加入实现渐变效果的markup，这样渐变实现就完成了。

<toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:SlideTransition  Mode="SlideRightFadeIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:SlideTransition Mode="SlideRightFadeIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:SlideTransition Mode="SlideLeftFadeOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:SlideTransition Mode="SlideLeftFadeOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>

现在编译并运行项目，你会发现看不到渐变效果。为了看到渐变效果，请修改App.xaml.cs中的InitializePhoneApplication方法。找到这一行：

RootFrame = new PhoneApplicationFrame();

改成这一行：

RootFrame = new TransitionFrame();

Sliverlight Toolkit也提供了其它渐变效果，例如Turnstile，Swivel，Rotate，等等。

示例代码

• Qt版本的源代码在这里： File:PageTransitionQt.zip
• WP7版本的源代码在这里：File:PageTransitionWP7.zip