layout samples

Sample demonstrating the blendables Grid as an AnimationPanel

JonathanRuss — Fri, 26 Sep 2008 23:50:14 GMT

This is a quick sample to accompany this forum thread. It demonstrates how the blendables Grid class can be used just like the native WPF Grid class, but enhanced with layout animatons.

The sample includes two different scenes (Window1 and Window2). Window1 demonstrates a SwitchPanel containing several Grid layouts. Window2 demonstrates a single Grid and its children. It shows how animatons occur when the layout properties of the Grid and/or its children are updated programmatically. Both scenes also demonstrate that the blendables GridSplitter can be used with the Grid to affect column and row sizes.

To switch between the two scenes, update the StartupUri property in App.xaml to point at either Window1.xaml or Window2.xaml.

ListBox using the Carousel Panel as its Items Host

JonathanRuss — Wed, 30 Apr 2008 21:31:05 GMT

The May CTP release of the Layouts mix introduces a new animation panel called Carousel. This is a simple, but powerful, panel that arranges its children in an elliptical layout. By default, the panel will scale its children and set their z-index values to create a 2D layout that has the appearance of a 3D carousel. For greater control, you may opt out of this automatic scaling and ordering behavior and control the scale and z-indices via bindings to attached properties on the children.

This sample demonstrates how you might implement a ListBox that uses the Carousel panel as its items host. In this ListBox implementation, selecting an item will bring it to the front of the carousel (as long as the IsSelectionSynchronized property on the ListBox is true). You can also rotate the carousel by dragging any item within it. Upon release of the item, the foremost child of the carousel will automatically be selected.

Note: The ListBox implementation in this sample is provided purely for demonstration purposes. You are free to use it and modify it as you desire, but it is not a supported blendables component. It was merely created to show off the Carousel panel (which is fully supported, of course).

This sample also contains a property explorer so that you can see the effects of modifying different properties on the carousel. It also demonstrates how to use a custom style to perform the aforementioned scaling and z-ordering.

*This sample has been updated to work with the Layout Mix July CTP.

Camera Panel - Layout Mix

kurt.brockett — Wed, 26 Mar 2008 23:34:21 GMT

by Sajiv Thomas and John Zolezzi

CameraPanel is a low cost way to represent 2D content in 3D space. It gives a perspective of 3D without using the true 3D element, Viewport3D. You can set the item’s top, left, and depth position with CameraPanel’s attached properties.

*This sample has been updated to work with the Layout Mix July CTP.

SwitchPanel Sample - Layout Mix

kurt.brockett — Sat, 08 Mar 2008 20:35:56 GMT

This sample shows most of the panels included in the layout mix in action. Action of course being the keyword. Utilizing the dropdowns you can easily change between different animation modes.

This is a great sample to get started using the Layout Mix.

*This sample has been updated to work with the 3D Mix July CTP.