Windows Phone - Tilt effect on HubTile and other Controls
2012-10-22 18:17
274 查看
In this article I will talk about creating tilt effect in different control in Windows Phone. Implementing tilt effect on controls are easy but few controls like Hubtile, textblock don't create tilt effect itself. We need to little bit work around to achieve. In this article first we will look into how to create tilt effect on normal controls then we will discuss on how to put tilt effect on hubtile, textblock. Let's write code: Download Silverlight Windows Phone Toolkit Step 1: Create a silverlight for Windows Phone project. Step 2: Add reference of Microsoft.Phone.Controls.Toolkit.dll Step 3: Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml. xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" Step 4: Add below line in phone:PhoneApplicationPage element. toolkit:TiltEffect.IsTiltEnabled="True" Step 5: Add a listbox and a button inside ContenPanel of MainPage.xaml. <ListBox Margin="20,280,0,0" Height="80" FontSize="28" > <ListBoxItem Content="Item1"/> <ListBoxItem Content="Item2"/> </ListBox> <Button x:Name="tiltEffect" Margin="20,480,0,0" Height="80" Width="430" Content="Tilt" /> Step 5: Now run the application and on touch of listbox item and button you will notice tilt effect. Step 6: To suppress tilt effect for a particular item of ListBox or control we can use below code. toolkit:TiltEffect.SuppressTilt="True" Step 7: Now replace code of Step 5 with below code and run the application, the highlighted code will suppress the tilt effect. <ListBox Margin="20,280,0,0" Height="80" FontSize="28" > <ListBoxItem Content="Item1" toolkit:TiltEffect.SuppressTilt="True"/> <ListBoxItem Content="Item2"/> </ListBox> <Button x:Name="tiltEffect" toolkit:TiltEffect.SuppressTilt="True" Margin="20,480,0,0" Height="80" Width="430" Content="Tilt" /> Step 8: Now add a hubtile, textblock and image inside ContentPanel of MainPage.xaml. <toolkit:HubTile Title="UnFreezed Title" Background="Maroon" x:Name="hubTile1" /> <Image Source="/TestTilt.png" Margin="0" HorizontalAlignment="Left" Height="173" Width="173" VerticalAlignment="top"/> <TextBlock Text="Testing" Style="{StaticResource PhoneTextExtraLargeStyle}" Height="100" Margin="200,-410,12,0" /> Step 9: Now run the application again and you will notice tile effect won't work for hubtile, image and textblock. Let's implement tilt effect for hubtile, image and textblock. Step 10: Now create a class TiltableControl (Highlighted) which in MainPage.xaml.cs above MainPage class. namespace Windows_Phone___Tile_Effect { public class TiltableControl : Grid { } public partial class MainPage : PhoneApplicationPage { Step 11: Add TiltableControl in TiltableItems like shown below in the MainPage constructor. TiltEffect.TiltableItems.Add(typeof(TiltableControl)); Step 12: Add namespace like below in MainPage.xaml. xmlns:myTilt="clr-namespace:Windows_Phone___Tile_Effect" Step 13: Now wrap the hubtile, textblock and image control created in Step 8 with TiltableControl. <myTilt:TiltableControl> <Image Source="/TestTilt.png" Margin="0" HorizontalAlignment="Left" Height="173" Width="173" VerticalAlignment="top"/> </myTilt:TiltableControl> <myTilt:TiltableControl> <TextBlock Text="Testing" Style="{StaticResource PhoneTextExtraLargeStyle}" Height="100" Margin="200,-410,12,0" /> </myTilt:TiltableControl> <myTilt:TiltableControl> <toolkit:HubTile Title="UnFreezed Title" Background="Maroon" x:Name="hubTile1" /> </myTilt:TiltableControl> Step 14: Now run the application, you will notice hubtile, image and textblock has tilteffect. This ends the article of tilt effect in hubtile, image and other controls in Windows Phone. |
Like us if you find this post useful. Thanks! |
相关文章推荐
- WPF程序设计 :第四章 按钮与其他控件(Buttons and Other Controls)
- mysql query to find the maximum 3 values from a column and group by on other column
- Java World Interview On Scalability And Other J...
- Effect of Switchovers, Failovers, and Control File Creation on Backups
- Temporary Tables vs. Table Variables and Their Effect on SQL Server Performance
- Warning:The `android.dexOptions.incremental` property is deprecated and it has no effect on the buil
- Docking and Anchoring Controls on Windows Mobile
- Warning:The `android.dexOptions.incremental` property is deprecated and it has no effect on the buil
- jemalloc and other errors making redis on centos 6.6
- Head First Design Pattern - 4 - This week's interview: Factory Method and Abstract Facotry, on each other
- sourcegrid 应用实例(全部来自官网下载的例子)——Grid navigation, tab, arrows and other controls
- The `android.dexOptions.incremental` property is deprecated and it has no effect on the build proces
- Windows Phone 8 ControlTiltEffect
- Warning:The `android.dexOptions.incremental` property is deprecated and it has no effect on the buil
- Warning:The `android.dexOptions.incremental` property is deprecated and it has no effect on the buil
- Warning:The `android.dexOptions.incremental` property is deprecated and it has no effect on the buil
- RegexKit: A Regular Expression Toolbox Based On NW.js(Node-Webkit) And Other Greate Open Source Projects.
- wpf 笔记 Buttons and Other Controls
- Block developers from using TOAD and other tools on production databases
- MaxClients in Apache and its effect on Tomcat during Full GC