Windows Phone里的倾斜效果
本文阐述了怎样在Windows Phone里实现Tilt Effect（倾斜效果）。
简介
Windows Phone提供了一个视觉效果叫做Tilt Effect，可以用来为控件的交互添加额外的视觉效果。使用Tilt Effect的控件在交互时提供了动画。我们可以为控件，例如Button添加IsTiltEnabled的属性来实现倾斜效果。这是在一个自定义的类（叫做TiltEffect.cs）里定义的一个DependencyProperty。你将在该项目的源代码里找到这个文件。倾斜效果可以是全局的，如此一来该应用程序里的所有控件都拥有了这个倾斜效果。我们也可以只为单个控件设置倾斜效果。
基本思路
我们将创建一个拥有少数控件的基本程序，在该应用程序中为这些控件添加启用和禁用倾斜效果的选项。在这里我们全局地使用倾斜效果。
实现
首先我们使用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