Telerik UI for Windows Phone by Progress

Overview

Part of the unique Windows Phone user experience is the tilt effect which is applied to the visual element being manipulated by the end user. The Telerik UI for Windows Phone suite has TiltInteractionEffect class that you can use to apply the same effect in your application.

Using the TiltInteractionEffect class

The TiltInteractionEffect class is used together with the InteractionEffectManager. To allow the TiltInteractionEffect for a given visual element you should do the following:

  1. Set the IsInteractionEnabled attached property of the InteractionEffectManager to the desired visual element to true.
  2. Make sure that the type of the visual element which should be tilted is in the AllowedTypes collection of the InteractionEffectManager class and is not in the ExcludedTypes collection
Tip

You can set the IsInteractionEnabled attached property in XAML. However, you can modify the AllowedTypes and ExcludedTypes collections only programmatically.

The following code snippets demonstrate how to enable the tilt interaction effect for a Button:

CopyXAML
<phone:PhoneApplicationPage
        x:Class="TiltExamples.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup"
        xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
        d:DesignWidth="480" d:DesignHeight="768"
        FontFamily="{StaticResource
        PhoneFontFamilyNormal}"
        FontSize="{StaticResource PhoneFontSizeNormal}"
        Foreground="{StaticResource
        PhoneForegroundBrush}"
        SupportedOrientations="Portrait" 
        Orientation="Portrait"
        shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Button Content="Tilted Button" x:Name="tiltedButton" VerticalAlignment="Top" telerikCore:InteractionEffectManager.IsInteractionEnabled="True" />
    </Grid>
</phone:PhoneApplicationPage>

Here is how the type of the Button is added to the AllowedTypes of the InteractionEffectManager:

CopyC#
static MainPage()
{
    InteractionEffectManager.AllowedTypes.Add(typeof(Button));
}
Note
You need to add the Button type to the AllowedTypes only once. A suitable place for this would be the static constructor of your page or of the application object.

Adding TiltInteractionEffect to multiple visual elements

Sometimes it is needed to apply a tilt effect to multiple elements of the same type that the end user can interact with. Such elements might be all buttons in your application, the visual containers in a list box control etc. The TiltInteractionEffect and InteractionEffectManager are flexible enough and provide the ability to easily achieve this without setting the IsInteractionEnabled attached property to each visual element.

To apply a tilt effect to all elements of a given type that reside on a Page you can set the IsInteractionEnabled property to the page itself and make sure that the type of the visual elements is allowed and not excluded. Here is how applying a tilt effect to multiple buttons in a stack panel might be implemented:

CopyXAML
<phone:PhoneApplicationPage
    x:Class="TiltExamples.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    telerikCore:InteractionEffectManager.IsInteractionEnabled="True">
    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <StackPanel>
            <Button Content="Tilted Button 1"
                    VerticalAlignment="Top"/>
            <Button Content="Tilted Button 2"
                    VerticalAlignment="Top"/>
            <Button Content="Tilted Button 3"
                    VerticalAlignment="Top"/>
            <Button Content="Tilted Button 4"
                    VerticalAlignment="Top"/>
            <Button Content="Tilted Button 5"
                    VerticalAlignment="Top"/>
        </StackPanel>
    </Grid>
</phone:PhoneApplicationPage>

As you can see, in the above code snippet the IsInteractionEnabled property is set to the PhoneApplicationPage which is an indirect parent of all buttons we would like to make tiltable. We also add the type of a Button in the AllowedTypes collection of the InteractionEffectManager class:

CopyC#
static MainPage()
{
    InteractionEffectManager.AllowedTypes.Add(typeof(Button));
}

The IsInteractionEnabled property can be set to any container that holds elements of a given type which we want to make tiltable. In this way, depending on the scenario, we can generally apply this effect to a group of elements and avoid applying it to another group of elements - either by adding a specific type to the ExcludedTypes collection, or by enabling the interaction effect to a specific container of elements.

Advanced scenarios - the DedicatedTiltTarget attached property

The TiltInteractionEffect class defines the DedicatedTiltTarget attached property which can be used to explicitly specify the element which will be tilted when a given element is manipulated. This may be helpful if you wish to apply the tilt effect to a specific child of the element on which the tilt effect is enabled. The sample XAML code below demonstrates setting the DedicatedTiltTarget property of a button to another button which will apply the tilt effect to the second button when manipulating the first button:

CopyXAML
<Grid x:Name="LayoutRoot" Background="Transparent">
    <StackPanel>
        <Button x:Name="tiltTarget" Content="Tilted Button 2" VerticalAlignment="Top" />
        <Button telerikCore:TiltInteractionEffect.DedicatedTiltTarget="{Binding ElementName=tiltTarget}" telerikCore:InteractionEffectManager.IsInteractionEnabled="True" Content="Tilted Button 1" VerticalAlignment="Top" />
    </StackPanel>
</Grid>

Enabling the TiltInteractionEffect for RadDataBoundListBox and RadJumpList

To enable the tilt effect for the visual containers in a RadDataBoundListBox or RadJumpList control you simply need to set the IsInteractionEnabled attached property to the control and make sure that the RadDataBoundListBoxItem type is in the AllowedTypes collection of the InteractionEffectManager.