[Windows Phone] Get the tilt effect and the click event, everywhere

When designing your Windows Phone application you may need the TextBlock, for instance, to receive a Click or Tap event. Also, to make your application shine, you also want the tilt effect when your user taps the control. A good example of this are the Panorama controls used throughout the Windows Phone OS, or third party applications such as Nokia Music.

The tilt effect introduced with the Silverlight Toolkit for Windows Phone only works with the general ButtonBase and ListBoxItem controls. However, you can apply this effect to your custom control by adding it to the TiltableItems list like this:

 1: TiltEffect.TiltableItems.Add(typeof(“MyCustomControl”))

This doesn’t work with the TextBlock control though. So, a workaround is to create a ‘borderless’ Button style, whose Content property can be set to any control:

 1: <Style x:Key="BorderlessButton"

 2:                    TargetType="ButtonBase">

 3:                     <Setter Property="Template">

 4:                         <Setter.Value>

 5:                             <ControlTemplate TargetType="ButtonBase">

 6:                                 <Grid>

 7:                                     <ContentPresenter />

 8:                                 </Grid>

 9:                             </ControlTemplate>

 10:                         </Setter.Value>

 11:                     </Setter>

 12:                 </Style>

To use it, simply declare the Style as a resource and add a Button in your XAML code. Then, declare the TextBlock in the Content property of the Button. Here is an example:

 1: <StackPanel Grid.Row="0">

 2:                         <Button Style="{StaticResource BorderlessButton}">

 3:                             <TextBlock Text="{Binding Localizedresources.Mp3Store, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextExtraLargeStyle}" />

 4:                             <i:Interaction.Triggers>

 5:                                 <i:EventTrigger EventName="Click">

 6:                                     <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding OpenMp3StoreCommand}"/>

 7:                                 </i:EventTrigger>

 8:                             </i:Interaction.Triggers>

 9:                         </Button>

 10:                     </StackPanel>

I hope you find this useful for your applications.

Happy coding!