Uvod u WPF – Windows Presentation Foundation

Još od pojave Windows 1.0 koji je na tržište izašao 1985 godine; primarna tehnologija iza mnogih Windows baziranih korisnički interfejsa je bila isključivo bazirana na GDI – Graphic Device Interface. To znači da je celi Windows  operativni sistem generisao grafički prikaz, čak i za štampače i druge uređaje; kroz samo tri osnovna objekta za crtanje. Pen – olovka, Brush – četka i Font. Pojavom Windows 95 i pored toga što taj Windows nije imao direktan pristup memoriji, već se sve programiralo na MS-DOS-u; razvojem računarskih igrica i sve složenijeg hardvera je nastao Microsoft DirectX koji je uspostavljao direktnu komunikaciju između interfejsa i hardvera. Pojavom Windows XP-a; 24 avgusta 2001 godine nastaje poboljšana verzija GDI-a; GDI+; koja je donela značajna poboljšanja kao npr. rastersku grafiku. Ali bez obzira na sva poboljšanja, vi kao programer ste mogli samo da promenite inicijalni prikaz bilo koje standardne kontrole preko predefinisanja Windows događaja koji je prikazivao korisnički interfejs kontrola.

( Microsoft revolucija Framework verzije 3.0 )

Tačno 21 novembra 2006 godine Microsoft korporacija objavljuje .Net Framework verziju 3.0 kodnog imena WinFX kao ugrađenu komponentu Windows Vista-e koji je poput najveće revolucije promenio GDI paradigmu i uveo novitete koje su ostavile programere bez teksta. Iako ta revolucija nije donela ogroman uspeh Windows Vista-i na tržištu; celi svet svakog .Net programera se okrenuo naglavačke dok se uspostavljao novi način razmišljanja. Sa .Net Framework-om verzije 3.0 su došle sledeće tehnologije: 

• WPF – Windows Presentation Foundation – grafički podsistem namenjen izgradnji aplikacija sa vizualno korisničkim interfejsom baziranom na XAML-u.

• WFC - Windows Communication Foundation – servisno orjentisan sistem razmene poruka koji omogućava programerima komunikaciju sličnu veb serverima. 

• WF – Windows Workflow Foundation – tehnologija za definisanje, izvršavanje i upravljanje tokovima omogućavajući programerima razdvajanje logike od pozadinskog izvršavanja komponenti i boljem upravljanju aplikacijom.

• Windows CardSpace – softverska komponenta koja bezbedno skladišti digitalni identitet osobe i obezbeđuje jedinstven interfejs za konkretnu transakciju poput logovanja na veb sajt.

Umesto da kreirate korisnički interfejs korišćenjem instrukcija napisanim u programskom jeziku, WPF koristi XAML – Extensible Application Markup Language koristeći izuzetne mogućnosti hardverske akceleracije GPU – grafičkih procesnih jedinica ugrađenih u računare. WPF koristi Direct3D za iscrtavanje što znači da koristi GPU – procesor grafičke kartice. Tako vektorska grafika kod većih rezolucija postaje jasnija i bolja dok korisnički interfejs kod malih uređaja poput mobilnih telefona izgleda isto. Hardversko ubrzanje kod WPF ne zahteva postojanje vrhunskog podsistema jer poseduje softverski rendering. Sa programerske tačke gledišta XAML je derivat XML – Extensible Markup Language stime da donosi modifikovan XML. Na taj način XAML elemente korisničkog interfejsa prikazuje kao XML tagove i omogućava paralelni rad grafičkih dizajnera i programera pri kreiranju korisničkog interfejsa. XAML code se čak portuje na sve platforme bez promene. Tako WPF aplikacije mogu biti isporučene kao samostalne aplikacije ili veb aplikacije. Imajte u vidu da se WPF veb aplikacijama se pristupa kroz pregledač. Jedna od najznačajnijih promena koje je doneo WPF je set tehnologija za obradu i štampu dokumenata jer koristi OpenPackaging Convention koji nudi prilagodljive meta podatke, kompresiju dokumenata, digitalne potpise i upravljanje pravima pristupa. 

Arhitektura WPF-a

Arhitektura WPF-a se prostire kroz komponente koje pripadaju i upravljivom i neupravljivom code-u iako je većina WPF dostupan samo preko upravljačkog code-a. Međutim, komponenta koja obezbeđuje funkcionisanje WPF aplikacija se naziva MIL – Media Integration Layer, pripada neupravljivom kodu i on je jedini deo WPF-a koji je neupravljiv. MIL se nalazi u milcore.dll datoteci i zadužen je za sva iscrtavanja  koja izvršava preko Microsoft DirectX-a, za osnovnu podršku 2D i 3D površina, animacione konstrukcije višeg nivoa, usklađivanja pojedinačnih elemenata WPF aplikacije u finalnu 3D scenu. U neupravljivom code-u su takođe smešteni medija kodeci koji se nalaze u windowscodecs.dll. Omotač za MIL obezbeđuje Presentation Core koji implementira sve servise za WPF. Nalazi se u upravljačkom code-u i smešten je u presentationcore.dll-u. Tu je i Presentation Framework koji implementira prezentacione alate za krajnjeg korisnika poput animacija, data binding-a ili layout-a. Smešten je u presentationframework.dll datoteci.       

( Arhitektura WPF - Windows Presentation Foundation-a )

Površina WPF-a sa kojom komuniciraju programeri se zove sistem elemenata. Sistem elemenata se sastoji od osnovnih komponenata korisničkog interfejsa kao što su stilovi, izgled, kontrole, tekst i povezanost podataka. Stablo elemenata se deli na logičko stablo i vizualno stablo. Logičko stablo je hijerarhijska struktura elemenata koji su definisani i u XAML datoteci deklerativno i u code-u imperativno. Za svaki element u logičkom stablu kreiraju se dodatni elementi koji predstavljaju njegove vizualne aspekte. Vizualno stablo je kombinacija elemenata aplikacije i elemenata kreiranih za vizualni prikaz.

• Visual system - Vizualni sistem je podsistem koji prolazi kroz sve komponente poput labela, dugmadi, teksta i na osnovu njih renderuje grafički prikaz na ekranu. 

• Input/Event system - Sistem za obradu događaja je znatno unapređen. WPF podržava rutirane događaje koji pružaju mogućnost elementima vizualnog stabla da osluškuju i reaguju na događaje kako roditelja tako i ugnježdenih kontrola.

• Property system – Sistem svojstava je značajno nadograđen novim tipovima svojstva; depedency property – svojstva zavisnosti; koji pružaju notifikacije o promeni. Sistem svojstva je takođe nadograđen nasleđivanjem vrednosti svojstva.

• Font system – Sistem fonta je potpuno iznova napisan za potrebe WPF-a, obezbeđuje jedinstveni mehanizam za kreiranje i keširanje informacija o fontovima kao i ubrzani proces prikazivanja fontova.   

• Composition system – Sistem kompozicije je podsistem zasnovan na nebezbednom code-u koji prihvata instrukcije vizualnog sistema zasnovanom na bezbednom i kontrolisanom code-u koji pretvara instrukcije u grafiku koju vidite na ekranu.

• Message transport – Sistem prenosa poruka je ključna komponenta WPF arhitekture zadužena ta povezivanje vizualnog sistema i sistema kompozicije.

  

Šta je XAML ?

XAML – Extensible Application Markup Language  je u potpunosti deklerativan jezik zasnovan na XML-u koji se koristi za inicijalizaciju strukturnih vrednosti i objekata. Njegova primarna uloga je konstrukcija WPF korisničkog interfejsa. XAML dokumenti definišu raspored panela, dugmadi i drugih kontrola koje čine UI aplikacije. Deklerativan znači da dizajner ili programer opisuje ponašanje i integraciju bez proceduralnog programiranja. To znači da možete napravite celu aplikaciju bez programiranja i programerskog iskustva. Kod WPF aplikacija i dizajneri i programeri koriste isti jezik i omogućen je paralelni razvoj dizajna aplikacije od strane dizajnera i njenih funkcionalnosti od strane programera. Na taj način su izbegnuti poslovni konflikti između dizajnera i programera dok isti dokument dizajner može da otvori u dizajnerskom alatu dok programer u programerskom alatu i da istovremeno vrše promene. XAML za razvoj korisničkog interfejsa razdvaja model od pogleda što je odličan arhitektonski princip. Isto tako XAML se retko piše ručno jer postoji niz alata poput Microsoft Blend-a koji to rade umesto vas.

( Microsoft Blend - softver za dizajniranje UI-a baziranog na XAML-u )

Korišćenjem XMAL-a postižu se dve važne stvari. Smanjuje se kompleksnost projekta i povećava lakši razvoj aplikacija. Sve što se kreira ili implementira može biti izraženo bilo kojim .Net programerskim jezikom. Još jedna odlična osobina XAML-a je što on nije zavisan niti od WPF-a  niti od .Net-a . Mnoge aplikacije podržavaju eksportovanje sadržaja u XAML format.  XAML aplikacije mogu biti standardne Windows aplikacije ili aplikacije koje se izvršavaju u WPF  navigacionom prozoru. Svaki WPF projekat za razliku od Windows formi sadrži dve datoteke app.xaml i window.xaml koji su najbitni delovi svake WPF aplikacije. Unutar aplikacijske klase se nalazi Main() metoda koja predstavlja ulaznu tačku aplikacije. Thread-ovi unutar WPF aplikacije se izvršavaju u STA – Single Threaded Apartment, što znači da Main() metod mora biti obeležen STAThread atributom. Aplikaciona klasa definiše i Run() metod koji WPF  aplikaciju drži pokrenutom i obrađuje poruke koje operativni sistem šalje MainWindow klasi sve dok ne zatvorite aplikaciju. Kod WPF aplikacija koje se izvršavaju unutar pregledača nazivamo XBAP – XAML Browser Application

Šta je Microsoft Silverlight ?

Microsoft Silverlight je slična tehnologija WPF-u; alternativa Flash-u, popularnom dodatku za pregledače koji omogućava bogatije multimedijalne sadržaje. Iako služi za prikaz video sadržaja, kasnije verzije ove platforme su donele podršku za .Net i interaktivne funkcionalnosti. Prva verzija ovog moćnog alata je nastala 2007 godine. Microsoft Silverlight aplikacija je mala i potrebno je malo vremena da se instalira na računaru koji ga nema. Prednost mu je što ne traži instaliran Windows Media Player niti jednu .Net komponentu. Prilično je jednostavan za korišćenje ukoliko imate znanje C#, HTML-a i XML-a i sa njim možete napraviti ozbiljne aplikacije. Microsoft Silverlight jednostavno podržava .Net  klijentski code u okviru pregledača koristeći mnogo više procesiranja na klijentskoj strani nego na serverskoj poput JavaScript-a. Kompatabilan je sa pregledačima koji rade i na iOS i na Windows platformi. Međutim, već duži niz zadnjih godina on stoji u mestu, kao da se više ne razvija i nema Microsoft  podršku pa ga zato ne preporučujem da sa navedenom tehnologijom pravite ozbiljne aplikacije.  

Vaša prva WPF aplikacija

Sad kad ste upoznati teoretski šta WPF predstavlja, spremni ste da kreirate vašu prvu WPF aplikaciju. Za početak kreiraćemo jednostavnu Hello World aplikaciju da bi ste se praktično pokrenuli i videli da WPF aplikacije nisu preteške spram Windows formi. Postoje mnogi programeri koji i pored toga što su svesni prednosti WPF aplikacija i posle više godina se nisu pomerili od Windows Forms aplikacija. Neki početnici jednostavno izbegavaju da se upuštaju u XAML i nadam se da će ovom prilikom napraviti iskorak napred koji su odavno trebali napraviti jer kad se jednom naviknete na WPF, neće vam ni padati napamet da se vraćate na Windows forme zbog svih WPF mogućnosti ali i zbog nekih stvari koje je lakše kreirati. Za početak jednostavno pogledajte XAML navedeni code.

<Window x:Class="HelloWorld.MainWindow"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:HelloWorld"

        mc:Ignorable="d"

        Title="My First WPF Application" Height="350" Width="525">

    <Grid>

        <TextBox x:Name="textBox" HorizontalAlignment="Left" Height="60" Margin="135,50,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="175" FontSize="24" FontWeight="Bold"/>

        <Button x:Name="button" Content="Say Hello !!!" HorizontalAlignment="Left" Margin="175,165,0,0" VerticalAlignment="Top" Width="185" Height="65" FontSize="20" FontWeight="Bold" BorderBrush="#FFE7DC43" Foreground="#FFD3E764" Click="button_Click">

            <Button.Background>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="0"/>

                    <GradientStop Color="#FF3C3FF3" Offset="1"/>

                </LinearGradientBrush>

            </Button.Background>

        </Button>

    </Grid>

</Window>

Vi skoro ništa od ovog XAML code-a ne morate pisati, IDE okruženje će to obavljati za vas dok vi postavljate kontrole iz ToolBox-a na Windows ili menjate svojstva u Properties kao što ste to radili u Windows Forms aplikacijama. Neka svojstva ali i programerske navike će te radije menjati u XAML code-u ručno nego vizualno jer je brže i lakše, dok vam rad sa bojama, četkicama i animacijama je definitivno lakše obavljati vizualno kroz menjanje svojstava u Properties komponenti. Duplim klikom na dugme, kreiraćete događaj za to dugme; možete ga i ručno dopisati u XAML code-u i onda možete u njega upisati šta se dešava pritiskom dugmeta u C# programskom jeziku.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Navigation;

using System.Windows.Shapes;

namespace HelloWorld

{

    /// <summary>

    /// Interaction logic for MainWindow.xaml

    /// </summary>

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent();

        }

        private void button_Click(object sender, RoutedEventArgs e)

        {

            textBox.Text = "Hello World !!!";

        }

    }

}

  

U ovom kodu vidite da će se klikom na dugme ispisati tekst Hello World !!! u kontroli TextBox jer je to sve što ovaj mali program radi. Kada pravite WPF aplikacije vi ćete često raditi i sa XAML i sa C# programerskim code-om. Kako se pravi i kako izgleda naša prva WPF aplikacija, najbolje je da pogledate u video-u:

( WPF - Windows Presentation Foundation - 1#. Hello World )