Développer des contrôles personnalisés

WindowsStoreHeader
Dans cet atelier nous allons créer un contrôle personnalisé composé d’un bouton retour et d’un texte qui s’affiche avec une animation définie.

La manière la plus simple pour rajouter un contrôle personnalisé dans une application Windows Store est de réaliser les étapes suivantes  :

  • Clic droit sur le projet Windows Store App
  • Add New Item
  • Choisir Templated Control et nommer le fichier CustomControl

Visual Studio rajoute 3 éléments :

  • CustomControl.cs: Contient la logique applicative du contrôle personnalisé
  • Un dossier Themes: Contient le fichier Generic.xaml
  • Generic.xaml: Contient le template par défaut du contrôle personnalisé

Jetons un coup d’œil au fichier CustomControl.cs.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Documents;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
// The Templated Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234235
namespace SampleCustomControl
{
public sealed class CustomControl : Control
{
public CustomControl()
{
this.DefaultStyleKey = typeof(CustomControl); 
}
}
}

Par défaut, un nouveau contrôle personnalisé hérite la classe de base Control.

Comme je l’ai évoqué en amont, un contrôle personnalisé peut hériter de n’importe quel contrôle. Pour notre cas, nous allons l’hériter de Button.

Notre code devient :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Documents;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
// The Templated Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234235
namespace SampleCustomControl
{
    public sealed class CustomControl : Button
    {
        public CustomControl()
        {
            this.DefaultStyleKey = typeof(CustomControl);
        }
    }
}

La propriété DefaultStyleKey permet au framework de savoir quel style et template il doit appliquer au contrôle personnalisé.

Accéderau fichier Generic.xaml et implémenter le code ci-dessous :

<ResourceDictionary
    xmlns= »http://schemas.microsoft.com/winfx/2006/xaml/presentation &raquo;
    xmlns:x= »http://schemas.microsoft.com/winfx/2006/xaml &raquo;
    xmlns:local= »using:SampleCustomControl »
   >
     <Style TargetType= »local:CustomControl »>
         <!–REPRESENTATION GRAPHIQUE DU CONTROLE PERSONNALISE–>
        <Setter Property= »Template »>
            <Setter.Value>
                <ControlTemplate TargetType= »local:CustomControl »>
                        <Grid
                            Height= »120″ >
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width= »80″ />
                            <ColumnDefinition Width= »* » />
                        </Grid.ColumnDefinitions>
                        <AppBarButton Icon= »Back »
                                      Style= »{StaticResource NavigationBackButtonNormalStyle} »
                                      VerticalAlignment= »Center »
                                      Margin= »10,0,0,0″
                                      ToolTipService.ToolTip= »{TemplateBinding GoPageTitle} » />
                        <TextBlock Text= »{TemplateBinding Title} » Style= »{StaticResource HeaderTextBlockStyle} »
                                      VerticalAlignment= »Center »
                                   HorizontalAlignment= »Left »
                                   Grid.Column= »1″
                                   />
                        </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
         <!–ANIMATION DU CONTROLE PERSONNALISE–>
        <Setter Property= »Transitions »>
            <Setter.Value>
                <TransitionCollection>
                    <EntranceThemeTransition FromHorizontalOffset= »1000″ />
                </TransitionCollection>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Le style appliqué à la propriété Template permet de définir l’aspect graphique du bouton.

Le style appliqué à la propriété Transitions permet de définir l’animation du bouton.

Pour pouvoir customiser le Titre du bouton, l’utilisation des propriétés de dépendance est nécessaire.

Pour faire simple, dans notre cas, une propriété de dépendance permet d’étendre les propriétés d’un contrôle personnalisé.

Nous souhaitons que lorsque l’utilisateur place le curseur sur le bouton Retour, qu’il y ait le nom de la page qui s’affiche sous forme d’infobulle. Pour mettre en place ce type de comportement, il faudra créer une propriété de dépendance pour pouvoir binder le contenu de l’infobulle dans le contrôle personnalisé.

Nous concernant, voici les propriétés de dépendances (dans le fichier CustomControl.cs) dont nous avons besoin :

#region Dependency Properties
         //Contient la propriété de dépendance du titre du bouton Retour
        public static readonly DependencyProperty TitleProperty =
            DependencyProperty.Register(« Title », typeof(String), typeof(CustomControl), new PropertyMetadata(null));
         //Contient la propriété de dépendance de l’infobulle du bouton Retour
        public static readonly DependencyProperty GoPageTitleProperty =
            DependencyProperty.Register(« GoPageTitle », typeof(String), typeof(CustomControl), new PropertyMetadata(null));
         #endregion
         #region Properties
         //Contient le titre du bouton Retour
        public String Title
        {
            get { return (String)GetValue(TitleProperty); }
            set { SetValue(TitleProperty, value); }
        }
         //Contient le contenu de l’infobulle
        public String GoPageTitle
        {
            get { return (String)GetValue(GoPageTitleProperty); }
            set { SetValue(GoPageTitleProperty, value); }
        }
         #endregion

Le code ci-dessus représente 2 propriétés de dépendances TitleProperty et GoPageTitleProperty.

 Chaque propriété de dépendance est déclarée en public static readonly et possède comme suffixe Property. Il s’agit d’une norme de notation à respecter.

Elle est également accompagnée de sa propriété. Dans notre cas nous avons Title et GoPageTitle.

Accédons maintenant au fichier MainPage.xaml pour implémenter le contrôle personnalisé CustomControl.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Documents;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
// The Templated Control item template is documented at http://go.microsoft.com/fwlink/?LinkId=234235
namespace SampleCustomControl
{
public sealed class CustomControl : Control
{
public CustomControl()
{
this.DefaultStyleKey = typeof(CustomControl); 
}
}
}

Par défaut, un nouveau contrôle personnalisé hérite la classe de base Control.

Comme je l’ai évoqué en amont, un contrôle personnalisé peut hériter de n’importe quel contrôle. Pour notre cas, nous allons l’hériter de Button.

Notre code devient :

 <Page
    x:Class= »SampleCustomControl.MainPage »
    xmlns= »http://schemas.microsoft.com/winfx/2006/xaml/presentation &raquo;
    xmlns:x= »http://schemas.microsoft.com/winfx/2006/xaml &raquo;
    xmlns:local= »using:SampleCustomControl »
    xmlns:d= »http://schemas.microsoft.com/expression/blend/2008&Prime;
    xmlns:mc= »http://schemas.openxmlformats.org/markup-compatibility/2006&Prime;
    mc:Ignorable= »d »>
    <Grid Background= »{ThemeResource ApplicationPageBackgroundThemeBrush} »>
        <Grid.RowDefinitions>
            <RowDefinition Height= »120″ />
            <RowDefinition Height= »* » />
        </Grid.RowDefinitions>
        <!– IMPLEMENTATION DU CONTRÔLE PERSONNALISE–>
        <local:CustomControl   Title= »Retour »
                                GoPageTitle= »Accueil » />
   </Grid>
</Page>

Comme vous pouvez le constater le local :CustomControl possède les 2 propriétés créées : Title et GoPageTitle.

En exécutant l’application vous remarquerez que le bouton retour s’affiche avec une animation et lorsque le curseur est placé dessus, l’infobulle s’affiche.

<< Accéder aux fichiers et dossiers dynamiquement Tester fonctionnellement une application Windows Store >>
Publicités

Un commentaire sur “Développer des contrôles personnalisés

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 )

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 )

Photo Google+

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

Connexion à %s