Afisarea datelor la design time

De specificat ca abordarea prezentata mai jos functioneaza doar de la versiuni de Visual Studio 2010 in sus si Expression Blend.

Intr-o aplicatie WPF mai complexa, este dificil sa cosmetizam aplicatia fie prin stilizare (styleing) sau alta tehnica deoarece dupa fiecare modificare va trebui sa rulam aplicatia ca sa putem vedea daca datele sunt afisate in mod corespunzator sau mai trebuie sa facem ajustari. Daca data binding-ul obiectelor nu este realizat corect, la design time nu avem nicio informatie sau aspect vizual care sa ne indice acest lucru.

In Visual Studio si Expression Blend avem un mecanism care ne permite vizualizarea datelor la design time. Mecanismul consta-n folosirea markup extensiei DesignData in conjunctie cu un fisier XAML in care vor fi definite datele care se doresc vizualizate la design-time.

Sa vedem cum putem realiza acest lucru. Voi porni de la exemplul prezentat in articolul anterior. In prima faza, voi adauga proiectului un fisier XAML, DesignData.xaml, care va contine datele pe care le voi afisa la design time. Prezentarea fisierului o aveti mai jos.

<?xml version="1.0" encoding="utf-8" ?>
<local:MainWindowViewModel xmlns:local="clr-namespace:SampleWpf"
           xmlns:system="clr-namespace:System;assembly=mscorlib"
           Mesaj="Mesaj de test" UltimulMesaj="Ultimul mesaj" >
    <local:MainWindowViewModel.Mesaje>
        <system:String>Mesaj de test 1</system:String>
        <system:String>Mesaj de test 2</system:String>
        <system:String>Mesaj de test 3</system:String>
        <system:String>Mesaj de test 4</system:String>
    </local:MainWindowViewModel.Mesaje>
</local:MainWindowViewModel>

Dupa cum putem vedea, fisierul XAML contine referinte la clasa MainWindowViewModel si seteaza proprietatile acestei clase cu valori prestabilite. Deci, in acest fisier XAML avem imaginea unui obiect MainWindowViewModel. Urmeaza sa setam contextul de date al ferestrei cu datele definite in fisierul XAML, astfel incat sa aiba efect doar la design time, ca sa le putem vizualiza in design mode.

In Solution Explorer, selectam fisierul DesignData.xaml si-i setam proprietatea Build Action cu valoarea DesignData (vedeti figura de mai jos).

Astfel, am facut cunoscut designerului Visual Studio sau Expression Blend, ca sunt disponibile date pentru design time in fisierul DesignData.xaml.

In urmatorul pas, deschidem fisierul MainWindow.xaml si adaugam urmatoarele referinte la mai multe namespace-uri, precum urmeaza:

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"

Aceste referinte sunt create automat in Expression Blend.
Acum putem seta contextul de date DataContext al elementului Window cu datele din fisierul DesignData.xaml, astfel incat sa aiba efect doar la design time, adaugand elementului Window atributul d:DataContext astfel:

d:DataContext="{d:DesignData Source=DesignData.xaml}"

De mentionat ca nu este obligatoriu sa fie setat contextul de date al elementului Window ci al oricarui element din ierarhie, astfel, daca dorim sa afisam date la design time doar pentru controlul lista, atunci putem seta contextul de date doar al elementului ListBox.

In urma acestor modificari, ar trebui ca datele din fisierul XAML sa fie afisate la design time. Ca modificarile sa aiba efect, s-ar putea sa trebuiasca sa compilati intregul proiect sau chiar sa inchideti si deschideti din nou fisierul MainWindow.xaml.

Elementul Window din XAML s-a modificat astfel:

<Window x:Class="SampleWpf.MainWindow"
               ...
               xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
               xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
               mc:Ignorable="d"
               d:DataContext="{d:DesignData Source=DesignData.xaml}" ... >

Fereastra aplicatiei ar trebui sa arate la design time ca mai jos.