Začíname s WPF - zoznámte sa!

Marek Mikulec  /  19. 03. 2008, 00:00

Vždy ste si chceli napísať svoju vlastnú Windows aplikáciu, ale nemali ste dostatočné znalosti a vybavenie? To už je minulosťou. Vďaka nášmu novému seriálu konečne preniknete do tajov programovania vlastných aplikácii!

Čo je WPF?

Za skratkou WPF(Windows Presentation Foundation) sa skrýva nový grafický framework spoločnosti Microsoft pre písanie Windows aplikácií. Pomocou WPF máte možnosti písať aplikácie ktoré by ste inak zvládali len s veľkou námahou(teda ak vôbec). Na mysli mám samozrejme grafickú stránku aplikácií. Na písanie WPF aplikácií sa používa XAML(eXtensible Application Markup Language) spolu s nejakým .NET jazykom(C#, Visual Basic.NET). WPF bolo predtým označované aj ako Avalon. Tieto aplikácie sa renderujú na grafickej karte a preto sa nemusíte báť príliš veľkého zaťaženia CPU pri vytváraní graficky bohatých aplikáciách.



XAML - eXtensible Application Markup Language

XAML je značkovací jazyk, podobne ako napr. HTML pre písanie užívateľského rozhrania. Tento jazyk vychádza z populárneho jazyka XML. Umožňuje vytvárať formuláre aplikácií s príslušnými ovládacími prvkami. Súbory sú s koncovkou .xaml
 

A tu je kód aplikácie XAML vygenerovaný Visual Studiom:
<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowsApplication1" Height="300" Width="300"
>
 <Grid>

 </Grid>
</Window>


Čo na písanie WPF aplikácií?
V prvom rade musíte chcieť. A ak je chuť tak sa to dá celkom ľahko zvládnuť ;) Inak vám bude stačiť: 

  • Visual Studio 2005(prípadne 2008)
  • Windows SDK
  • .NET framework 3.0
  • Visual Studio Code Name “Orcas” Development Tools

Ak vlastníte Windows Vista tak vám bude stačiť:

  • Visual Studio 2005
  • Visual Studio Code Name “Orcas” Development Tools

Všetko to môžete nájsť a stiahnuť na stránkach Microsoftu.

Prečo ten rozdiel? Pretože vo Viste je .NET 3.0 už vopred predinštalované a preto vám tu pôjdu všetky WPF aplikácie bez nutnosti niečo inštalovať. Na ostatné OS Windows bude musieť pred spustením aplikácie ešte doinštalovať .NET 3.0. Na iných OS vaše aplikácie zrejme nespustíte.


Visual Studio a tvorba WPF aplikácií
Po nainštalovaní všetkých potrebných súčastí môžete konečne začať písať WPF aplikácie vytvorením projektu:





Ako si môžete na obrázku všimnúť nový projekt sa skladá zo súborov App.xaml, App.xaml.cs(po rozbalení App.xaml) Window1.xaml a Window1.xaml.cs(po rozbalení Window1.xaml). Súbor App.xaml pre nás v tejto chvíli nie je dôležitý. V súbore Window1.xaml sa nachádza XAML kód s ktorým budeme pracovať najčastejšie(kód je napísaný vyššie). V súbore Window1.xaml.cs je zdrojový kód C# ktorý vyzerá takto:

using System;
using System.Collections.Generic;
using System.Text;
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.Shapes;
 
namespace WindowsApplication1
{
  /// <summary>
 /// Interaction logic for Window1.xaml
 /// </summary>
 
 public partial class Window1 : System.Windows.Window
 {
 
  public Window1()
  {
   InitializeComponent();
  }
 }
}
V tomto súbore bude napísaná aplikačná logika celého okna(spracovanie udalostí a pod.). V súbore Window1.xaml budeme náš kód písať medzi bloky <Grid></Grid>. Ide vlastne o kontorlu, ktorá môže obsahovať nekonečné množstvo ďalších kontrol a prvkov. Tieto kontroly sa volajú LayoutControls. Jednotlivé LayoutControls sa líšia umiestnením kontrol a prvkov, ktoré sa v nich nachádzajú.


Grid
Ide o najpoužívanejšiu kontrolu. V podstate ide o tabulku, v ktorej sa nachádzajú ostatné objekty. Príklad použitia:
<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowsApplication1" Height="300" Width="300"
>
 <Grid ShowGridLines="True">
  <Grid.RowDefinitions>
   <RowDefinition />
   <RowDefinition />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
   <ColumnDefinition />
   <ColumnDefinition />
  </Grid.ColumnDefinitions>
  <Button Grid.Column="0" Grid.Row="0">1</Button>
  <Button Grid.Column="0" Grid.Row="1">2</Button>
  <Button Grid.Column="1" Grid.Row="0">3</Button>
  <Button Grid.Column="1" Grid.Row="1">4</Button>
 </Grid>
</Window>



StackPanel
V tejto kontrole sú prvky umietnené vedľa seba zvislo alebo vodorovne. Príklad použitia:
<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowsApplication1" Height="300" Width="300"
>
 <StackPanel>
  <Button>Button1</Button>
  <Button>Button2</Button>
  <Button>Button3</Button>
 </StackPanel>
</Window>


Pre horizontálne umiestnenie prvkov stačí nahradiť <StackPanel> s <StackPanel Orientation="Horizontal">
 

WrapPanel
Prvky zobrazuje vedla seba v riadku a keď príde na koniec dôjde k zalomeniu riadku. Príklad použitia:

<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowsApplication1" Height="300" Width="300"
>
 <WrapPanel MinHeight="50" MinWidth="50"
   VerticalAlignment="Top"
   HorizontalAlignment="Left"
   Margin="12,16,0,0"
   Width="227"
   Height="69">
  <Button>1</Button>
  <Button>2</Button>
  <Button>3</Button>
  <Button>4</Button>
  <Button>5</Button>
  <Button>6</Button>
  <Button>7</Button>
 </WrapPanel>
</Window>


Pri WrapPanely je možné podobne ako pri StackPanely zmeniť orientáciu na vertikálnu Orientation="Vertical".


DockPanel
Slúži k uchyteniu prvkov k jednej zo štyroch strán, pričom posledný prvok bude zaberať volné miesto. Príklad použitia:
<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowsApplication1" Height="300" Width="300"
>
 <DockPanel>
  <Button DockPanel.Dock="Top">button1</Button>
  <Button DockPanel.Dock="Left">button2</Button>
  <Button DockPanel.Dock="Right">button3</Button>
  <Button DockPanel.Dock="Bottom">button4</Button>
  <Button>button5</Button>
 </DockPanel>
</Window>





Canvas

V tejto kontrole musíte presne zadávať na akej pozícii sa majú prvky nachádzať. Príklad použitia:

<Window x:Class='WindowsApplication1.Window1'
xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
Title='WindowsApplication1' Height="300" Width="300"
>
 <Canvas>
  <Button Canvas.Left='135.41' Canvas.Top='71'>Button</Button>
  <Button Canvas.Left='156.41' Canvas.Top='95'>Button</Button>
 </Canvas>
</Window>





Záverom

Týmto ukončujem svoj prvý článok o WPF. Nabudúce napíšem niečo viac o rôznych prvkoch vo WPF a samozrejme aj ukážky použitia. Viac o programovaní WPF aplikácií a použitia XAML sa môžete dočítať na Microsoft.com, alebo zakúpením si nejakej dobrej knihy. Väčšina kníh na túto tému je však dostupných zatiaľ len v Anglickom jazyku. Mnohé tutoriály a návody môžete tiež nájsť aj napríklad na Codeproject.com.

Neprehliadnite: