Microsoft Silverlight 4 - Tutoriel 28 : Flip Clock

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

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 Donner une note à l'article (5)

Article lu   fois.

Les trois auteurs et traducteur

Site personnel

Traducteur :

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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 :

Image non disponible

É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 :

Image non disponible

Étape 3

Une page vierge nommée MainPage.xaml devrait alors apparaître :

Image non disponible

É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 :

Image non disponible

É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" :

 
Sélectionnez
Foreground="WhiteSmoke" FontSize="64"

Ensuite modifiez les attributs DesignHeight à "96" et DesignWidth à "100" :

Image non disponible

É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 :

 
Sélectionnez
<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>
Image non disponible
Image non disponible

É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 :

 
Sélectionnez
<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 :

Image non disponible

É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 :

 
Sélectionnez

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)
Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible

É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 :

 
Sélectionnez
Public Sub Flip(ByVal FromValue As String, ByVal ToValue As String)
  TextNext = ToValue
  TextPrev = FromValue
  FlipAnimation.Begin()
End Sub
Image non disponible

Étape 11

Sélectionnez Debug, puis l'option Build FlipClock du menu :

Image non disponible

É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 :

Image non disponible

É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 :

 
Sélectionnez
<Canvas Height="300" Width="400" HorizontalAlignment="Left" VerticalAlignment="Top" Name="Page">
</Canvas>

Voir ci-dessous :

Image non disponible

Étape 14

Puis dans la section Contrôles FlipClock de la Boîte à outils, sélectionnez le contrôle Flipper :

Image non disponible

É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 :

 
Sélectionnez
<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 :

Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible

É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 :

 
Sélectionnez
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
Image non disponible

É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 :

 
Sélectionnez
Seconds.TextPrev = _timeSeconds.ToString("00")
Minutes.TextPrev = _timeMinutes.ToString("00")
Hours.TextPrev = _timeHours.ToString("00")
_timer.Interval = TimeSpan.FromSeconds(1)
_timer.Start()
Image non disponible

É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 :

Image non disponible

Une fois que vous l'aurez fait, ce qui suit apparaîtra dans une nouvelle fenêtre du navigateur :

Image non disponible

Étape 20

Fermez l'application et la fenêtre du navigateur en cliquant sur le bouton Fermer Image non disponible 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.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

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. Droits de diffusion permanents accordés à Developpez LLC.