Binding et UserControl (Part 1) : DataContext

Le UserControl est le control le plus simple à utiliser puisqu’il permet d’encapsuler directement d’autres contrôles dans son fichier XAML.

Lorsque l’on passe un objet dans le DataContext de ce userControl, celui-ci peut être réutiliser directement dans son XAML grâce au binding.

Le problème du DataContext du UserControl est qu’il n’est pas typé et qu’il est difficile de se rappeler, une fois le développement terminé, ce qu’il faut lui passer comme paramètre.

Pour que le paramètre ne sombre pas dans l’oubli, on peut adjoindre au UserControl un PropertyDependency (via le snippet propdp) qui sera évidemment typé. Mais un autre interêt important des PropertyDependency est que l’on peut les Binder !

using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightTest
{
    public partial class AddressControl : UserControl
    {
        public AddressControl()
        {
            InitializeComponent();
        }

        /// <summary>
        /// L'adresse a passer
        /// </summary>

        public string Address
        {
            get { return (string)GetValue(AddressProperty); }
            set { SetValue(AddressProperty, value); }
        }

        // Using a DependencyProperty as the backing store for Address.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty AddressProperty =
            DependencyProperty.Register("Address", typeof(string), typeof(AddressControl), new PropertyMetadata(null));


    }
}

On relie maintenant notre dependency property Address à notre fichier Xaml via un Binding :

<UserControl x:Class="SilverlightTest.AddressControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBox Text="{Binding Address, Mode=TwoWay}"></TextBox>
    </Grid>
</UserControl>

Malheureusement, le binding ne fonctionne pas !
En effet, le Binding utilise le DataContext du UserControl. Hors celui-ci n’est lié à rien ou plutôt est lié au Datacontext de son parent. Pour utiliser la propriété Address, il faudrait que le DataContext contienne un référence au UserControl lui même (un peu comme un TemplateBinding dans un Control templaté).

Pour court-circuiter le DataContext avec la référence, il suffit juste de rajouter une ligne au Constructeur après le IntializeComponent :

        public AddressControl()
        {
            InitializeComponent();
            this.LayoutRoot.DataContext = this;
        }

Et voila le tour est joué !

On peut désormais binder dans notre XAML toute les propriétés de notre UserControl y compris les propriétés Background, BorderBrush,(…)

Vous trouverez le code du UserControl ici

Dans le prochain épisode, nous incluerons du contenu dans notre UserControl !

6 réponses à Binding et UserControl (Part 1) : DataContext

  1.  
  2.  

    Merci.

    Si tu pouvais changer la font-color et le background pour avoir un contraste pour tes lecteurs ce serait sympa car le texte est illisable et un ctrl+a, ça aide mais ça pique les yeux ^^

  3. Bonjour,

    de quelle partie du texte tu parles ? Code ou texte normal ?

     
  4.  

    Merci pour cette belle astuce fort pratique !

  5. Plaisir d’offrir Mr Marauder :)

     
  6.  

    Pile ce que je cherchais à faire, merci Sam !

leave your comment