Traduction▲
Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Peter Bull, Microsoft Silverlight 4 - Silverlight 70's style Flip Clock.
Introduction▲
Flip Clock émule le style classique « flip clock » des réveils et de la signalétique aéroportuaire pour une horloge en Silverlight !
« Flip Clock » du style des années 70 en Silverlight▲
Étape 1▲
Démarrez Microsoft Visual Web Developer 2010 Express, ensuite sélectionnez Fichier puis Nouveau Projet… Sélectionnez Visual Basic ensuite Application Silverlight dans les modèles installés, sélectionnez un emplacement si vous le souhaitez, puis entrez un nom pour le projet et appuyez sur OK :
Étape 2▲
Une nouvelle fenêtre Nouvelle application Silverlight devrait apparaître, décochez la case Héberger l'application Silverlight sur un nouveau site Web, puis sélectionnez la Version de Silverlight ciblée :
Étape 3▲
Une page vierge nommée MainPage.xaml devrait alors apparaître :
Étape 4▲
Sélectionnez Projet puis Ajouter un nouvel élément… et sélectionnez le modèle Contrôle utilisateur Silverlight s'il ne l'est pas déjà, ensuite modifiez le Nom en Flipper.xaml :
Étape 5▲
Ajoutez le nouveau contrôle utilisateur au projet en cliquant sur Ajouter, puis dans le volet XAML du contrôle utilisateur Flipper.xaml, pour la balise <UserControl>, ajoutez les attributs XAML suivants après mc:Ignorable="d" :
Foreground="WhiteSmoke" FontSize="64"Ensuite modifiez les attributs DesignHeight à "96" et DesignWidth à "100" :
Étape 6▲
Toujours dans le volet XAML de Flipper.xaml, au-dessus de <Grid> et en dessous de la balise <UserControl> supérieure, tapez le code XAML suivant :
<UserControl.Resources>
<Style x:Key="BorderStyle" TargetType="Border">
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="1,1,1,1"/>
</Style>
<LinearGradientBrush x:Key="BackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF202020" Offset="1"/>
<GradientStop Color="#FF404040"/>
</LinearGradientBrush>
<Storyboard x:Name="FlipAnimation">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BlockFlip"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame Value="1" KeyTime="0">
<EasingDoubleKeyFrame.EasingFunction>
<BounceEase EasingMode="EaseOut" Bounces="1" Bounciness="6"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame Value="-1" KeyTime="00:00:00.8">
<EasingDoubleKeyFrame.EasingFunction>
<BounceEase EasingMode="EaseOut" Bounces="1" Bounciness="6"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="textBlockFlipTop"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="textBlockFlipBottom"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime="00:00:00.4">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
Étape 7▲
En étant toujours dans le volet XAML de Flipper.xaml, remplacez le code se trouvant entre les balises <Grid> et </Grid> par le code XAML suivant :
<Grid Height="96" Width="100">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<Border Style="{StaticResource BorderStyle}" Background="{StaticResource BackgroundBrush}" x:Name="BlockTop">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Text="01" x:Name="textBlockTop"/>
</Border>
<Border Grid.Row="1" Style="{StaticResource BorderStyle}" x:Name="BlockBottom">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF202020"/>
<GradientStop Color="#FF404040" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0" Text="00" x:Name="textBlockBottom"/>
</Border>
<Border Style="{StaticResource BorderStyle}" Background="{StaticResource BackgroundBrush}" RenderTransformOrigin="0.5,1" x:Name="BlockFlip">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<Grid>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" Text="00" x:Name="textBlockFlipTop"/>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" Visibility="Collapsed" RenderTransformOrigin="0.5,0.5" x:Name="textBlockFlipBottom">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform Y="48"/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</Border>
</Grid>Voir ci-dessous :
Étape 8▲
Faites un clic droit sur la page ou sur l'entrée pour Flipper.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, en dessous de la ligne Inherits UserControl, tapez les propriétés de dépendance suivantes :
Public Shared ReadOnly TextPrevProperty As DependencyProperty =
DependencyProperty.Register("TextPrev", GetType(String),
GetType(Flipper), Nothing)
Public Shared ReadOnly TextNextProperty As DependencyProperty =
DependencyProperty.Register("TextNext", GetType(String),
GetType(Flipper), Nothing)
Étape 9▲
Toujours dans la vue de code de Flipper.vb, au-dessus du End Class pour Partial Public Class Flipper, tapez les propriétés suivantes :
Public Property TextPrev() As Object
Get
Return GetValue(TextPrevProperty)
End Get
Set(ByVal value As Object)
SetValue(TextPrevProperty, value)
textBlockBottom.Text = TextPrev
textBlockFlipTop.Text = TextPrev
End Set
End Property
Public Property TextNext() As Object
Get
Return GetValue(TextNextProperty)
End Get
Set(ByVal value As Object)
SetValue(TextNextProperty, value)
textBlockTop.Text = TextNext
textBlockFlipBottom.Text = TextNext
End Set
End Property
Étape 10▲
En étant toujours dans la vue de code de Flipper.vb, au-dessus du End Sub de Public Sub New(), tapez le Sub suivant :
Public Sub Flip(ByVal FromValue As String, ByVal ToValue As String)
TextNext = ToValue
TextPrev = FromValue
FlipAnimation.Begin()
End Sub
Étape 11▲
Sélectionnez Debug, puis l'option Build FlipClock du menu :
Étape 12▲
Retournez au concepteur de vues MainPage.xaml en sélectionnant l'onglet MainPage.xaml, ou en double-cliquant sur MainPage.xaml dans l'Explorateur de solutions.
Puis dans la section Tous les contrôles Silverlight de la Boîte à outils, sélectionnez le contrôle Canvas :
Étape 13▲
Dessinez un Canvas qui remplit toute la page ou dans le volet XAML entre les lignes <Grid> et </Grid> tapez le code XAML suivant :
<Canvas Height="300" Width="400" HorizontalAlignment="Left" VerticalAlignment="Top" Name="Page">
</Canvas>Voir ci-dessous :
Étape 14▲
Puis dans la section Contrôles FlipClock de la Boîte à outils, sélectionnez le contrôle Flipper :
Étape 15▲
Dessinez trois Flippers sur le Canvas (Page) en glissant le contrôle Flipper de la Boîte à outils sur le Canvas, ensuite dans le volet XAML entre les balises <Canvas> et </Canvas> modifiez les lignes <my:Flipper> comme ceci :
<my:Flipper Canvas.Top="100" Canvas.Left="50" x:Name="Hours"/>
<my:Flipper Canvas.Top="100" Canvas.Left="150" x:Name="Minutes"/>
<my:Flipper Canvas.Top="100" Canvas.Left="250" x:Name="Seconds"/>Voir ci-dessous :
Étape 16▲
Faites un clic droit sur la page ou sur l'entrée pour MainPage.xaml dans l'Explorateur de solutions et choisissez l'option Afficher le code. Dans la vue de code, en dessous de la ligne Inherits UserControl, tapez les lignes de code suivantes :
Private WithEvents _timer As New Windows.Threading.DispatcherTimer
Private _timeSeconds As Integer = Now.Second
Private _timeMinutes As Integer = Now.Minute
Private _timeHours As Integer = Now.Hour
Étape 17▲
Puisque nous en sommes à la vue de code pour MainPage.xaml, en dessous du End Sub pour Public Sub New(), tapez le gestionnaire d'événements suivant :
Private Sub Timer_Tick(ByVal sender As Object, ByVal e As EventArgs) Handles _timer.Tick
If _timeSeconds = 59 Then
Seconds.Flip(_timeSeconds.ToString("00"), 0.ToString("00"))
_timeSeconds = 0
If _timeMinutes = 59 Then
Minutes.Flip(_timeMinutes.ToString("00"), 0.ToString("00"))
_timeMinutes = 0
If _timeHours = 23 Then
Hours.Flip(_timeHours.ToString("00"), 0.ToString("00"))
_timeHours = 0
Else
Hours.Flip(_timeHours.ToString("00"), (_timeHours + 1).ToString("00"))
_timeHours += 1
End If
Else
Minutes.Flip(_timeMinutes.ToString("00"), (_timeMinutes + 1).ToString("00"))
_timeMinutes += 1
End If
Else
Seconds.Flip(_timeSeconds.ToString("00"), (_timeSeconds + 1).ToString("00"))
_timeSeconds += 1
End If
End Sub
Étape 18▲
Toujours dans la vue de code pour MainPage.xaml, dans le constructeur Public Sub New() en dessous de la ligne InitializeComponent(), tapez les lignes de code suivantes :
Seconds.TextPrev = _timeSeconds.ToString("00")
Minutes.TextPrev = _timeMinutes.ToString("00")
Hours.TextPrev = _timeHours.ToString("00")
_timer.Interval = TimeSpan.FromSeconds(1)
_timer.Start()
Étape 19▲
Enregistrez le projet maintenant que vous avez terminé l'application Silverlight. Sélectionnez Debug ensuite Démarrer le débogage ou cliquez sur Démarrer le débogage :
Une fois que vous l'aurez fait, ce qui suit apparaîtra dans une nouvelle fenêtre du navigateur :
Étape 20▲
Fermez l'application et la fenêtre du navigateur en cliquant sur le bouton Fermer 
en haut à droite de la fenêtre de l'application et du navigateur Web pour Arrêter l'application.
Conclusion▲
Ceci est un « flip clock » simple utilisant un contrôle utilisateur Flipper. Il serait possible d'utiliser le « flipper » pour afficher du texte comme dans les signalétiques des aéroports mentionnées précédemment, par exemple. Vous pouvez modifier le contrôle pour avoir un look ressemblant davantage à un « flip clock » classique ou autre chose - personnalisez-le !
Liens▲
Remerciements▲
Je tiens ici à remercier Peter Bull de m'avoir autorisé à traduire son tutoriel.
Je remercie tomlev pour sa relecture technique et ses propositions.
Je remercie également ClaudeLELOUP pour sa relecture orthographique et ses propositions.
