Un petit contrôle pour la navigation sous Silverlight 2

Description

Voici un petit exemple de ce qu'il est possible de faire simplement pour pouvoir changer de fenêtre sans problème. Pour ce faire, il faut créer un contrôle qui sera utilisé en conteneur de UserControl. Cet exemple comporte également un petit helper permettant de naviguer simplement.

Implémentation du contrôle + Helper

Controle conteneur

public class NavigationContent : UserControl
{
    public NavigationContent(UserControl initialWindow)
        : this(initialWindow, 800, 600)
    { }

    public NavigationContent(UserControl initialWindow, int width, int height)
    {
        this.Height = height;
        this.Width = width;
        this.NavigateTo(initialWindow);
    }

    public void NavigateTo(UserControl element)
    {
        NavigateTo(element, null);
    }

    public void NavigateTo(UserControl element, object context)
    {
        if (null != context)
            element.DataContext = context;
        this.Content = element;
    }
}

Exception qui sera lancée si on ne retrouve pas de VisualRoot principal dans l'application

public class VisualRootNotFoundException : Exception
{
    public VisualRootNotFoundException(string message)
       : base(message) { }
}

Petit helper de naviguation

public class NavigationHelper
{
    public static void NavigateTo(UserControl element, object context)
    {
        NavigationContent content = (NavigationContent)Application.Current.RootVisual;
        if (null == content)
            throw new VisualRootNotFoundException("The root visual can't be found");

        if (null != context)
            element.DataContext = context;

        content.NavigateTo(element);
    }

    public static void NavigateTo(UserControl element)
    {
        NavigateTo(element, null);
    }
}

Petite démonstration

Voici comment utiliser ce petit contrôle conteneur. La première chose à faire est de placer le conteneur de UserControl dans le VisualRoot principal qui se lance lors du chargement de l'application Silverlight dans la méthode Application_Startup. On utilise la classe. C'est le seul endroit où on utilise la classe du conteneur.

public partial class App : Application
{

    public App()
    {
        this.Startup += this.Application_Startup;
        this.Exit += this.Application_Exit;
        this.UnhandledException += this.Application_UnhandledException;

        InitializeComponent();
    }

    private void Application_Startup(object sender, StartupEventArgs e)
    {
        Page2 page = new Page2();
        page.DataContext = new UserInfo();
        this.RootVisual = new NavigationContent(page, 1900, 1200);
    }

}

Voici un petit exemple de classe qui supporte le databinding. Cette classe sera utilisée dans le contexte des pages. Le but de cette démo et de passer d'un écran à l'autre en passant les données encodées dans une textbox.

public class UserInfo : INotifyPropertyChanged
{
    public string Nom
    {
        get { return nom; }
        set
        {
            if (value != nom)
            {
                nom = value;
                Change("Nom");
            }
        }
    }

    private string nom;

    #region INotifyPropertyChanged Members

    private void Change(string propertyName)
    {
        if(null != PropertyChanged)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    public event PropertyChangedEventHandler PropertyChanged;

    #endregion

}

Partie XAML du UserControl qui sera lancé au debut et qui sert de formulaire pour encoder une valeur dans la propriété Nom.

<UserControl x:Class="SilverlightApplication1.Page2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800" Height="600">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="10*"/>
        </Grid.RowDefinitions>
        <TextBox Grid.Row="0" Name="nom" Text="{Binding Nom, Mode=TwoWay}"/>
        <Button Grid.Row="1" Content="Coucou !" Click="Button_Click"></Button>
    </Grid>
</UserControl>

Partie C# du UserControl. Il est intéressant de regarder la partie liée au Click du bouton. C'est à ce moment la que l'on utilise le Helper qui changera de "View" en passant le DataContext qui contient l'objet avec la propriété Nom mise à jour.

public partial class Page2 : UserControl
{
    public Page2()
    {
        InitializeComponent();
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        NavigationHelper.NavigateTo(new Page3(), this.DataContext);
    }
}

Résultat visuel !

Formulaire:

Résultat:

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

Fil des commentaires de ce billet

Page top