×
Namespaces

Variants
Actions
Revision as of 01:15, 16 July 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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.
141 page views in the last 30 days.