Tematy zaj

(1)

Tematy zajęć:

1. Wprowadzenie do WPF i XAML. Tworzenie interfejsu użytkownika.

2. Posługiwanie się podstawowymi kontrolkami.

3. Własności i zdarzenia w WPF.

4. Zadania aplikacji. Okna.

5. Polecenia. Zasoby.

6. Wiązanie danych.

7. Konwersja, walidacja, szablony, widoki.

8. Style, drzewa, menu.

9. Dokumenty i drukowanie.

10. Kształty, transformacje, pędzle, geometria, rysowanie.

11. Animacje.

12. Szablony kontrolek. Kontrolki użytkownika.

13. Grafika 3d.

14. Interfejs oparty na stronach.

(2)

Literatura i oprogramowanie:

1. Matthew MacDonald, Pro WPF in C# 2010: Windows Presentation Foundation in .NET 4

2. Adam Nathan, WPF 4 Unleashed

3. Andrew Troelsen, Język C# I platform .NET 4. Stephen C. Perry, C# I .NET

5. Jesse Liberty, C#. Programowanie

6. Charles Petzold, Applications = Code + Markup, a guide to the Microsoft Windows Presentation Foundation

7. Matthew A. Stoecker, Microsoft .NET Framework 3.5 – Windows Presentation Foundation

8. http://msdn.com (wszystko na temat programowania w C# i nie tylko)

9. http://codeguru.pl, http://codeproject.com (artykuły na temat programowania w C#

i nie tylko)

10. Visual Studio 2008 lub 2010 w dowolnej wersji (wraz z dostępnym z niego systemem pomocy MSDN)

(3)

Co to jest programowanie zdarzeniowe? Jak powinna wyglądać aplikacja okienkowa?

Krok pierwszy – tworzenie interfejsu użytkownika (wizualne lub w kodzie).

(4)

Krok drugi – obsługa zdarzeń.

(chcemy, aby akcja użytkownika spowodowała wykonanie naszego kodu)

void Oblicz(...) {

...

}

(5)

Krok trzeci – interakcja z kontrolkami.

(chcemy odczytać wprowadzone przez użytkownika dane, wykonać obliczenia i wyświetlić wynik)

void Oblicz(...) {

...

}

(6)

WPF - Windows Presentation Foundation API wyższego poziomu

Nowy system graficzny i API (interfejs programowania aplikacji) Windowsów. Najbardziej radykalna zmiana interfejsu od czasów Win95. Wcześniej API opierało się na User32 (wygląd i zachowanie okien i kontrolek) oraz GDI/GDI+ (odpowiadało za rysowanie).

Różnorodne frameworki (np. Window Forms, MFC) zapewniały dodatkową abstrakcję, pomagając redukować złożoność, dodając nowe możliwości; ale pod tym zawsze kryło się User32 i GDI/GDI+ ze swymi ograniczeniami.

(7)

WPF

 Wykorzystuje DirectX do rysowania okien i zawartości.

 Niezależność od rozdzielczości (oparcie się na „jednostkach

logicznych”=1/96 cala) – umożliwia łatwe skalowanie i dopasowanie do rozdzielczości ekranu.

 Ułożenie kontrolek: dynamiczne, oparte na zawartości (dopasowują się do swojej zawartości oraz dostępnego miejsca).

 Obiektowy model rysowania oparty na grafice wektorowej.

 Wsparcie dla mediów i grafiki 3D.

 Deklaratywne tworzenie animacji.

 Style i szablony – pozwalają dopasowywać formatowanie i sposób renderowania elementów interfejsu.

 Deklaratywne^*) tworzenie interfejsu użytkownika (XAML) – pozwala oddzielić wygląd interfejsu od kodu.

*) Deklaratywne – czyli nie opisujemy kroków prowadzących do rozwiązania (algorytmu), a jedynie samo rozwiązanie. Nie mówmy jak ma być coś zrobione, ale co ma być zrobione.

(8)

XAML – Extensible Application Markup Language

 oparty na XMLu^*) (deklaratywny) język do tworzenia interfejsu

 definiuje ułożenie (oraz inne cechy) kontrolek w oknie

 pozwala na podział pracy pomiędzy programistów i grafików (twórców interfejsu)

 XAML nie jest obowiązkowy – to samo można zrobić w kodzie, ale wymaga to większego nakładu pracy

 można korzystać z narzędzi wizualnych do generowania plików XAML (np.

Microsoft Expression Blend)

 warto znać XAMLa aby móc w pełni wykorzystywać możliwości WPFa

cel – oddzielenie tworzenia interfejsu od programowania (mechanizmów)

np. w Windows Forms narzędzia wizualne tworzą kod c# – nie ma łatwej współpracy (a logika i tak zawsze po stronie programisty (animacje, etc.))

*) XML – uniwersalny język znaczników do strukturalnego reprezentowania danych

(9)

XML – wprowadzenie prawidłowy plik XML

<lista>

<osoba>

Kowalski </osoba>

</osoba>

</lista>

znacznik zamykający

atrybuty

znacznik pusty znacznik otwierający

(10)

XML – wprowadzenie nieprawidłowy plik XML

<lista>

<osoba>Nowak</Osoba>

<osoba>

<adres>

</osoba>

</adres>

</lista>

<osoba>

Kowalski

</osoba>

(11)

XAML

 każdy znacznik odpowiada określonemu elementowi interfejsu (i konkretnej klasie .NET – powoduje utworzenie obiektu danej klasy)

 możliwe jest zagnieżdżanie – używane do określenia zawierania np. jednych elementów w innych

 ustawianie właściwości przez atrybuty

<Window ...

Title="Okienko" Height="200" Width="300" FontSize="14">

<Grid>

Nie dotykać </Button>

</Grid>

</Window>

(12)

Element <Window> – okno aplikacji

<Window x:Class="WindowsApplication1.Window1"

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

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

Title="Okienko" Height="200" Width="300" FontSize="14">

<Grid>

</Grid>

</Window>

Przykładowe atrybuty okna:

 Title – tekst na pasku tytułowym

 Height – wysokość (rozmiar w jednostkach logicznych)

 Width – szerokość

 FontSize – rozmiar czcionki używanej przez wszystkie kontrolki w oknie Każdy atrybut odpowiada konkretnej własności klasy Window

uwaga: tylko jeden element korzenia (nadrzędny)

(13)

<Window x:Class="WindowsApplication1.Window1"

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

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

</Window>

Przestrzenie nazw – określają, skąd pochodzą klasy (znaczniki), którymi się posługujemy.

(uwaga: te deklaracje można umieścić gdziekolwiek (jako atrybuty), ale dobra praktyka każe umieszczać je w korzeniu)

xmlns="…" – zawiera wszystkie klasy WPFa, kontrolki, wszystko do tworzenia elementów interfejsu deklarowana bez prefiksów, jest domyślna dla dokumentu

xmlns:x="…" – XAMLowa przestrzeń nazw zawiera różne przydatne narzędzia i elementy XAMLa; zmapowana tu do prefiksu „x” - czyli wymaga podania <x:nazwaElementu>

gdy chcemy coś z niej wziąć

te przestrzenie nazw nie odpowiadają dokładnie przestrzeniom z .Net, gdyż dla ułatwienia i uproszczenia zawarto większość w zbiorczej - a definiowane są przez URI aby różni

dostawcy nie wchodzili sobie w drogę

(14)

<Window x:Class="WpfApplication1.Window1"

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

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

</Window>

atrybut x:Class w oknie pozwala połączyć klasę z tworzonym interfejsem

(prefiks x oznacza, że ten atrybut to element przestrzeni nazw XAMLa a nie WPF) // zawartość pliku Window1.xaml.cs:

namespace WpfApplication1 {

public partial class Window1 : Window {

public Window1() {

InitializeComponent();

} } }

(15)

nazywanie elementów

ważne, aby posłużyć się obiektem, np.

...

</Button>

odpowiada to:

Button button1;

i pozwala na:

button1.Content = „Dzień dobry”;

uwaga: element nie musi mieć nazwy poste właściwości (i konwersja typów)

<TextBox Name="pole" VerticalAlignment="Stretch"

HorizontalAlignment="Stretch" FontFamily="Verdana"

FontSize="24" Foreground="Green" ... >

atrybuty ustawiają właściwości obiektu

(16)

Układy zawartości

<Window ...

Title="Okienko" Height="200" Width="300" FontSize="14">

<Grid>

</Grid>

</Window>

Okno może zawierać tylko jeden element. Aby umieścić ich więcej musimy wykorzystać specjalny element, który posłuży za kontener dla innych kontrolek.

 jest on odpowiedzialny za ułożenie kontrolek w oknie; dba o dopasowanie kontrolek do zawartości oraz do dostępnego miejsca

 elementy nie powinny mieć ustalonego rozmiaru ani położenia (współrzędnych) – o te aspekty będzie dbał kontener

 różne rodzaje (typy) kontenerów będą kierować się różną logiką rozmieszczania elementów

 Wszystkie kontenery dziedziczą z (abstrakcyjnej) klasy Panel. Dodaje ona

właściwość Children – jest to kolekcja elementów zawartych w panelu (pierwszy poziom zagnieżdżenia).

(17)

<StackPanel>

<Button>jeden</Button>

<Button>cztery</Button>

</StackPanel>

</Window>

(18)

<StackPanel>

<Button>jeden</Button>

</StackPanel>

</Window>

(19)

Przy pomocy atrybutów możemy sterować ułożeniem kontrolek:

<Button VerticalAlignment="Top">jeden</Button>

<Button VerticalAlignment="Stretch">cztery</Button>

</StackPanel>

</Window>

 VerticalAlignment

 HorizontalAlignment

(20)

Margin – dodaje odstęp od krawędzi kontenera i sąsiednich elementów:

jeden</Button>

dwa</Button>

<Button Margin="15, 5">cztery</Button>

</StackPanel>

</Window>

 marginesy sąsiadujących kontrolek sumują się!

(21)

Podobnie sterujemy ułożeniem zawartości wewnątrz kontrolki:

jeden</Button>

dwa</Button>

trzy</Button>

</StackPanel>

</Window>

 VerticalContentAlignment

 HorizontalContentAlignment

(22)

Podobnie sterujemy ułożeniem zawartości wewnątrz kontrolki:

jeden</Button>

dwa</Button>

trzy</Button>

<Button HorizontalAlignment="Center"

Padding="30, 0, 15, 5">cztery</Button>

</StackPanel>

</Window>

 Padding steruje odstępem od zawartości kontrolki

(23)

<WrapPanel>

<Button Margin="5">jeden</Button>

<Button Margin="5">cztery</Button>

<Button Margin="5">sześć</Button>

</WrapPanel>

</Window>

(24)

<DockPanel>

<Button DockPanel.Dock="Top">jeden</Button>

<Button DockPanel.Dock="Bottom">cztery</Button>

<Button DockPanel.Dock="Right">sześć</Button>

<Button>siedem</Button>

</DockPanel>

</Window>

 kolejność elementów ma znaczenie!

Dołączone właściwości

(25)

uwaga: dołączone właściwości

 są to właściwości, które mogą dotyczyć jakiejś kontrolki, ale są zdefiniowane w innej klasie

 każda kontrolka ma swoje własne właściwości, ale też jakaś inna kontrolka czy element interfejsu (np. kontener) może chcieć udekorować ją własnymi

specyficznymi właściwościami

 kontrolka umieszczona w kontenerze zyskuje dodatkowe właściwości określa się: TypDenifiujący.NazwaWłaściwości

działa to jako:

DockPanel.SetDockPanel(button, Dock.Top);

co faktycznie tłumaczy się na:

button.SetValue(DockPanel.DockProperty, Dock.Top)

jest to właściwość potrzebna DockPanelowi, ale faktycznie przechowywana jest w Buttonie

(26)

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

...

</Grid>

</Window>

 elementy umieszczamy w polach siatki

 krok pierwszy – zdefiniowanie siatki

Tylko do testu

Złożone właściwości

(27)

co to jest? złożona właściwość – gdy prosta to za mało; wtedy zamiast:

...

</Grid>

dajemy:

...

</Grid.RowDefinitions >

...

</Grid>

(28)

<Grid>

<Grid>

<Grid.RowDefinitions>...</Grid.RowDefinitions>

<Grid.ColumnDefinitions>...</Grid.ColumnDefinitions>

<Button>jeden</Button>

<Button Grid.Row="1" Grid.Column="1">cztery</Button>

</Grid>

</Window>

 krok drugi –

rozmieszczenie elementów

(29)

<Grid>

<Grid>

<Button Grid.ColumnSpan="2">jeden</Button>

<Button Grid.Row="1" Grid.Column="1">cztery</Button>

</Grid>

</Window>

 element może rozciągać się na więcej niż jedno pole siatki

(30)

<Grid>

<Grid>

...

</Grid>

</Window>

 Width dla kolumn

 Height dla wierszy

(31)

Kontenery można dowolnie zagnieżdżać:

<Grid>

...

</StackPanel>

...

</WrapPanel>

</Grid>

(32)

Ciekawe cechy Grida:

GridSplitter – pozwala na dynamiczną (przez użytkownika) zmianę rozmiaru kolumn/

wierszy Grida

SharedSizeGroup – pozwala dopasować rozmiar kolumny lub wiersza do innej kolumny lub wiersza (również w innym Gridzie)

Inne ciekawe rodzaje kontenerów:

UniformGrid – podobne do Grida, lecz wymusza jednakowy rozmiar komórek tabeli Canvas – pozwala wyłącznie na rozmieszczanie bezwzględne (w ustalonych

współrzędnych)

InkCanvas – podobne do Canvas, ale pozwala też na przyjmowanie wejścia ze stylusa (rysika), pozwala np. na rysowanie na powierzchni okna lub rozpoznawanie gestów

(33)

A jak zaprojektujemy nasze okienko?

<Window ...

Title="Obliczenia" Height="200" Width="300"

FontSize="14">

...

</Window>

(34)

<Grid>

</Grid>

</Window>

 cztery wiersze, dwie kolumny

 wysokość wierszy dopasowuje się do zawartości

 szerokość pierwszej kolumny dopasowuje się do zawartości

 szerokość kolumny z polem tekstowym – rozciągnięta

(35)

<Grid>

<Label Margin="5">Pierwsza liczba:</Label>

<Label Margin="5" Grid.Row="1">Druga liczba:</Label>

<Label Margin="5" Grid.Row="2">Wynik:</Label>

<TextBox Margin="5" Grid.Row="2" Grid.Column="1"

IsReadOnly="True"/>

<Button Grid.Row="3" Grid.ColumnSpan="2" Margin="5"

Padding="10,3" HorizontalAlignment="Right">

Oblicz</Button>

</Grid>

</Window>

 Label – etykieta

 TextBox – pole tekstowe

 IsReadOnly – tylko do odczytu

 przycisk zajmuje cały wiersz

(36)

Jak dodać obsługę zdarzeń?

 również przy pomocy atrybutów:

<Button Click="Oblicz" ...>Oblicz</Button>

// zawartość pliku Window1.xaml.cs:

namespace WpfApplication1 {

public partial class Window1 : Window {

public Window1() {

InitializeComponent();

}

private void Oblicz(object sender, RoutedEventArgs e) {

} } }

Ta funkcja zostanie wywołana, gdy użytkownik

naciśnie przycisk „Oblicz”

(37)

Jak odczytać dane z okna w kodzie programu?

 najpierw musimy nazwać elementy, do których chcemy mieć dostęp:

 następnie w pliku *.cs:

private void Oblicz(object sender, RoutedEventArgs e) {

int a = int.Parse(pierwsze.Text);

int b = int.Parse(drugie.Text);

int c = a + b;

wynik.Text = c.ToString();

}

 pierwsze.Text – zawartość pola tekstowego

 int.Parse(...) – konwersja tekstu na liczbę

 c.ToString() – konwersja zmiennej na tekst