Windows Phone裡的傾斜效果 from http://www.developer.nokia.com/Community/Wiki/Windows_Phone%E9%87%8C%E7%9A%

Windows Phone裡的傾斜效果

本文闡述了怎樣在Windows Phone裡實現Tilt Effect（傾斜效果）。

 

簡介

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