在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就没有出现这个问题。不知道这是什么原因？请教~