Créer un User Control personnalisé pour Windows 8 en utilisant XAML et C#

/// <summary> 
/// <Item Template 
/// </summary> 
public DataTemplate ItemTemplate 
{ 
get 
{ 
return itemTemplate; 
} 
set 
{ 
itemTemplate = value ; 
} 
}

/// <summary> 
/// Bind all Items 
/// </summary> 
private void Bind() 
{ 
if (ItemsSource == null ) 
return ; 
this .Children.Clear(); 
this .internalList.Clear(); 
foreach ( object item in ItemsSource) 
this .CreateItem(item); 
this .Children.Add(rectangle); 
} 
/// <summary> 
/// Create an item (Load data template and bind) 
/// </summary> 
private FrameworkElement CreateItem( object item, Double opacity = 1) 
{ 
FrameworkElement element = ItemTemplate.LoadContent() as FrameworkElement; 
if (element == null ) 
return null ; 
element.DataContext = item; 
element.Opacity = opacity; 
element.RenderTransformOrigin = new Point(0.5, 0.5); 
PlaneProjection planeProjection = new PlaneProjection(); 
planeProjection.CenterOfRotationX = 0.5; 
planeProjection.CenterOfRotationY = 0.5; 
element.Projection = planeProjection; 
this .internalList.Add(element); 
this .Children.Add(element); 
return element; 
}

/// <summary> 
/// Items source : Better if ObservableCollection :) 
/// </summary> 
public IEnumerable<Object> ItemsSource 
{ 
get { return (IEnumerable<Object>)GetValue(ItemsSourceProperty); } 
set { SetValue(ItemsSourceProperty, value ); } 
} 
// Using a DependencyProperty as the backing store for ItemsSource. 
//This enables animation, styling, binding, etc... 
public static readonly DependencyProperty ItemsSourceProperty = 
DependencyProperty.Register( "ItemsSource" , 
typeof (IEnumerable<Object>), 
typeof (LightStone), 
new PropertyMetadata(0, ItemsSourceChangedCallback));

private static void ItemsSourceChangedCallback(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs args) 
{ 
if (args.NewValue == null ) 
return ; 
if (args.NewValue == args.OldValue) 
return ; 
LightStone lightStone = dependencyObject as LightStone; 
if (lightStone == null ) 
return ; 
var obsList = args.NewValue as INotifyCollectionChanged; 
if (obsList != null ) 
{ 
obsList.CollectionChanged += (sender, eventArgs) => 
{ 
switch (eventArgs.Action) 
{ 
case NotifyCollectionChangedAction.Remove: 
foreach (var oldItem in eventArgs.OldItems) 
{ 
for ( int i = 0; i < lightStone.internalList.Count; i++) 
{ 
var fxElement = lightStone.internalList[i] as FrameworkElement; 
if (fxElement == null || fxElement.DataContext != oldItem) continue ; 
lightStone.RemoveAt(i); 
} 
} 
break ; 
case NotifyCollectionChangedAction.Add: 
foreach (var newItem in eventArgs.NewItems) 
lightStone.CreateItem(newItem, 0); 
break ; 
} 
}; 
} 
lightStone.Bind(); 
}

/// <summary> 
/// Initial pressed position 
/// </summary> 
private void OnPointerPressed( object sender, PointerRoutedEventArgs args) 
{ 
initialOffset = args.GetCurrentPoint( this ).Position.X; 
} 
/// <summary> 
/// Calculate Behavior 
/// </summary> 
private void OnPointerReleased( object sender, PointerRoutedEventArgs pointerRoutedEventArgs) 
{ 
// Minimum amount to declare as a manipulation 
const int moveThreshold = 40; 
// last position 
var clientX = pointerRoutedEventArgs.GetCurrentPoint( this ).Position.X; 
// Here is a "Tap on Item" 
if (!(Math.Abs(clientX - initialOffset) > moveThreshold)) 
return ; 
isIncrementing = (clientX < initialOffset); 
// Here is a manipulation 
if (clientX < initialOffset) 
{ 
this .SelectedIndex = ( this .SelectedIndex < ( this .internalList.Count - 1)) 
? this .SelectedIndex + 1 
: this .SelectedIndex; 
} 
else if ( this .SelectedIndex > 0) 
{ 
this .SelectedIndex--; 
} 
initialOffset = clientX; 
}

var rect = child.TransformToVisual( this ).TransformBounds( new Rect(0, 0, child.DesiredSize.Width, child.DesiredSize.Height));

/// <summary> 
/// Tap an element 
/// </summary> 
private void OnTapped( object sender, TappedRoutedEventArgs args) 
{ 
var positionX = args.GetPosition( this ).X; 
for ( int i = 0; i < this .internalList.Count; i++) 
{ 
var child = internalList[i]; 
var rect = child.TransformToVisual( this ).TransformBounds( new Rect(0, 0, child.DesiredSize.Width, child.DesiredSize.Height)); 
if (!(positionX >= rect.Left) || !(positionX <= (rect.Left + rect.Width))) continue ; 
isIncrementing = (i > this .SelectedIndex); 
this .SelectedIndex = i; 
return ; 
} 
}

/// <summary> 
/// Update all positions. Launch every animations on all items with a unique StoryBoard 
/// </summary> 
private void UpdatePosition() 
{ 
if (storyboard.GetCurrentState() != ClockState.Stopped) 
{ 
storyboard.SkipToFill(); 
storyboard.Stop(); 
storyboard = new Storyboard(); 
} 
isUpdatingPosition = true ; 
for ( int i = 0; i < this .internalList.Count; i++) 
{ 
var item = internalList[i]; 
PlaneProjection planeProjection = item.Projection as PlaneProjection; 
if (planeProjection == null ) 
continue ; 
// Get properties 
var depth = (i == this .SelectedIndex) ? 0 : -( this .Depth); 
var rotation = (i == this .SelectedIndex) ? 0 : ((i < this .SelectedIndex) ? Rotation : -Rotation); 
var offsetX = (i == this .SelectedIndex) ? 0 : (i - this .SelectedIndex) * desiredWidth; 
var translateY = TranslateY; 
var translateX = (i == this .SelectedIndex) ? 0 : ((i < this .SelectedIndex) ? -TranslateX : TranslateX); 
// CenterOfRotationX 
// to Get good center of rotation for SelectedIndex, must know the animation behavior 
int centerOfRotationSelectedIndex = isIncrementing ? 1 : 0; 
var centerOfRotationX = (i == this .SelectedIndex) ? centerOfRotationSelectedIndex : ((i > this .SelectedIndex) ? 1 : 0); 
planeProjection.CenterOfRotationX = centerOfRotationX; 
// Dont animate all items 
var inf = this .SelectedIndex - (MaxVisibleItems * 2); 
var sup = this .SelectedIndex + (MaxVisibleItems * 2); 
if (i < inf || i > sup) 
continue ; 
// Zindex and Opacity 
var deltaFromSelectedIndex = Math.Abs( this .SelectedIndex - i); 
int zindex = ( this .internalList.Count * 100) - deltaFromSelectedIndex; 
Canvas.SetZIndex(item, zindex); 
Double opacity = 1d - (Math.Abs((Double)(i - this .SelectedIndex) / (MaxVisibleItems + 1))); 
var newVisibility = deltaFromSelectedIndex > MaxVisibleItems 
? Visibility.Collapsed 
: Visibility.Visible; 
// Item already present 
if (item.Visibility == newVisibility) 
{ 
storyboard.AddAnimation(item, TransitionDuration, rotation, "(UIElement.Projection).(PlaneProjection.RotationY)" , this .EasingFunction); 
storyboard.AddAnimation(item, TransitionDuration, depth, "(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)" , this .EasingFunction); 
storyboard.AddAnimation(item, TransitionDuration, translateX, "(UIElement.Projection).(PlaneProjection.GlobalOffsetX)" , this .EasingFunction); 
storyboard.AddAnimation(item, TransitionDuration, offsetX, "(UIElement.Projection).(PlaneProjection.LocalOffsetX)" , this .EasingFunction); 
storyboard.AddAnimation(item, TransitionDuration, translateY, "(UIElement.Projection).(PlaneProjection.GlobalOffsetY)" , this .EasingFunction); 
storyboard.AddAnimation(item, TransitionDuration, opacity, "Opacity" , this .EasingFunction); 
} 
else if (newVisibility == Visibility.Visible) 
{ 
// This animation will occur in the ArrangeOverride() method 
item.Visibility = newVisibility; 
item.Opacity = 0d; 
} 
else if (newVisibility == Visibility.Collapsed) 
{ 
storyboard.AddAnimation(item, TransitionDuration, rotation, "(UIElement.Projection).(PlaneProjection.RotationY)" , this .EasingFunction); 
storyboard.AddAnimation(item, TransitionDuration, depth, "(UIElement.Projection).(PlaneProjection.GlobalOffsetZ)" , this .EasingFunction); 
storyboard.AddAnimation(item, TransitionDuration, translateX, "(UIElement.Projection).(PlaneProjection.GlobalOffsetX)" , this .EasingFunction); 
storyboard.AddAnimation(item, TransitionDuration, offsetX, "(UIElement.Projection).(PlaneProjection.LocalOffsetX)" , this .EasingFunction); 
storyboard.AddAnimation(item, TransitionDuration, translateY, "(UIElement.Projection).(PlaneProjection.GlobalOffsetY)" , this .EasingFunction); 
storyboard.AddAnimation(item, TransitionDuration, 0d, "Opacity" , this .EasingFunction); 
storyboard.Completed += (sender, o) => 
item.Visibility = Visibility.Collapsed; 
} 
} 
// When storyboard completed, Invalidate 
storyboard.Completed += (sender, o) => 
{ 
this .isUpdatingPosition = false ; 
this .InvalidateArrange(); 
}; 
storyboard.Begin(); 
}

public static void AddAnimation( this Storyboard storyboard, DependencyObject element, 
int duration, double fromValue, double toValue, String propertyPath, 
EasingFunctionBase easingFunction = null ) 
{ 
DoubleAnimation timeline = new DoubleAnimation(); 
timeline.From = fromValue; 
timeline.To = toValue; 
timeline.Duration = TimeSpan.FromMilliseconds(duration); 
if (easingFunction != null ) 
timeline.EasingFunction = easingFunction; 
storyboard.Children.Add(timeline); 
Storyboard.SetTarget(timeline, element); 
Storyboard.SetTargetProperty(timeline, propertyPath); 
}