This article is Day #19 in a series called 31 Days of Mango, and was written by guest author Doug Mair. Doug can be reached on Twitter at @doug_mair or at doug.mair@gmail.com.
Applications that look and behave like the native Windows Phone applications will be more attractive to users than applications that don’t behave like the native applications. So, your applications should try to incorporate as much native behavior as possible. A control behavior that is common in many of the native applications is the TiltEffect behavior. Look at the Phone application, which is used for making telephone calls. When you start the Phone app you see a list of users you have called.
Now pay attention as you select an item in the list. When you select that item, you can see a slight tilt to the item that you select. As you release the item, it returns back to its original position. This slight tilt animation gives you a reassurance that the Phone application has received your input. It is a subtle change, but it will increase your users delight.
This article shows you how to add the TiltEffect behavior to controls in your Silver Light applications. A sample application is created which shows the TiltEffect behavior in action and how to turn the TiltEffect behavior on and off at runtime.
Setup for using the TiltEffect Behavior
The TiltEffect behavior is not included in the controls out of the box. We have to get it from a sample that Microsoft released so that third party developers could add this behavior to their applications. The behavior that we are going to use is in a C# file called TiltEffect.cs in the Control Tilt Effect Sample on MSDN.
First of all, download that sample and extract the files to a folder on your computer. The TiltEffect.cs file is in the ControlTiltEffect subdirectory with all of the other source code for the sample. Note the location of the file so that you can add it to your project.
To add it to your Silver Light project, you need to ….
1. Open your project in Visual Studio and right-mouse click on your project.
2. Select the Add menu option, and then select the Existing Item… menu option.
3. In the Add Existing Item dialog navigate to and select the TiltEffect.cs file that you downloaded earlier.
4. This will make a copy of the file in your project source directory and will add it to your project.
Namespace
Open the TiltEffect.cs file. Notice that the namespace for this file is ControlTiltEffect. You can either change it to be the same namespace as your project, or leave it as is. For our examples, we will leave it as it is in ControlTiltEffect.
When you want to use this TiltEffect in your application you need to add its namespace to files that use it. To add the namespace to the pages that you want to use the TiltEffect behavior on you controls, add these lines to the top of your XAML file:
mlns:local="clr-namespace:ControlTiltEffect"
local:TiltEffect.IsTiltEnabled="True"
This will create a new alias called local for the ControlTiltEffect namespace. This allows the classes in that namespace to be available on this page.
The second line enables the TiltEffect. With these two lines added, all Buttons and List Boxes on this page will now have the TiltEffect behavior. As you will see later, we can turn on and off the TiltEffect for specific controls on the page.
Now that we know how to add the TiltEffect behavior to our project and XAML pages, lets look at an example of how we would use it an application.
Sample Application
This sample app has many controls which will demonstrate how the TiltEffect behavior works. Most of the buttons and list box items on this page will tilt when you press on them. With TiltEffect.IsTiltEnabled="True" that is the default behavior for the page.
Suppressing TiltEffect on single control: SuppressTilt Property
Suppose that we have a certain button on our page that we don’t want to tilt. We can enable and suppress the TiltEffect for each control or list box item separately. In our sample, the second button will not tilt, this is because the Suppressed property has been set to stop it from tilting. Here’s the XAML code for the second button.
<Button local:TiltEffect.SuppressTilt="True" Content="Tilt Suppressed"
Height="82" HorizontalAlignment="Left" Margin="229,52,0,0"
Name="button2" VerticalAlignment="Top" Width="221" />
Notice that it has the local:TiltEffect.SuppressTilt="True". This suppresses all Tilt effects for this control. The second list box item also has this property set, so it will not tilt either. All of the other controls on this page don’t include this property, so they will tilt.
Stopping TiltEffect for Entire Page: IsTiltEnabled Property
It is also possible to stop the TiltEffect for an entire page. This might be useful for showing a “retro” mode for your application. At the bottom of the page, there is a button labeled “Stop Tilts”. When this button is clicked, all TiltEffects on this page will be stopped. If you press it again, the TiltEffects will be re-enabled.
The button3_Click event handler does this work. The C# code behind is where this takes place. In order to use the TiltEffects in the C# code behind, we add the using ControlTiltEffect; statement.
Then in the button3_Click handler, we get the current IsTiltEnabled property for the entire page. To do this we use the method GetIsTiltEnabled to read the dependency property for the entire page that was given to it by the TiltEffect class. Note the the this object inside the parentheses represents the entire page. This value is saved in the tiltEnabled variable.
Then we set the content for the ToggleTilting button based on the IsTiltEnabled property.
Lastly, we change the IsTiltEnabled property for the entire page, to be the opposite of what it used to be. This time we are modifying the dependency property with the SetIsTiltEnabled method.
At this point, none of the buttons or list box items will tilt. Try it and see. Then press the ToggleTilting button again to let the buttons tilt again.
using Microsoft.Phone.Controls;
using ControlTiltEffect;
namespace Day19_TiltEffects
{
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void button3_Click(object sender, RoutedEventArgs e)
{
bool tiltEnabled = TiltEffect.GetIsTiltEnabled(this);
ToggleTilting.Content = (tiltEnabled) ? "Start Tilts" : "Stop Tilts";
TiltEffect.SetIsTiltEnabled(this, !tiltEnabled);
}
}
}
Complete XAML Source Code
<phone:PhoneApplicationPage
x:Class="Day19_TiltEffects.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"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
xmlns:local="clr-namespace:ControlTiltEffect"
local:TiltEffect.IsTiltEnabled="True"
shell:SystemTray.IsVisible="True">
<!–LayoutRoot is the root grid where all page content is placed–>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!–TitlePanel contains the name of the application and page title–>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="Day 19"
Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="Tilt Effects" Margin="9,-7,0,0"
Style="{StaticResource PhoneTextTitle1Style}" Height="75"
FontSize="56" />
</StackPanel>
<!–ContentPanel – place additional content here–>
<Grid x:Name="ContentPanel" Margin="12,118,12,0" Grid.RowSpan="2">
<TextBlock Height="48" HorizontalAlignment="Left" Margin="20,6,0,0"
Name="textBlock1" Text="Buttons" VerticalAlignment="Top"
Width="402" FontSize="32" FontWeight="Bold" />
<Button Content="Tilts" Height="82" HorizontalAlignment="Left"
Margin="0,52,0,0" Name="button1" VerticalAlignment="Top"
Width="202" />
<Button local:TiltEffect.SuppressTilt="True" Content="Tilt Suppressed"
Height="82" HorizontalAlignment="Left" Margin="229,52,0,0"
Name="button2" VerticalAlignment="Top" Width="221" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left"
Margin="229,140,0,0" Name="checkBox1" VerticalAlignment="Top" />
<RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left"
Margin="9,140,0,0" Name="radioButton1" VerticalAlignment="Top" />
<HyperlinkButton Content="HyperlinkButton" Height="30"
HorizontalAlignment="Left" Margin="20,218,0,0"
Name="hyperlinkButton1" VerticalAlignment="Top" Width="200" />
<TextBlock FontSize="32" FontWeight="Bold" Height="48"
HorizontalAlignment="Left" Margin="20,282,0,0" Name="textBlock2"
Text="ListBox" VerticalAlignment="Top" Width="402" />
<ListBox Height="100" HorizontalAlignment="Left" Margin="24,314,0,0"
Name="listBox1" VerticalAlignment="Top" Width="438" Grid.Row="1">
<ListBoxItem Content="Tilts 1" />
<ListBoxItem local:TiltEffect.SuppressTilt="True"
Content="Tilt Suppressed 2" />
<ListBoxItem Content="Tilts 3" />
</ListBox>
<Button Name="ToggleTilting" Content="Stop Tilts" Height="82"
HorizontalAlignment="Left" Margin="14,495,0,0"
VerticalAlignment="Top" Width="438" Click="button3_Click" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>
Summary
Adding Tilt Effects to your controls add a subtle effect that lets your user know their input was received. It is a little more work to add behaviors like this to your applications, but it will pay off with greater user appeal. You have seen how to add the tilt behavior to you app, how to enable it for entire pages, how to disable it for single control and how to disable it for the entire page. Attention to seemingly small details like this will help your application stand out.
BTW, if you are curious, I suggest that you take a look inside the TiltEffect.cs file. It is an excellent example of how to use storyboards and touch manipulations to build effects from the bare bones up. Taking some time to understand how behaviors like this are built will increase your knowledge and confidence with the Windows Phone development. This is a versatile control that you can adapt in other ways if needed.
To download a complete working Windows Phone project that demonstrates Tilt Effects, click the Download Code button below:
Tomorrow, we are going to look at creating custom ringtones for your users, and how Windows Phone now supports this awesome new feature. See you then!
JEFF BLANKENBURG 
Leave a Reply