在HubTile上套用TiltEffect傾斜效果

Silverlight for Windows Phone Toolkit中的TiltEffect可以在套用的控制項上產生一種傾斜的效果，讓使用者可以更清楚知道是有明確點選到，不過TiltEffect並不是預設就支援所有的控制項，像是如果直接套用在Toolkit中的HubTile上就不會有效果，不過因為像Windows Phone手機首頁的Tile在點選的時候是擁有這種傾斜的效果，所以使用者也許會更習慣點選到HubTile時也會產生同樣的效果，因此還是有很簡單的方法可以使HubTile套用TiltEffect，產生跟原本手機一致的使用者經驗。

 

接著增加一個類別並繼承自Grid，並且在TiltableItems中加入

using System.Windows.Controls;
using Microsoft.Phone.Controls;
namespace TilteffectTest
{
    public class Tiltable : Grid
    {
    }
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
            TiltEffect.TiltableItems.Add(typeof(Tiltable));
        }

 

在XAML當中先加入namespace後，就可以直接套用在HubTile上，這時當點選到此Tile時就會產生傾斜的效果，就跟Windows Phone系統中的Tile有一致的效果了

<phone:PhoneApplicationPage
    xmlns:my="clr-namespace:TilteffectTest"
    .......>
        ......
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <my:Tiltable>
                <toolkit:HubTile toolkit:TiltEffect.IsTiltEnabled="True" />
            </my:Tiltable>
        </Grid>
</phone:PhoneApplicationPage>
    }
}

 

謝謝您提供的解決方案！但是發現一個問題！ 2012/10/11 下午 05:45 回覆

# re: [WP] 在HubTile上套用TiltEffect傾斜效果

如果導航到其他頁面在後退回來的話，HubTile的點擊效果就會出現問題。我開始以為是後退回來沒有執行建構函式，便嘗試把TiltEffect.TiltableItems.Add(typeof(Tiltable));代碼加入到PageLoaded事件中，仍然無法解決。然後我試了一下，在Image控制項外面套一個my:Tiltable就沒有出現這個問題。不知道這是什麼原因？請教~