×
Namespaces

Variants
Actions
Revision as of 13:11, 2 July 2013 by hamishwillee (Talk | contribs)

Tilt Effect for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article demonstrates how to create "Tilt Effect" for Windows Phone. This effect makes UI components appear as though they have been slightly depressed on one side, or tilted.

Needs-update.pngThis article needs to be updated: If you found this article useful, please fix the problems below then delete the {{ArticleNeedsUpdate}} template from the article to remove this warning.

Reasons: hamishwillee (19 Jun 2013)
The tilt effect is now included as part of the Microsoft Windows Phone Toolkit, which is much easier than using the TiltEffect.cs file as explained in this article. While the content here is still useful and will "work", the article should be updated to include the correct and more simple instructions.

WP Metro Icon UI.png
WP Metro Icon Tools.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
Devices(s): Nokia Lumia 820, Lumia 920, Lumia 800
Compatibility
Platform(s): Windows Phone 8.0/ 7.1
Windows Phone 8
Windows Phone 7.5
Article
Keywords: Tilt Effect
Created: somnathbanik (15 Oct 2011)
Last edited: hamishwillee (02 Jul 2013)

Contents

Introduction

Windows Phone provides a visual effect called Tilt Effect which has the ability to add additional visual feedback for control interaction. Controls with the tilt effect provides motion during interaction. We can add tilt effect on controls like Button with property called IsTiltEnabled. This is a custom dependency property and defined in a custom class file called TiltEffect.cs. You will get the file in the project source code. The tilt effect can also be global, so that all controls in the application has the tilt effect. We can set the tilt effect to a single control also.

This code example provides a basic application with a number of tiltable controls - we use a checkbox to globally enable the tilt action.

Tilt Effect

Implementation

First we create a project with the Windows Phone Application Template. Once the project is being created, we add few controls on the screen like Button, CheckBox, RadioButton, ListBox, and Image over Button in MainPage.xaml file.

MainPage.xaml

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Width="193" Height="191" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="222,6,0,0" >
 
</Button>
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="12,203,0,0" Name="checkBox1" VerticalAlignment="Top" />
<RadioButton Content="RadioButton" Height="72" HorizontalAlignment="Left" Margin="196,203,0,0" Name="radioButton1" VerticalAlignment="Top" />
<ListBox Height="279" HorizontalAlignment="Left" Margin="6,299,0,0" Name="listBox1" VerticalAlignment="Top" Width="444" ItemsSource="{Binding}" >
<ListBoxItem MinHeight="95">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="30">List Item 1</TextBlock>
<TextBlock FontSize="20">Some text can be added here about the item</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem MinHeight="95">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="30">List Item 2</TextBlock>
<TextBlock FontSize="20">Some text can be added here about the item</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem MinHeight="95">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="30">List Item 3</TextBlock>
<TextBlock FontSize="20">Some text can be added here about the item</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem MinHeight="95">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="30">List Item 4</TextBlock>
<TextBlock FontSize="20">Some text can be added here about the item</TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem MinHeight="95">
<StackPanel Orientation="Vertical">
<TextBlock FontSize="30">List Item 5</TextBlock>
<TextBlock FontSize="20">Some text can be added here about the item</TextBlock>
</StackPanel>
</ListBoxItem>
 
</ListBox>
<Button Height="191" HorizontalAlignment="Left" Margin="12,6,0,0" Name="button1" VerticalAlignment="Top" Width="191" >
 
<Button.Background>
<SolidColorBrush Color="White"></SolidColorBrush>
</Button.Background>
<Button.Content>
<Image Source="/TiltEffect;component/Nokia-Logo.jpg" Margin="0" HorizontalAlignment="Left" VerticalAlignment="top"/>
 
</Button.Content>
</Button>
</Grid>

Once this is done build and run the application to make sure that the application is ready to add the tilt effect. Now lets download the TiltEffect.cs file from the source code and import in the project.

To import the TiltEffect.cs file

  • Locate the TiltEffect.cs file in the downloaded project.
  • Import the TiltEffect.cs file into your project.
  • Right-click the project in Solution Explorer, click Add, and select Existing Item. Browse for the TiltEffect.cs file and click Add.
  • Change the namespace in your TiltEffect.cs file to your project namespace name.

Now add a CheckBox called Enable tilt in the status panel. This check box will enable and disable the tilt effect in the application.

MainPage.xaml

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<CheckBox Content="Enable tilt" x:Name="tiltCheck" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"/>
</StackPanel>

When user check the CheckBox Enable tilt it calls CheckBox_Checked() and enable the feature of tilt globally in the application. This brings to user a visial effect instead of having standard pressed or un-pressed states.

MainPage.xaml.cs

private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
TiltEffect.SetIsTiltEnabled((App.Current as App).RootFrame, true);
}

Unchecking the CheckBox Enable tilt disable the tilt effect in the application.

MainPage.xaml.cs

private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
{
TiltEffect.SetIsTiltEnabled((App.Current as App).RootFrame, false);
}

You can get more information on tilt effect and can download a sample application with the TiltEffect.cs file from here.

Source Code

The full source code of the example is available here: File:TiltEffect.zip

393 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×