Microsoft Silverlight 4 - Tutoriel 28 : Flip Clock

« Flip Clock » du style des années 70 en Silverlight

| Peter Bull | Deepin Prayag (Traduction) |

Traducteur

Deepin

Ce tutoriel fait partie d'une série de niveau débutant-intermédiaire pour apprendre Silverlight 4 par le biais d'exemples pas à pas.

Langage : VB.NET

Public visé : niveau Débutant

Commentez ce tutoriel : Commentez

- Titre : Microsoft Silverlight 4 - Tutoriel 28 : Flip Clock

- Auteurs : Peter Bull, Deepin Prayag (Traduction)

- Traducteur : Deepin

- Parution : 23 mars 2012

- Mise à jour : 30 avril 2012

- Licence : Copyright ® 2012 Peter Bull. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Traduction

- Introduction

- « Flip Clock » du style des années 70 en Silverlight

- Étape 1

- Étape 2

- Étape 3

- Étape 4

- Étape 5

- Étape 6

- Étape 7

- Étape 8

- Étape 9

- Étape 10

- Étape 11

- Étape 12

- Étape 13

- Étape 14

- Étape 15

- Étape 16

- Étape 17

- Étape 18

- Étape 19

- Étape 20

- Conclusion

- Liens

- Remerciements

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

Télécharger le code source du tutoriel.

Démonstration en ligne du tutoriel.

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.