Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Windows Phone里的倾斜效果

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

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

本文阐述了怎样在Windows Phone里实现Tilt Effect(倾斜效果)。

Contents

简介

Windows Phone提供了一个视觉效果叫做Tilt Effect,可以用来为控件的交互添加额外的视觉效果。使用Tilt Effect的控件在交互时提供了动画。我们可以为控件,例如Button添加IsTiltEnabled的属性来实现倾斜效果。这是在一个自定义的类(叫做TiltEffect.cs)里定义的一个DependencyProperty。你将在该项目的源代码里找到这个文件。倾斜效果可以是全局的,如此一来该应用程序里的所有控件都拥有了这个倾斜效果。我们也可以只为单个控件设置倾斜效果。


Tilt Effect

基本思路

我们将创建一个拥有少数控件的基本程序,在该应用程序中为这些控件添加启用和禁用倾斜效果的选项。在这里我们全局地使用倾斜效果。

实现

首先我们使用Windows Phone Application 模板创建一个新项目。接着我们在该项目的MainPage.xaml文件的界面上添加一些控件,例如Button、CheckBox、 RadioButton、 ListBox和Button 上面的Image 。

MainPage.xaml

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Width="193" Height="191" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="222,6,0,0" >
 
</Button>
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="12,203,0,0" Name="checkBox1" VerticalAlignment="Top" />
<RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left" Margin="196,203,0,0" Name="radioButton1" VerticalAlignment="Top" />
<ListBox Height="279" HorizontalAlignment="Left" Margin="6,299,0,0" Name="listBox1" VerticalAlignment="Top" Width="444" ItemsSource="{Binding}" >
<ListBoxItem MinHeight="95">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="30">List Item 1</TextBlock>
<TextBlock FontSize="20">Some text can be added here about the item</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem MinHeight="95">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="30">List Item 2</TextBlock>
<TextBlock FontSize="20">Some text can be added here about the item</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem MinHeight="95">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="30">List Item 3</TextBlock>
<TextBlock FontSize="20">Some text can be added here about the item</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem MinHeight="95">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="30">List Item 4</TextBlock>
<TextBlock FontSize="20">Some text can be added here about the item</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem MinHeight="95">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="30">List Item 5</TextBlock>
<TextBlock FontSize="20">Some text can be added here about the item</TextBlock>
</StackPanel>
</ListBoxItem>
 
</ListBox>
<Button Height="191" HorizontalAlignment="Left" Margin="12,6,0,0" Name="button1" VerticalAlignment="Top" Width="191" >
 
<Button.Background>
<SolidColorBrush Color="White"></SolidColorBrush>
</Button.Background>
<Button.Content>
<Image Source="/TiltEffect;component/Nokia-Logo.jpg" Margin="0" HorizontalAlignment="Left" VerticalAlignment="top"/>
 
</Button.Content>
</Button>
</Grid>

一旦完成了这些,编译并运行该应用程序以确保程序准备好添加倾斜效果。现在,让我们从源代码中将TiltEffect.cs 文件下载下来并将其导入到该项目中。 要导入TiltEffect.cs 文件,请:

  • 在下载的项目中找到TiltEffect.cs 文件。
  • 将TiltEffect.cs 文件导入到你的项目中。
  • 在项目中右击Solution Explorer,点击Add,然后选择Existing Item。找到TiltEffect.cs 文件后点击Add。
  • 将TiltEffect.cs 文件中的namespace改成你的项目的namespace名称。

现在在StackPanel里添加一个叫做Enable tilt的CheckBox 。在该应用程序里,这个checkbox将用来启用或禁用倾斜效果。

MainPage.xaml

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<CheckBox Content="Enable tilt" x:Name="tiltCheck" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"/>
</StackPanel>

当勾选CheckBox Enable tilt 时,它将调用CheckBox_Checked()方法并且启用该应用程序的全局的倾斜特征。这给用户带来了一个新的视觉体验,不再只是标准的pressed 或 un-pressed的状态了。

===MainPage.xaml.cs===
private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
TiltEffect.SetIsTiltEnabled((App.Current as App).RootFrame, true);
}

取消勾选CheckBox Enable tilt 将禁用该应用程序的倾斜效果。

MainPage.xaml.cs

private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
{
TiltEffect.SetIsTiltEnabled((App.Current as App).RootFrame, false);
}

你可以从这里获得关于倾斜效果的更多信息,并且可以下载一个带有TiltEffect.cs 文件的示例应用程序。

源代码

可以在这里下载该示例的整个源代码: File:TiltEffect.zip

This page was last modified on 19 July 2013, at 03:59.
229 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.

×