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

來源:互聯網
上載者:User
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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.