Tilt effects in Windows Phone from http://www.developer.nokia.com/Community/Wiki/Windows_Phone%E9%87%8C%E7%9A%

Skew in Windows Phone

This article describes how to implement tilt effect in Windows Phone ).

 

Introduction

Windows Phone provides a visual effect called tilt effect, which can be used to add additional visual effects to the interaction of controls. Controls Using Tilt effect provide animations during interaction. We can add the istiltenabled attribute for the control, for example, button, to achieve the skew effect. This is a dependencyproperty defined in a custom class (called tilteffect. CS. You will find this file in the source code of the project. The Skew effect can be global, so that all controls in the application have this skew effect. We can also set only the skew effect for a single control.

 

Tilt Effect

Basic Ideas

We will create a basic program with a few controls and add options for these controls in this application to enable and disable skew effects. Here we use the global skew effect.

Implementation

First, use the Windows Phone application template to create a new project. Then we add some controls on the mainpage. XAML file interface of the project, such as the image on the button, checkbox, radiobutton, ListBox, And button.

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, compile and run the application to ensure that the program is ready to add skew effects. Now, let's download the tilteffect. CS file from the source code and import it to this project. To import the tilteffect. CS file, please:

• Find the tilteffect. CS file in the downloaded project.
• Import the tilteffect. CS file to your project.
• Right-click Solution Explorer in the project, click Add, and then select existing item. Find the tilteffect. CS file and click Add.
• Change the namespace in the tilteffect. CS file to the namespace name of your project.

Now add a checkbox named enable tilt to stackpanel. In this application, this checkbox is used to enable or disable the skew effect.

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 checkbox enable tilt is selected, it will call the checkbox_checked () method and enable the global skew feature of the application. This gives users a new visual experience, not just the standard pressed or un-pressed status.

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

Uncheck checkbox enable tilt to disable the skew of 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 about the skew effect from here, and download a sample application with the tilteffect. CS file.

Source code

The entire source code of this example can be downloaded here: file: tilteffect.zip