#animated navigation

Custom UI Panels give you the ability to specify scrolling and positioning using one tag. This their for create a Template that can be reused.

First: Create a new Class which derives one of the Panel Classes

eg: StackPanel,Grid or Panel

Add the newly created object to xaml

Import the namespace: xmlns:local="clr-namespace:SampleApp"

Use the new Panel Like Any Other

So What's the Benefit

In your custom panel you can then add custom behaviour such as event-handler and animations.

For Example:

In the constructor you can register the events:

ManipulationDelta += MainPage_ManipulationDelta; ManipulationCompleted += MainPage_ManipulationCompleted;

These events can trigger animations or other behaviour:

//Create the Animation

var animation = new DoubleAnimation() { Duration = new TimeSpan(0, 0, 5), To = 0, AutoReverse = true

};

//Create a CompositeTransform

var transform = new CompositeTransform(); transform.TranslateX = 0; this.RenderTransform = transform;

var storyboard = new Storyboard(); storyboard.Children.Add(animation);

Storyboard.SetTarget(animation, this); Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateX)"));

storyboard.Begin();