Disable Tilt Effect on ListView and GridView for Universal Apps

Disable Tilt Effect on ListView and GridView for Universal Apps

During the age of coding for Windows Phone 7 or 8, developers either relied on third parties or self created transition effect for making the controls have some effects, one of them is “Tilt” effect. When the time come to about a year ago, Microsoft introduce the Universal Apps development methods, significant changes were made for Windows Phone and Windows Store controls, not to mention it included a lot of features into it.

ListView and GridView are now common controls for Windows Store and Windows Phone. These two controls not only bring the “Re-ordering”, “Multiple selections”, “Header Template”, “Footer Template” and others to both platforms, it also bring the “Tilt” effect by default.

The default of “Tilt” effect bring the mixed feeling to a lot of developers; like myself, in some case, I just don’t want the “Tilt” effect to be enable. Especially, the item is not meant for any click or selection command. Again, for these two controls, there are no such thing that allow developers to turn it off simply by “true” or “false” selection.

At Blend, select the control that you wish to edit. Either GridView or ListView controls.

To resolve this problems, there are always more than an options.

The first solution is, ditch the ListView or GridView controls, instead just use an ItemsControl to display the data. The catch for using ItemsControl for large amount of data is, it will uses a lot of memory on your device, this is extremely not recommended for low memory devices especially for phone.

For binding huge data for display, ListView, GridView controls still highly recommended. To disable the “Tilt” effect for ListView and GridView, developers need to modify the style for them.

To modify the style for ListView or GridView, the best way is using Blend.

Editing page from Blend:

  • Highlight the page that you want to edit from Visual Studio Solution Explorer.
  • Right click your mouse
  • Select “Open in Blend”
  • Blend will opened with the page that you want to edit.
  • At Blend, select the control that you wish to edit. Either GridView or ListView controls.
  • Right click your mouse, select “Edit Additional Templates” -> “Edit Generated Item Contrainer (ItemContainerStyle)” -> “Edit a Copy”
  • Give your new style a name and you can decide this modified style is available ONLY to this page or you can put it to the App.xaml and make available to entire solutions.
  • Click OK and save the file. Return to Visual Studio and you will prompt for the message that notified you as the file been edited from other editor. Click YES to continue.
  • Look for

Codes:

<PointerUpThemeAnimation Storyboard. TargetName="TiltContainer" />

and

<PointerDownThemeAnimation Storyboard. TargetName="TiltContainer" />

Remark this two storyboard.

  • Walah, you are done!
  • This is applicable for ListView too.
Comments are closed.