XAML Expert.NET: Prima mea aplicatie WPF

Voi pleca de la o aplicatie simpla pe care o voi dezvolta si optimiza in timp. Aplicatia consta intr-o fereastra care contine un control de tip lista (ListBox), un control de editare (TextBox), unul de afisare (TextBlock) si un buton (Button). Descrierea va fi succinta.

Prin intermediul controlului de editare se va permite introducerea in controlul de tip lista, a unui element (item) prin accesarea butonului.

Ca mediu de dezvoltare voi folosi Visual Studio 2012. Tot ce descriu aici poate fi aplicat si in Visual Studio 2010 sau o versiune mai veche.

Pentru a realiza cele descrise mai sus, startati Visual Studio si selectati din meniul File submeniul New iar mai apoi Project. Se va deschide o fereastra care arata ca-n figura de mai jos. Selectati aplicatia de tip WPF (WPF Application) si completati campurile Name si Solution, restul campurilor lasandu-le la valorile implicite.

Validati datele introduse prin apasarea butonului OK, lucru care duce la inchiderea ferestrei si deschiderea noului proiect. Noul proiect e organizat intr-o asa numita solutie (Solution). O solutie poate contine unul sau mai multe proiecte. O aplicatie consta in unul sau mai multe proiecte, organizate in una sau mai multe solutii. Voi pleca de la un singur proiect organizat intr-o singura solutie.

Solutia nou creata arata ca-n figura de mai jos (panoul din partea dreapta a mediului de dezvoltare).

Nu voi descrie intreaga structura a unui proiect, nefiind asta scopul articolelor mele, ci doar elementele sau fisierele care vor fi direct modificate in cursul descrierii. Proiectul nou creat va afisa fereastra principala a aplicatiei, deschisa in modul Design, care permite modificarea ferestrei prin schimbarea proprietatilor ferestrei sau prin inserarea de noi elemente in fereastra. Acestea sunt realizate fie prin editarea directa a fisierului MainWindow.xaml, fie prin editarea proprietatilor ferestrei (panoul Properties situat in partea dreapta-jos) sau inserarea de elemente noi in fereastra prin intermediul panoului de instrumente (Toolbox) prin operatii de drag & drop.

Observam ca fisierul MainWindow.xaml are asociat un fisier MainWindow.xaml.cs. Acesta este codul sursa C# asocial fisierului XAML. Simplist spus, fisierul XAML contine descrierea ferestrei intr-un format XML specific, numit XAML (pronuntie: zamal). Fisierul XAML are asociat un fisier cs (C#) in care se poate adauga cod C# pentru manipularea si tratarea evenimentelor din fereastra aplicatiei (aici fiind incluse si controalele din fereastra). Prin manipularea ferestrei intelegem schimbarea unor proprietati ale ferestrei sau controalelor asociate ferestrei. Prin evenimente din fereastra intelegem un click de mouse in fereastra, o apasare de buton, o selectie in controlul de tip lista, etc.

Acum sa trecem la treaba. Voi edita direct fisierul XAML, a.i. in final va arata ca mai jos.

Observam o adevarata ierarhie de elemente in care radacina o constituie elementul Window care este responsabil cu crearea ferestrei aplicatiei. Atributul Title specifica titlul ferestrei iar SizeToContent specifica modul in care se va deminesiona fereastra principala (in cazul de fata, se va redimensiona dupa elementele continute).

Elementul StackPanel, subelement al elementului Window, este un container pentru alte elemente grafice. In cazul de fata, StackPanel contine trei elemente: TextBlock, ListBox si un alt StackPanel. Cele trei elemente sunt aliniate unul sub altul, modul implicit de aliniere a elementelor continute de elementul StackPanel.

Cel de-al doilea StackPanel contine un element TextBox si un element Button. Atributul StackPanel Orientation setat cu valoarea Horizontal specifica faptul ca cele doua elemente continute sunt aliniate unul langa celalalt.

Elementul Button mai are un atribut Click, care contine numele unei rutine care trateaza evenimentele de apasare de buton. Rutina respectiva este definita in fisierul MainWindow.xaml.cs si contine codul C# care trateaza mesajul de click pe buton. Mai jos putem vedea continutul fisierului MainWindow.xaml.cs.

using System.Windows;

namespace SampleWpf
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}

private void BtnInserareOnClick(object sender, RoutedEventArgs e)
{
var mesaj = TxtMesaj.Text;
LstMesaje.Items.Add(mesaj);
TbMesaj.Text = string.Format("Mesaj adaugat: {0}", mesaj);
TxtMesaj.Text = string.Empty;
}
}
}

Rutina BtnInserareOnClick contine cod relativ simplu: preia textul din casuta de editare (var mesaj = TxtMesaj.Text), il insereaza in controlul de tip lista (LstMesaje.Items.Add(mesaj)) si il afiseaza in elementul de afisare (TbMesaj.Text = string.Format("Mesaj adaugat: {0}", mesaj)) dupa care sterge continutul casutei de editare (TxtMesaj.Text = string.Empty).

Compiland solutia (apasati tasta F6 sau selectati din meniu Build, Build Solution) si executand-o (apasati F5 sau selectati din meniu Debug, Start Debugging), observam ca tocmai am dezvoltat o aplicatie WPF rudimentara.

Urmatorul pas este sa aducem interfata grafica la o forma mai prietenoasa. Pentru a realiza acest lucru, vom folosi doua atribute, Background si Margin. Codul modificat va arata ca mai jos (modificarile apar ingrosat).

Atributul Background aplicat elementului Window va seta culoarea de fundal a ferestrei la o nuanta de albastru iar atributul Margin aplicat celorlalte elemente de control va afisa o margine in jurul elementelor de control.

In acelasi mod pot fi aplicate si alte atribute asupra elementelor ferestrei (ex: schimbarea fontului si a marimii fontului, coloarea textului, etc.).

Observam totusi ca interfata grafica (UI) e strans legata de logica aplicatiei (business logic) prin acea referinta din codul XAML la rutina care implementeaza logica butonului, acea rutina fiind implementata in code behind (codul C# implementat in fisierul MainWindow.xaml.cs asociat fisierului XAML MainWindow.xaml). Cum putem realiza o separare totala a interfetei grafice de logica aplicatiei vom vedea in articolul urmator, care poate fi gasit aici.

Cod sursa

Prima mea aplicatie WPF

Niciun comentariu:

Trimiteți un comentariu