Accueil > Silverlight 3 > [SL3] : RevealDecorator

[SL3] : RevealDecorator

Peut être avez vous déjà utilisé le contrôle RevealDecorator que vous pouvez trouver dans Kaxaml (http://kaxaml.codeplex.com/).

Celui-ci permet en quelques clics d’afficher ou de masquer un contrôle grâce à une propriété booléenne “IsExpanded”, mais aussi de définir la direction de révélation.

Malheureusement celui-ci n’est pas compatible en l’état avec Silverlight 3, j’ai donc décidé de le refaire pour qu’il soit utilisable.

Le controle ExpandableContentControl de la librairie Silverlight Toolkit

Cette librairie (que vous pouvez trouver à l’adresse suivante : http://www.codeplex.com/Silverlight) comporte un mine de petits contrôles qui ont pour but de simplifier la vie du développeur mais aussi de fournir une preview des contrôles qui seront implémentés dans les versions futures de Silverlight…

Pour réaliser notre contrôle nous allons dériver l’ “ExpandableContentControl” utilisé dans le Toolkit Silverlight pour réaliser le contrôle d’accordéon “Accordion”.

Celui ci dispose de deux propriétés clés pour nous :

  • une propriété “Percentage” permettant de déterminer le pourcentage d’affichage du contrôle fils (autrement dit si vous mettez 0.5 vous ne verrez que la moitié de celui-ci)
  • une propriété “RevealMode” de type “ExpandDirection” permettant de définir le sens de la révélation ou du masquage
    • Left : vers la gauche
    • Right : vers la droite
    • Up : vers le haut
    • Down : vers le bas

Réalisation du controle

Nous alors crée une classe RevealDecorator héritant de ExpandableContentControl


///
/// Content control affichant ou cachant le contenu suivant une direction et un temps donné
///
public class RevealDecorator : ExpandableContentControl
{
#region Ctors
///
/// Crée une instance d'un content control affichant ou cachant le contenu suivant une direction et un temps donné
///
public RevealDecorator()
{
this.DefaultStyleKey = typeof(ExpandableContentControl);
}
#endregion

}

Nous allons rajouter deux dependency property pour rendre ce contrôle facilement utilisable:

IsExpanded : valeur booléenne définissant si le contenu est affiché ou masqué.
Duration : durée en milliseconde déterminant la durée de l’animation réalisée lors du changement de valeur de la propriété “IsExpanded”

public class RevealDecorator : ExpandableContentControl
{
#region Membres
///
/// Identifie la dependency property IsExpanded
///
private static readonly DependencyProperty IsExpandedProperty =
DependencyProperty.Register(
"IsExpanded",
typeof(Boolean),
typeof(RevealDecorator),
new PropertyMetadata(false));

///
/// Identifie la dependency property Duration
///
public static readonly DependencyProperty DurationProperty =
DependencyProperty.Register(
"Duration",
typeof(Double),
typeof(RevealDecorator),
new PropertyMetadata(250.0));

#endregion

#region Ctors
///
/// Crée une instance d' une ListBox ayant la facultée de sélectionner les DataTemplates de façon personnalisée en fonction de la donnée
///
public RevealDecorator()
{
this.DefaultStyleKey = typeof(ExpandableContentControl);
}
#endregion

#region DP
///
/// Obtient ou définit si le contenu est révélé ou non
///
public Boolean IsExpanded
{
get
{
return (Boolean)GetValue(IsExpandedProperty);
}

set
{
SetValue(IsExpandedProperty, value);
}
}

///
/// Durée de l'animation de revelation
///
public double Duration
{
get
{
return (double)GetValue(DurationProperty);
}
set
{
SetValue(DurationProperty, value);
}
}

#endregion

}

A présent il ne nous reste plus qu’à animer la Dependency Property “Percentage” au changement de valeur de “IsExpanded” afin d’avoir un effet d’apparition et de masquage animé.


public class RevealDecorator : ExpandableContentControl
{
#region Membres
///
/// Identifie la dependency property IsExpanded
///
private static readonly DependencyProperty IsExpandedProperty =
DependencyProperty.Register(
"IsExpanded",
typeof(Boolean),
typeof(RevealDecorator),
new PropertyMetadata(false, new PropertyChangedCallback(OnIsExpandedChanged)));

///
/// Identifie la dependency property Duration
///
public static readonly DependencyProperty DurationProperty =
DependencyProperty.Register(
"Duration",
typeof(Double),
typeof(RevealDecorator),
new PropertyMetadata(250.0));

#endregion

#region Ctors
///
/// Crée une instance d' une ListBox ayant la facultée de sélectionner les DataTemplates de façon personnalisée en fonction de la donnée
///
public RevealDecorator()
{
this.DefaultStyleKey = typeof(ExpandableContentControl);
}
#endregion

#region DP
///
/// Obtient ou définit si le contenu est révélé ou non
///
public Boolean IsExpanded
{
get
{
return (Boolean)GetValue(IsExpandedProperty);
}

set
{
SetValue(IsExpandedProperty, value);
}
}

///
/// Durée de l'animation de revelation
///
public double Duration
{
get
{
return (double)GetValue(DurationProperty);
}
set
{
SetValue(DurationProperty, value);
}
}

#endregion

#region Méthodes
private static void OnIsExpandedChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
((RevealDecorator)d).ExpandCollapseAnimation((bool)e.NewValue);
}

private void ExpandCollapseAnimation(Boolean isExpanded)
{
double currentProgress = this.Percentage;

if (isExpanded)
{
currentProgress = 1.0 - currentProgress;
}

DoubleAnimation animation = new DoubleAnimation();
animation.To = isExpanded ? 1.0 : 0.0;
animation.Duration = TimeSpan.FromMilliseconds(Duration * currentProgress);
animation.EasingFunction = new PowerEase()
{
EasingMode = EasingMode.EaseInOut,
Power = 4
};

Storyboard.SetTarget(animation, this);
Storyboard.SetTargetProperty(animation, new PropertyPath(RevealDecorator.PercentageProperty));

Storyboard s = new Storyboard();

s.Children.Add(animation);

s.Begin();

}
#endregion

}

Utilisation du contrôle

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SilverlightApplication3.MainPage"
xmlns:reveal="clr-namespace:SilverlightApplication3">

<Grid>

<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>

<CheckBox Content="Afficher/Cacher"
x:Name="ExpandCollapse" />
<reveal:RevealDecorator VerticalAlignment="Top"
IsExpanded="{Binding Path=IsChecked, ElementName=ExpandCollapse}"
Duration="400"
Grid.Row="1">
<Rectangle Fill="#FFF20000"
Stroke="Black"
Height="100"
Width="300" />
</reveal:RevealDecorator>
</Grid>

</UserControl>

Et le tour est joué !

Publicités
Catégories :Silverlight 3
  1. Aucun commentaire pour l’instant.
  1. No trackbacks yet.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s

%d blogueurs aiment cette page :