Application d’une apparence et animation d’un bouton

Applies to Windows and Windows Phone

Vous êtes libre d’appliquer une apparence aux boutons de votre application, ainsi que de les animer. Voici comment procéder.

Il est important de définir l’apparence de votre application et vous avez probablement passé beaucoup de temps avec la variation personnalisée UIButton d’iOS, en utilisant des fichiers PNG pour créer l’apparence appropriée pour votre application. À ce stade, vous aurez décidé ce qui doit se produire lorsque l’utilisateur appuie sur le bouton : doit-il clignoter, afficher une nouvelle image, changer de taille, ou les trois à la fois ?

L’apparence des contrôles bouton de votre application du Windows Store peut également être modifiée et vous pouvez également appliquer des effets d’animation personnalisés. Examinons comment créer ces effets en XAML et comment les déclencher à partir de C# et C++.

Remarque  Pour plus d’informations sur les animations pour les applications du Windows Store en JavaScript et HTML, voir Animation de votre interface utilisateur.

Application d’une apparence à un contrôle bouton

Il existe plusieurs manières de modifier l’apparence d’un contrôle bouton. Les plus courantes sont les suivantes :

  • utiliser les styles prédéfinis ;
  • utiliser les outils de dessin XAML ;
  • utiliser les images bitmap.

Voyons cela plus en détail.

  • Utiliser les styles prédéfinis

    Si vous voulez que votre application suive les recommandations de conception Windows 8 standard, vous n’avez pas beaucoup d’efforts à faire. Les boutons XAML existants fournissent l’apparence correspondant à vos attentes et vous pouvez changer les couleurs, la taille et les styles de police en apportant quelques ajustements aux propriétés, comme illustré dans Démarrage rapide : contrôles de styles (applications du Windows Store en C#/VB/C++ et XAML). Ces boutons sont automatiquement dimensionnés pour s’afficher correctement sur un écran, quelle que soit la taille de ce dernier.

    Lorsque vous utilisez Xcode, vous pouvez utiliser les conceptions système pour Terminé, OK, Annuler, etc. Dans Windows 8, les boutons équivalents dans les applications du Windows Store sont stockés dans StandardStyles.xaml. Par exemple, voici le style de bouton Lecture intégré lorsqu’il est appliqué au bouton XAML, prêt à être utilisé dans un contrôle barre de l’application :

    Exemple de bouton

    Le seul code XAML requis pour créer ce style était :

    
     <Button x:Name="myPlayButton"  Style="{StaticResource PlayAppBarButtonStyle}" />
    
    

    Remarque  La plupart des styles dans StaticResource sont placés en commentaires par défaut. Pour les utiliser, ouvrez le fichier StandardStyles.xaml, recherchez le bouton que vous voulez utiliser et supprimez les marques de commentaires correspondantes.

    Dans les applications écrites spécifiquement pour Windows 8.1, il n’y a plus de fichier StandardStyles.xaml mais un nouveau type de bouton appelé AppBarButton. Par exemple, pour créer un bouton Lecture dans une application Windows 8.1, vous utiliseriez le XAML suivant :

    
    <AppBarButton x:Name="myPlayButton" Icon="Play" Label="Play"/>
    
    
  • Utiliser XAML

    Supposons que vous voulez créer une version d’un bouton qui ressemble à ce qui suit pour une application de lecture de contenu multimédia :

    Exemple de bouton

    Ce bouton comporte un arrière-plan sombre dégradé et une image de premier plan avec un symbole de lecture. Vous voudrez peut-être modifier l’image de premier plan quand l’utilisateur appuiera dessus, si bien qu’il semble judicieux de maintenir séparées les images de premier plan et d’arrière-plan.

    À présent, avant de lancer votre programme de dessin préféré pour créer des images, considérez la manière dont vous pouvez atteindre le même résultat par programmation. Le code XAML propose de nombreuses options de dessin qui vous permettront de créer rapidement un arrière-plan de texture avec dégradé et une forme triangulaire au premier plan. Voici une manière de procéder :

    
     <Button x:Name="myCoolButton" Height="55" Width="104"  BorderThickness="0" >
                <Grid>
                    <Rectangle Width="104" Height="55">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="Black" Offset="0.0" />
                                <GradientStop Color="Gray" Offset="0.03" />
                                <GradientStop Color="Black" Offset="0.25" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Polygon  Points="25,3,25,39,55,21">
                        <Polygon.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop Color="LightGreen" Offset="0.0" />
                                <GradientStop Color="DarkGreen" Offset="1.0" />
                            </LinearGradientBrush>
                        </Polygon.Fill>
                    </Polygon>
                </Grid>
            </Button>
    
    

    Si vous ne voulez pas entrer le code XAML à la main, vous pouvez utiliser Blend pour créer le même effet d’une manière plus visuelle :

    Utilisation de Blend pour créer un bouton

  • Utiliser les images bitmap

    Le contrôle bouton XAML vous permet de remplacer son contenu par votre propre définition de ce à quoi il pourra ressembler si, par exemple, vous voulez qu’il affiche plusieurs images. L’élément Grille permet d’empiler nos deux objets (une image d’arrière-plan et une image de premier plan) comme suit :

    
      <Button x:Name="myBitMapButton" Height="55" Width="104" BorderThickness="0" >
                <Grid>
                    <Image Source="graduated-button.png"/>
                    <Image Source="play-green.png"/>
                </Grid>
            </Button>
    
    

    Vous pouvez utiliser l’élément StackPanel pour combiner encore plus d’objets, tels qu’un TextBlock, pour créer le bouton suivant :

    Exemple de bouton

    Voici le code qui permettrait d’obtenir le même résultat :

    
      <Grid Background="#FF5989A4">
            <Button x:Name="myBitMapButton"   Height="200" Width="104"  BorderThickness="0" Margin="80,34,0,679" >
                <StackPanel Height="86" >
                    <Grid Height="55" VerticalAlignment="Top" >
                        <Image Source="graduated-button.png" Margin="0,16,0,-7"/>
                    <Image Source="play-green.png" Margin="0,16,0,-5"/>
                    <TextBlock Text="Play"  VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="24,0,22,-15"/>
                    </Grid>
                </StackPanel>
            </Button>
    
    

L’avantage d’utiliser XAML par rapport aux images bitmap tient au fait que vos images sont effectivement des vecteurs : elles seront dimensionnées sans problème quelle que soit la résolution de l’écran sur lequel elles seront affichées. Lorsque des boutons sont créés au moyen des approches bitmap et XAML et placés côte à côte, vous pouvez voir cela clairement en agrandissant l’image. Bien entendu, vous pourriez réduire l’effet de mise à l’échelle en fournissant des images dans plusieurs versions (voir Prise en charge de plusieurs résolutions), mais la gestion d’autant de fichiers peut vite devenir fastidieuse.

Observez les pixels

Un avantage appréciable de XAML est que vous pouvez définir des modèles utilisables par plusieurs contrôles. Par exemple, supposons que vous voulez créer une série de boutons dotés du même arrière-plan dégradé, comme ceci :

Boutons de contrôle multimédia

Plutôt que de définir à chaque fois l’arrière-plan dégradé, vous pouvez créer un style que chaque bouton utilisera. Dans cet exemple, le style est placé dans le fichier .xaml pour la page qui affiche les boutons, par exemple, MainPage.xaml. Le style est ensuite placé dans la section <Page.Resources>, comme suit :


        <Style x:Name="graduatedButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Rectangle>
                                <Rectangle.Fill >
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Black" Offset="0.0" />
                                        <GradientStop Color="Gray" Offset="0.03" />
                                        <GradientStop Color="Black" Offset="0.25" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Remarquez l’utilisation de la balise <ContentPresenter/>, qui est un espace réservé pour tout contenu supplémentaire (par exemple, du texte ou une autre image). Voici le code XAML qui déclare un bouton utilisant ce nouveau style, puis ajoute un triangle supplémentaire :


       <Button x:Name="myPlayButton" Style="{StaticResource graduatedButton}"  Height="44" Width="135"  Click="myPlayButton_Click" >
            <Grid>
                 <Polygon Points="50,3,50,39,86,21">
                    <Polygon.Fill>
                     <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                         <GradientStop Color="Yellow" Offset="0.0" />
                         <GradientStop Color="YellowGreen" Offset="0.5" />
                    </LinearGradientBrush>
                </Polygon.Fill>
              </Polygon>
            </Grid>
        </Button>


Animation d’un bouton

Lors de l’écriture d’applications iOS, l’animation d’un contrôle tel qu’un bouton revient habituellement à modifier certaines propriétés du contrôle au sein d’un bloc [UIView beginAnimations]/[UIView commitAnimations]. Le processus équivalent dans une application du Windows Store implique la création d’un objet Storyboard. L’objet Storyboard peut être considéré comme un script que le contrôle doit suivre et qui décrit la façon dont ses propriétés changeront au fil du temps. Ceci est idéal pour la création d’animations qui se produisent lorsque vous appuyez sur un bouton ou pour glisser dans un nouveau volet d’informations.

Remarque  Ne confondez pas le terme XAML Storyboard avec le terme iOS Storyboard.

La façon la plus simple de créer une animation consiste à utiliser Blend. Blend fournit une approche graphique de la création du code XAML qui compose l’objet Storyboard et vous permet également d’afficher l’aperçu de votre animation pendant que vous travaillez.

En premier lieu, nous examinerons l’ajout d’une animation unique à un bouton spécifique, puis nous couvrirons la création d’une animation que vous pourrez appliquer à plusieurs boutons en créant un style. Cette animation mettra en scène l’enfoncement d’un bouton, comme si vous le poussiez dans l’écran.

Définissez le bouton dans votre fichier XAML, comme suit :


 <Button x:Name="TiltButton"   BorderThickness="0" Margin="100,0,0,0" >
            <Grid>
                <Rectangle Width="200" Height="100">
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="Black" Offset="0.0" />
                            <GradientStop Color="Gray" Offset="0.03" />
                            <GradientStop Color="Black" Offset="0.25" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Polygon  Points="75,5,75,95,145,50">
                    <Polygon.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="LightGreen" Offset="0.0" />
                            <GradientStop Color="DarkGreen" Offset="1.0" />
                        </LinearGradientBrush>
                    </Polygon.Fill>
                </Polygon>
            </Grid>
        </Button>

Cela génère un bouton semblable à :

Bouton

À présent, ouvrez le projet dans Blend. Sélectionnez le contrôle bouton et cliquez sur le bouton + dans la fenêtre Objets et chronologie, comme illustré ci-dessous :

Fenêtre Blend

Sélectionnez Nouveau pour créer un nouvel objet Storyboard et le nommer, comme suit :

Création d’un nouvel objet Storyboard dans Blend

Appuyez sur le bouton Enregistrer l’image clé, situé à gauche de l’affichage du code horaire. Cela créera une image clé avec toutes les propriétés du bouton dans leurs positions par défaut. Faites glisser la ligne jaune de la tête de lecture de moins de 0,5 seconde environ. Ce sera l’emplacement de la seconde image clé (la dernière, dans notre cas).

Déplacez la tête de lecture.

À présent, nous pouvons peaufiner les paramètres du bouton pour obtenir un effet d’enfoncement. Sous Transformer dans la vue Propriétés à droite, recherchez Projections et modifiez l’angle Y en spécifiant environ -30.

Modifiez la valeur de l’axe Y pour créer un effet d’enfoncement.

Enfin, cliquez sur le nom de l’objet Storyboard dans la fenêtre Objets et chronologie, puis à droite, veillez à ce que l’option AutoReverse soit activée. Cela entraînera le retour de l’animation à son état initial, une fois terminée.

Cochez AutoReverse.

Enregistrez le projet Blend et retournez dans Visual Studio. Veillez à cliquer sur Oui pour tout quand vous êtes interrogé sur le rechargement de la solution. À présent, notre animation fait partie du projet, mais elle ne sera pas déclenchée automatiquement. À la place, nous devons modifier la définition XAML du bouton pour qu’elle fasse deux choses : premièrement, elle doit prendre en charge les transformations (en fait, le code XAML qui est requis sera ajouté automatiquement par Blend) et deuxièmement, elle doit appeler une fonction dans notre fichier code-behind C# (nous devrons l’ajouter nous-mêmes). Voici le code XAML mis à jour :


<Button x:Name="TiltButton"   BorderThickness="0"  Click="TiltButton_Click" >
            <Grid>
                <Rectangle x:Name="rectangle" Width="200" Height="100">
                	<Rectangle.Projection>
                		<PlaneProjection/>
                	</Rectangle.Projection>
                    <Rectangle.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="Black" Offset="0.0" />
                            <GradientStop Color="Gray" Offset="0.03" />
                            <GradientStop Color="Black" Offset="0.25" />
                        </LinearGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Polygon  Points="75,5,75,95,145,50">
                    <Polygon.Fill>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                            <GradientStop Color="LightGreen" Offset="0.0" />
                            <GradientStop Color="DarkGreen" Offset="1.0" />
                        </LinearGradientBrush>
                    </Polygon.Fill>
                </Polygon>
            </Grid>
        </Button>

Et voici la fonction C# dans la page code-behind qui déclenchera l’animation :


private void TiltButton_Click(object sender, RoutedEventArgs e)
        {
            TiltAnimation.Begin();
        }

Si vous utilisez C++, vous pouvez utiliser du code similaire :


void MyApp::MainPage::TiltButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
	TiltAnimation->Begin();
}


En exécutant cette application, vous verrez qu’en appuyant sur le bouton, ce dernier s’enfoncera rapidement et légèrement, comme ceci :

Le bouton s’est enfoncé.

Dans la section ci-dessus, nous avons vu comment la création d’un style pouvait accélérer l’implémentation de l’interface utilisateur. Voici comment ajouter un objet Storyboard à un style de sorte que tout contrôle bouton créé avec ce style hérite de l’animation. Le secret consiste à utiliser l’objet VisualStateManager, car cela vous laisse définir des objets Storyboard spécifiques par événement de bouton. Voici le code XAML qui déclenchera une brève animation lorsque vous appuierez sur le bouton. Comme avant, ce code XAML doit être placé dans la section <Page.Resources> et dans le style appliqué à votre bouton.


 <Style x:Name="graduatedButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
                            <Grid.RenderTransform>
                                <CompositeTransform/>
                            </Grid.RenderTransform>
                            <VisualStateManager.VisualStateGroups>                             
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>                                 
                                        <VisualState x:Name="Pressed">                                    
                                            <Storyboard >
                                            <DoubleAnimation Duration="0" To=" 0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="grid"/>
                                            <DoubleAnimation Duration="0" To=" 0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="grid"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>                              
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle >
                                <Rectangle.Fill >
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="Black" Offset="0.0" />
                                        <GradientStop Color="Gray" Offset="0.03" />
                                        <GradientStop Color="Black" Offset="0.25" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

L’utilisation de VisualStateManager signifie que vous n’avez même pas besoin de déclencher l’animation de table de montage séquentiel avec Begin(), car elle est déclenchée automatiquement une fois l’état activé.

Rubriques associées

Rubriques pour les développeurs iOS
Ressources pour les développeurs iOS
Contrôles Windows 8 pour les développeurs iOS
Guide de référence Windows 8 pour les développeurs iOS
Rubriques sur l’application d’une apparence et l’animation
Prise en main : animation
Procédure : création d’interfaces utilisateur en XAML et à l’aide d’Expression Blend
Animation de votre interface utilisateur (applications du Windows Store en C#/VB/C++ et XAML)
Animations de table de montage séquentiel (applications du Windows Store en C#/VB/C++ et XAML)
Animations dans une table de montage pour les états visuels

 

 

Afficher:
© 2014 Microsoft