×
Namespaces

Variants
Actions

Qt和WP7的页面渐变效果

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon Porting.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
翻译:
WS_YiLunLuo
最后由 hamishwillee 在 16 Jul 2013 编辑


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

Contents

简介

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


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


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

基本思路

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

实现

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

Qt项目(main.qml)

两个页面都是包括 ListViewButton的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,等等。

示例代码

This page was last modified on 16 July 2013, at 01:15.
186 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×