×
Namespaces

Variants
Actions

Windows Phone里的倾斜效果

From Nokia Developer 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 06:59.
106 page views in the last 30 days.
×