×
Namespaces

Variants
Actions
Revision as of 08:32, 30 November 2012 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.

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): WP7 Emulator
CompatibilityArticle
Keywords: Tilt Effect
Created: somnathbanik (15 Oct 2011)
Last edited: hamishwillee (30 Nov 2012)

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 custon 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

461 page views in the last 30 days.
×