Réutiliser le User Control :
Dans le poste précedent, vous avez créé un nouveau UserControl (AddressControl) pour taper des informations d’adresse. En convertissant une partie de MainPage.xaml dans un UserControl, Expression Blend créé automatiquement les références et a ajouté l’élément à la page. Mais que faire si vous voulez ajouter le même UserControl à nouveau sur la même page? Ce poste vous montre comment procéder.
Pour ajouter un UserControl, dans ce cas, le AddressControl, à MainPage.xaml, il suffit de suivre les étapes suivante :
1. Continuer à partir de la section précédente et faire en sorte que MainPage.xaml soit ouvert sur le plan de travail.
2. Ouvrez le panneau Actifs (Assets panel) dans Expression Blend et allez dans la catégorie de projet (Project category) en cliquant dessus.
Le AddressUserControl apparaît dans cette catégorie, comme le montre la Figure suivante :
Avoir l’AddressUserControl ici peut ne pas être surprenant, mais ce que vous pouvez trouver surprenant, c’est que MainPage se trouve également ici. C’est dans cette catégorie parce que MainPage, comme AddressUserControl, est également un User control. Vous pouvez ouvrir la vue XAML pour AddressUserControl et MainPage et vérifier cette hypothèse. Comme vous l’avez vu, toutes les pages que vous avez créé en XAML servent de composants réutilisables et vous permettent de les imbriquer de User Control.
3. Faites glisser et déposez sur AddressUserControl MainPage.xaml sur le plan de travail. Un autre AddressUserControl est ajouté à MainPage.
4. Appuyez sur F5 pour exécuter l’application. L’application s’exécute dans la fenêtre du navigateur et affiche les deux AddressUserControls dans la même page. Ces deux contrôles se resemblent et fonctionnent de la même façon, mais vous permettent de stocker et d’afficher deux séries d’adresses.
Il ya plusieurs avantages à mettre quelque chose comme une adresse dans un UserControl, mais l’une de nos raisons préférés est que, après que cela devient un UserControl, il peut être géré de façon indépendante et entretenus. Par exemple, si vous changez le conteneur de disposition (layout container) du StackPanel à un GridPanel et réorganiser la façon dont les champs sont affichés, ils seront automatiquement mis à jour dans chaque page dans laquelle le AddressUserControl est utilisé.
Création de propriétés pour votre UserControl :
Après avoir créé un UserControl, il serait bon de l’initialiser (operation set) et de lire quelques valeurs que vous avez tapé dans chaque champ. Un moyen d’atteindre ce but c’est de créer des propriétés pour chaque champ. (L’autre façon d’y parvenir est de faire du Data binding, peut être que je le traiterais dans un autre poste).
Pour ajouter des propriétés à chacun des champs (à savoir StreetNumber, streetName, City, State, PostalCode, et Country) de la AddressUserControl créé dans poste précedent, ouvrez le fichier AddressUserControl.xaml.cs sur le plan de travail et ajouter le code suivant dans la classse AddressUserControl :
{
get
{
return txtStreetNumber.Text;
}
set
{
txtStreetNumber.Text = value;
}
}
public string StreetName
{
get
{
return txtStreetName.Text;
}
set
{
txtStreetName.Text = value;
}
}
public string City
{
get
{
return txtCity.Text;
}
set
{
txtCity.Text = value;
}
}
public string State
{
get
{
return txtState.Text;
}
set
{
txtState.Text = value;
}
}
public string PostalCode
{
get
{
return txtPostalCode.Text;
}
set
{
txtPostalCode.Text = value;
}
}
public string Country
{
get
{
return txtCountry.Text;
}
set
{
txtCountry.Text = value;
}
}
Appuyez sur Ctrl+Maj+B pour compiler l’application, puis ouvrez le fichier MainControl.xaml en mode Création. Sélectionnez la première AddressUserControl et ouvrez le panneau de Propriétés. Dans la section Divers (Miscellaneous), vous trouverez désormais toutes les propriétés que vous venez d’ajouter. Modifiez les valeurs de ces propriétés et
Appuyez sur F5 pour exécuter l’application et vérifier si les valeurs apparaissent dans la
AddressUserControl.
Kamel DJELLAL
Chef de projet
EDIS CONSULTING – GROUPE UBISIDE
http://www.ubiside.fr/