Tvorba WPF aplikací – příručka

Osnova knihy: WPF C# – Od základů k profesionální tvorbě aplikací

Obsah

• Historie a vlastnosti WPF
• Porovnání s jinými platformami pro tvorbu GUI
• Cílová skupina příručky
• Struktura a obsah příručky

Základní principy WPF

• Objekt-orientované programování v C#
• XAML – jazyk pro definici uživatelského rozhraní
• Data binding – propojení dat s UI
• MVVM – architektonický vzor pro WPF aplikace
• Příkazy a události
• Styly a zdroje
• Animace a efekty

Pokročilé techniky WPF

• 3D grafika a animace
• Interakce s uživatelem
• Práce s daty a databázemi
• Víceuživatelské aplikace
• Nasazení a testování
• Ladění a optimalizace

Knihovny a frameworky

• MVVM Light Toolkit
• Caliburn.Micro
• Prism
• Entity Framework
• Material Design In XAML
• MahApps.Metro

Příklady a cvičení

• Vytvoření jednoduché kalkulačky
• Aplikace pro zobrazení fotografií
• Aplikace pro správu kontaktů
• Chatovací klient
• Hra

Reference a další zdroje

• Dokumentace WPF od Microsoftu
• Online tutoriály a kurzy
• Fóra a komunity WPF vývojářů
• Knihy a další publikace

Dodatek

• Slovník pojmů
• Klávesové zkratky
• Odkazy na online zdroje

Poznámka:

Tipy:

• Zaměřte se na základní principy WPF a teprve poté přejděte k pokročilejším tématům.
• Použijte příklady a cvičení k procvičení naučených konceptů.
• Nebojte se experimentovat a zkoušet nové věci.
• Využijte online zdroje a komunity WPF vývojářů, abyste se dozvěděli více.

Přeji vám hodně štěstí a zábavy při tvorbě WPF aplikací!

Úvod

Historie a vlastnosti WPF

WPF (Windows Presentation Foundation) je moderní platforma pro tvorbu grafických uživatelských rozhraní (GUI) desktopových aplikací v operačním systému Windows. Byla vyvinuta společností Microsoft a poprvé představena v roce 2006 jako součást .NET Frameworku 3.0.

Mezi hlavní vlastnosti WPF patří:

• Deklarativní programování: Uživatelské rozhraní se definuje pomocí jazyka XAML (Extensible Application Markup Language), který umožňuje oddělit logiku aplikace od její prezentace.
• Vektorová grafika: WPF používá vektorovou grafiku, která je nezávislá na rozlišení a zajišťuje, že aplikace bude vypadat skvěle na všech typech zařízení.
• 3D grafika: WPF podporuje 3D grafiku a animace, čímž umožňuje vytvářet bohaté a interaktivní uživatelské rozhraní.
• Podpora dat: WPF nabízí širokou škálu možností pro práci s daty, včetně datové vazby a databázových připojení.
• Styly a zdroje: WPF umožňuje snadno definovat a používat styly a zdroje, čímž zajišťuje konzistentní vzhled a chování aplikace.
• Rozšířitelnost: WPF je rozšiřitelná platforma, která umožňuje vývojářům vytvářet vlastní ovládací prvky a funkce.

Co je WPF a jak se používá?

Windows Presentation Foundation (WPF) je grafická knihovna a platforma pro vytváření desktopových aplikací pro Windows. WPF používá deklarativní syntaxi XAML (Extensible Application Markup Language) pro návrh uživatelských rozhraní. Tato technologie umožňuje vytvářet moderní a interaktivní aplikace s bohatými vizuálními prvky.

Pro použití WPF se obvykle využívá vývojového prostředí, jako je Visual Studio. Při vytváření nového WPF projektu v Visual Studiu se vybere šablona WPF Application, kde je možné definovat název aplikace a pracovat s XAML soubory pro design uživatelského rozhraní.

WPF umožňuje vytvářet aplikace s moderním vzhledem a interaktivitou, ačkoliv vyžaduje určitou znalost XAML pro efektivní práci s uživatelským rozhraním. Tato technologie je vhodná pro tvorbu desktopových aplikací pro různé platformy Windows, včetně Windows Phone a Windows Store aplikací[1][3][4][5].

Citace:
[1] https://www.fei.vsb.cz/export/sites/fei/460/cs/kontakt/lide/michal-radecky/csharp2/4-WPF.pdf
[2] https://wpf-tutorial.com/cs/1/o-wpf/co-je-to-wpf/
[3] https://www.dotnetportal.cz/clanek/196/Uvod-do-Windows-Presentation-Foundation-WPF-
[4] https://www.memos.cz/technologie/wpf/
[5] http://programujte.com/clanek/2014051701-wpf-pro-zacatecniky-1-dil-uvod-do-wpf-a-vytvoreni-projektu/

WPF a XAML se sice vzájemně doplňují, ale nejedná se o tutéž věc. Zde je vysvětlení jaký je mezi nimi rozdíl a vztah:

WPF (Windows Presentation Foundation)

• Framework pro tvorbu UI v desktopových aplikacích pro Windows.
• Vychází z konceptu vektorové grafiky, animací, bohatých ovládacích prvků a stylů.
• Zahrnuje třídy a další prvky pro definování struktury aplikací, interakce s UI a vykreslování rozhraní.

XAML (Extensible Application Markup Language)

• Jazyk založený na XML určený pro definování uživatelského rozhraní (UI) v rámci WPF aplikací.
• Deklarativní syntaxe: Popisujete strukturu UI, vazby, styly, ale neříkáte, jak konkrétně má být vykreslena.
• WPF framework pak XAML kód „přeloží“ do běžícího UI.

Vztah mezi nimi:

• XAML je primární způsob, jakým definujete uživatelské rozhraní v WPF.
• WPF poskytuje framework, který zpracovává a vykresluje uživatelské rozhraní definované v XAML.

Zjednodušená analogie:

• Představte si WPF jako kuchyni a XAML jako recept. Recept (XAML) popisuje požadované jídlo (UI), zatímco kuchyně (WPF) poskytuje nářadí, spotřebiče a postupy (framework) potřebné k realizaci receptu.

Porovnání s jinými platformami pro tvorbu GUI

Hlavním konkurentem WPF je platforma Windows Forms, která je také součástí .NET Frameworku. Windows Forms je starší platforma, která používá imperativní programování a rastrovou grafiku. WPF je oproti Windows Forms modernější a flexibilnější platforma, která umožňuje vytvářet bohatší a interaktivnější uživatelské rozhraní.

Další platformou pro tvorbu GUI desktopových aplikací je Qt. Qt je multiplatformní platforma, která umožňuje vytvářet aplikace pro Windows, macOS, Linux a další operační systémy. Qt je oproti WPF méně rozšířená, ale nabízí některé funkce, které WPF nemá, například podporu dotykových zařízení.

Cílová skupina

Tato příručka je určena pro všechny vývojáře, kteří se chtějí naučit tvořit desktopové aplikace s WPF. Předpokládá se, že čtenář má základní znalosti programování v jazyce C#.

Struktura a obsah příručky

Příručka je rozdělena do tří částí:

Základní principy WPF: Tato část se věnuje základním konceptům WPF, jako je XAML, datová vazba, MVVM a styly.

Pokročilé techniky WPF: Tato část se zabývá pokročilejšími tématy, jako je 3D grafika, práce s daty a databázemi, víceuživatelské aplikace a testování.

Příklady a cvičení: Tato část obsahuje příklady a cvičení, které vám pomohou procvičit si naučené koncepty.

Přírička je doplněna o reference a další zdroje, které vám pomohou dozvědět se více o WPF.

Základní principy WPF

Objekt-orientované programování v C#

WPF je objektově orientovaná platforma, takže je důležité mít základní znalosti objektově orientovaného programování v jazyce C#. Mezi základní koncepty OOP patří:

• Třídy: Třídy jsou šablony pro tvorbu objektů. Definují vlastnosti a metody objektů.
• Objekty: Objekty jsou instance tříd. Mají vlastnosti a metody definované v třídě.
• Dědičnost: Dědičnost umožňuje třídám dědit vlastnosti a metody z jiných tříd.
• Polymorfismus: Polymorfismus umožňuje objektům reagovat na různé způsoby na stejné zprávy.

Praktické příklady

Třídy a Objekty

Třída:

C#

public class Osoba
{
    public string Jmeno { get; set; }
    public int Vek { get; set; }

    public Osoba(string jmeno, int vek)
    {
        Jmeno = jmeno;
        Vek = vek;
    }

    public void VytiskniInformace()
    {
        Console.WriteLine($"Jméno: {Jmeno}, Věk: {Vek}");
    }
}

Objekt:

C#

Osoba osoba1 = new Osoba("Jan Novák", 30);
Osoba osoba2 = new Osoba("Jana Nováková", 25);

osoba1.VytiskniInformace();
osoba2.VytiskniInformace();

Výstup:

Jméno: Jan Novák, Věk: 30
Jméno: Jana Nováková, Věk: 25

Dědičnost

Třída:

C#

public class Zvire
{
    public string Jmeno { get; set; }

    public Zvire(string jmeno)
    {
        Jmeno = jmeno;
    }

    public void VydejZvuk()
    {
        Console.WriteLine("Zvuk zvířete...");
    }
}

public class Pes : Zvire
{
    public Pes(string jmeno) : base(jmeno)
    {
    }

    public void Stekej()
    {
        Console.WriteLine("Haf!");
    }
}

Objekt:

C#

Zvire zvire = new Zvire("Zvíře");
Pes pes = new Pes("Rex");

zvire.VydejZvuk();
pes.VydejZvuk();
pes.Stekej();

Výstup:

Zvuk zvířete...
Zvuk zvířete...
Haf!

Polymorfismus

Třída:

C#

public abstract class Tvar
{
    public abstract double VypocitejObsah();
}

public class Kruh : Tvar
{
    public double Polomer { get; set; }

    public Kruh(double polomer)
    {
        Polomer = polomer;
    }

    public override double VypocitejObsah()
    {
        return Math.PI * Polomer * Polomer;
    }
}

public class Ctverec : Tvar
{
    public double Strana { get; set; }

    public Ctverec(double strana)
    {
        Strana = strana;
    }

    public override double VypocitejObsah()
    {
        return Strana * Strana;
    }
}

Objekt:

C#

Tvar kruh = new Kruh(5);
Tvar ctverec = new Ctverec(4);

Console.WriteLine($"Obsah kruhu: {kruh.VypocitejObsah()}");
Console.WriteLine($"Obsah čtverce: {ctverec.VypocitejObsah()}");

Výstup:

Obsah kruhu: 78.5
Obsah čtverce: 16

V tomto příkladu můžeme vidět, že ačkoliv Kruh a Ctverec jsou odlišné třídy, obě dědí z abstraktní třídy Tvar. To nám umožňuje používat je v kódu polymorfním způsobem.

Další příklady:

• Můžete vytvořit třídu pro reprezentaci automobilu a dědit z ní třídy pro specifické typy aut (osobní, nákladní, atd.).
• Můžete vytvořit třídu pro geometrické tvary a dědit z ní třídy pro specifické tvary (kruh, čtverec, trojúhelník, atd.).
• Můžete vytvořit třídu pro bankovní účet a dědit z ní třídy pro specifické typy účtů (běžný, spořicí, termínovaný, atd.).

Doufám, že vám tyto příklady pomohly lépe pochopit základní koncepty objektově orientovaného programování v C#.

XAML – jazyk pro definici uživatelského rozhraní

XAML (Extensible Application Markup Language) je jazyk pro definici uživatelského rozhraní WPF aplikací. Je to deklarativní jazyk, tzn. že popisuje strukturu UI, nikoliv její chování. XAML umožňuje oddělit logiku aplikace od její prezentace, čímž se zvyšuje přehlednost a udržitelnost kódu.

Praktické příklady XAML

Příklad 1: Základní okno s tlačítkem:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Button Content="Klikni na mě!" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Window>

Příklad 2: Okno s textovým polem a štítkem:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <TextBox x:Name="txtJmeno" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" />
        <Label Content="Zadejte jméno:" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10" />
    </Grid>
</Window>

Příklad 3: Okno s seznamem a obrázkem:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <ListBox x:Name="lstZvirata" ItemsSource="{Binding Zvirata}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" />
        <Image x:Name="imgZvire" Source="{Binding VybranyZvire.Obrazek}" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10" />
    </Grid>
</Window>

Další příklady:

• Můžete definovat vlastní styly a šablony pro UI prvky.
• Můžete použít datové vazby pro propojení UI prvků s daty.
• Můžete definovat animace a efekty pro UI prvky.

XAML je mocný nástroj pro definici UI WPF aplikací. Umožňuje vytvářet komplexní a atraktivní uživatelská rozhraní s menším množstvím kódu.

Data binding – propojení dat s UI

Data binding je mechanismus, který umožňuje propojit data s UI. To znamená, že změny v datech se automaticky projeví v UI a naopak. Data binding usnadňuje vývoj aplikací, které pracují s daty.

Praktické příklady Data bindingu

Příklad 1: Propojení textového pole s vlastností:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <TextBox x:Name="txtJmeno" Text="{Binding Jmeno}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10" />
    </Grid>
</Window>

public partial class MainWindow : Window
{
    public string Jmeno { get; set; }

    public MainWindow()
    {
        InitializeComponent();
        Jmeno = "Jan Novák";
    }
}

V tomto příkladu je textové pole txtJmeno propojeno s vlastností Jmeno v kódu. Změna vlastnosti Jmeno se automaticky projeví v textovém poli a naopak.

Příklad 2: Propojení seznamu s kolekcí:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <ListBox x:Name="lstZvirata" ItemsSource="{Binding Zvirata}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" />
    </Grid>
</Window>

public partial class MainWindow : Window
{
    public ObservableCollection<Zvire> Zvirata { get; set; }

    public MainWindow()
    {
        InitializeComponent();
        Zvirata = new ObservableCollection<Zvire>()
        {
            new Zvire("Pes"),
            new Zvire("Kočka"),
            new Zvire("Králík")
        };
    }
}

public class Zvire
{
    public string Jmeno { get; set; }

    public Zvire(string jmeno)
    {
        Jmeno = jmeno;
    }
}

V tomto příkladu je seznam lstZvirata propojen s kolekcí Zvirata. Změna v kolekci Zvirata se automaticky projeví v seznamu a naopak.

Příklad 3: Propojení více UI prvků s jednou vlastností:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <TextBlock Text="{Binding Věk}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" />
        <Slider x:Name="sldrVek" Value="{Binding Věk}" Minimum="18" Maximum="100" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="10" />
    </Grid>
</Window>

public partial class MainWindow : Window
{
    public int Věk { get; set; }

    public MainWindow()
    {
        InitializeComponent();
        Věk = 30;
    }
}

V tomto příkladu je textový blok a slider propojeny s vlastností Věk. Změna vlastnosti Věk se automaticky projeví v obou UI prvcích a naopak.

Další příklady:

• Můžete použít data binding pro propojení UI prvků s databází.
• Můžete použít data binding pro validaci dat zadaných uživatelem.
• Můžete použít data binding pro implementaci dynamických UI prvků.

Data binding je mocný nástroj, který usnadňuje vývoj WPF aplikací. Umožňuje propojit data s UI a zajistit, aby se změny v datech automaticky projeví v UI a naopak.

Tipy:

• Pro více informací o data bindingu si prostudujte oficiální dokumentaci

public class KalkulackaModel
{
    public double PrvniCislo { get; set; }
    public double DruheCislo { get; set; }
    public double Vysledek { get; set; }

    public void Secti()
    {
        Vysledek = PrvniCislo + DruheCislo;
    }

    public void Odejcti()
    {
        Vysledek = PrvniCislo - DruheCislo;
    }

    public void Vynasob()
    {
        Vysledek = PrvniCislo * DruheCislo;
    }

    public void Del()
    {
        Vysledek = PrvniCislo / DruheCislo;
    }
}

public class KalkulackaViewModel
{
    private KalkulackaModel _model = new KalkulackaModel();

    public double PrvniCislo
    {
        get { return _model.PrvniCislo; }
        set { _model.PrvniCislo = value; }
    }

    public double DruheCislo
    {
        get { return _model.DruheCislo; }
        set { _model.DruheCislo = value; }
    }

    public double Vysledek
    {
        get { return _model.Vysledek; }
    }

    public void Secti()
    {
        _model.Secti();
    }

    public void Odejcti()
    {
        _model.Odejcti();
    }

    public void Vynasob()
    {
        _model.Vynasob();
    }

    public void Del()
    {
        _model.Del();
    }
}

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Kalkulačka" Height="300" Width="400">
    <Grid>
        <TextBox x:Name="txtPrvniCislo" Text="{Binding PrvniCislo}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" />
        <TextBox x:Name="txtDruheCislo" Text="{Binding DruheCislo}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10" />
        <Button Content="+" Command="{Binding SectiCommand}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10" />
        <Button Content="-" Command="{Binding OdejctiCommand}" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="10" />
        <Button Content="*" Command="{Binding VynasobCommand}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" />
        <Button Content="/" Command="{Binding DelCommand}" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="10" />
        <TextBlock Text="{Binding Vysledek}" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10" />
    </Grid>
</Window>

public class Kontakt
{
    public int Id { get; set; }
    public string Jmeno { get; set; }
    public string Prijmeni { get; set; }
    public string Email { get; set; }
    public string Telefon { get; set; }
}

Příkazy a události

Příkazy a události jsou základní koncepty pro interakci s uživatelem. Příkazy umožňují uživateli spouštět akce v aplikaci. Události informují aplikaci o uživatelských akcích.

Praktické příklady příkazů a událostí

Příklad 1: Tlačítko s příkazem:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Button Content="Klikni na mě!" Command="{Binding ZobrazZpravuCommand}" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Window>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        ZobrazZpravuCommand = new DelegateCommand(ZobrazZpravu);
    }

    public DelegateCommand ZobrazZpravuCommand { get; set; }

    private void ZobrazZpravu()
    {
        MessageBox.Show("Zpráva!");
    }
}

V tomto příkladu má tlačítko Command nastavený na ZobrazZpravuCommand. Kliknutí na tlačítko spustí metodu ZobrazZpravu.

Příklad 2: Textové pole s událostí:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <TextBox x:Name="txtJmeno" TextChanged="ZpracujZmenuJmena" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Window>

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

    private void ZpracujZmenuJmena(object sender, TextChangedEventArgs e)
    {
        // Zpracuj změnu jména
    }
}

V tomto příkladu je událost TextChanged textového pole txtJmeno nastavena na metodu ZpracujZmenuJmena. Tato metoda se spustí pokaždé, když se změní text v textovém poli.

Další příklady:

• Můžete použít příkazy pro implementaci menu a panelů nástrojů.
• Můžete použít události pro sledování klávesových zkratek a pohybu myši.
• Můžete použít příkazy a události pro implementaci drag-and-drop funkcionality.

Příkazy a události jsou základní koncepty pro interakci s uživatelem. Umožňují uživateli spouštět akce v aplikaci a informují aplikaci o uživatelských akcích.

Styly a zdroje

Styly a zdroje umožňují definovat a používat vzhled a chování UI. Styly definují vlastnosti UI, jako je barva, písmo a pozadí. Zdroje jsou objekty, které se používají v UI, jako jsou obrázky a ikony.

Praktické příklady stylů a zdrojů

Příklad 1: Styl pro tlačítko:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Button Content="Klikni na mě!" Style="{StaticResource TlacitkoStyl}" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Window>

<Window.Resources>
    <Style x:Key="TlacitkoStyl" TargetType="Button">
        <Setter Property="Background" Value="Red" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="FontSize" Value="16" />
    </Style>
</Window.Resources>

V tomto příkladu je definován styl TlacitkoStyl, který nastavuje barvu pozadí, barvu popředí a velikost písma tlačítka. Tlačítko Button používá tento styl k definování svého vzhledu.

Příklad 2: Zdroj obrázku:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Image Source="{StaticResource ObrazekLogo}" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Window>

<Window.Resources>
    <BitmapImage x:Key="ObrazekLogo" UriSource="logo.png" />
</Window.Resources>

V tomto příkladu je definován zdroj obrázku ObrazekLogo, který odkazuje na soubor logo.png. Obrázek Image používá tento zdroj k zobrazení obrázku.

Další příklady:

• Můžete definovat styly pro různé typy UI prvků, jako jsou textová pole, seznamy a panely.
• Můžete použít styly k definování vzhledu a chování celé aplikace.
• Můžete použít zdroje k zobrazení obrázků, ikon, videí a dalších objektů v UI.

Styly a zdroje jsou mocný nástroj pro definování a používání vzhledu a chování UI. Umožňují vám vytvářet konzistentní a atraktivní UI a usnadňují vývoj aplikací.

Animace a efekty

WPF umožňuje vytvářet animace a efekty v UI. Animace umožňují plynulou změnu vlastností UI v čase. Efekty umožňují přidávat do UI speciální efekty, jako je stín a průhlednost.

V další části se podíváme podrobněji na každý z těchto konceptů.

Animace a efekty

WPF umožňuje vytvářet animace a efekty v UI. Animace umožňují plynulou změnu vlastností UI v čase. Efekty umožňují přidávat do UI speciální efekty, jako je stín a průhlednost.

V další části se podíváme podrobněji na každý z těchto konceptů.

Pokročilé techniky WPF

3D grafika a animace

WPF podporuje 3D grafiku a animace, čímž umožňuje vytvářet bohaté a interaktivní uživatelské rozhraní. 3D grafika se používá pro zobrazení trojrozměrných objektů a scén. Animace se používá pro oživení 3D objektů a UI.

3D grafika a animace

WPF podporuje 3D grafiku a animace, čímž umožňuje vytvářet bohaté a interaktivní uživatelské rozhraní. 3D grafika se používá pro zobrazení trojrozměrných objektů a scén. Animace se používá pro oživení 3D objektů a UI.

Interakce s uživatelem

WPF nabízí širokou škálu možností pro interakci s uživatelem. Mezi základní koncepty interakce s uživatelem patří:

• Vstupy: Vstupy jsou data, která uživatel zadává do aplikace. Mohou to být textové řetězce, čísla, datumy atd.
• Výstupy: Výstupy jsou data, která aplikace zobrazuje uživateli. Mohou to být texty, obrázky, videa atd.
• Dialogy: Dialogy jsou okna, která se používají pro interakci s uživatelem. Mohou se používat pro zadávání dat, zobrazování informací atd.

Praktické příklady pro obrázek v kontextu s WPF:

Příklad 1: Zobrazení obrázku v okně:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Image Source="kocka.jpg" />
    </Grid>
</Window>

Příklad 2: Zobrazení obrázku na tlačítku:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Button>
            <Button.Content>
                <Image Source="kocka.jpg" />
            </Button.Content>
        </Button>
    </Grid>
</Window>

Příklad 3: Zobrazení obrázku v panelu:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <StackPanel>
            <Image Source="kocka.jpg" />
            <TextBlock Text="Toto je obrázek kočky" />
        </StackPanel>
    </Grid>
</Window>

Důležité:

V tomto příkladu jsem použil základní XAML k zobrazení obrázků. Existuje mnoho dalších způsobů, jak toho dosáhnout, v závislosti na vašich specifických potřebách.

Další tipy:

• Můžete použít vlastnosti XAML jako Width a Height k úpravě velikosti obrázku.
• Můžete použít vlastnosti XAML jako Margin a Padding k úpravě pozice obrázku.
• Můžete použít vlastnosti XAML jako Opacity k úpravě průhlednosti obrázku.
• Můžete použít efekty WPF k přidání efektů do obrázku, jako je stín nebo rozmazání.

Poznámka: Nahraďte kocka.jpg názvem vašeho vlastního souboru s obrázkem.

Práce s daty a databázemi

WPF umožňuje pracovat s daty z různých zdrojů, včetně databází. Databáze jsou uloženy v souborech a obsahují tabulky s daty. WPF podporuje různé typy databází, jako je SQL Server, MySQL a Oracle.

Praktické příklady pro práci s daty a databázemi v WPF:

Příklad 1: Načtení dat z databáze SQL Server a jejich zobrazení v ListBoxu:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <ListBox ItemsSource="{Binding Zaznamy}" />
    </Grid>
</Window>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        var connectionString = "Data Source=localhost;Initial Catalog=MojeDatabaze;Integrated Security=True";
        var sqlQuery = "SELECT * FROM MojeTabulka";

        using (var connection = new SqlConnection(connectionString))
        {
            connection.Open();
            var command = new SqlCommand(sqlQuery, connection);
            var reader = command.ExecuteReader();

            while (reader.Read())
            {
                var zaznam = new Zaznam
                {
                    Jmeno = reader["Jmeno"].ToString(),
                    Prijmeni = reader["Prijmeni"].ToString(),
                    Vek = reader.GetInt32(reader.GetOrdinal("Vek"))
                };

                Zaznamy.Add(zaznam);
            }
        }
    }

    public ObservableCollection<Zaznam> Zaznamy { get; set; } = new ObservableCollection<Zaznam>();

    public class Zaznam
    {
        public string Jmeno { get; set; }
        public string Prijmeni { get; set; }
        public int Vek { get; set; }
    }
}

V tomto příkladu se načtou data z tabulky MojeTabulka v databázi SQL Server a zobrazí se v ListBoxu.

Příklad 2: Uložení dat do databáze SQL Server:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.">
    <Grid>
        <TextBox x:Name="JmenoTextBox" />
        <TextBox x:Name="PrijmeniTextBox" />
        <TextBox x:Name="VekTextBox" />
        <Button Click="UlozitZaznam">Uložit záznam</Button>
    </Grid>
</Window>

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

    private void UlozitZaznam(object sender, RoutedEventArgs e)
    {
        var connectionString = "Data Source=localhost;Initial Catalog=MojeDatabaze;Integrated Security=True";
        var sqlQuery = "INSERT INTO MojeTabulka (Jmeno, Prijmeni, Vek) VALUES (@jmeno, @prijmeni, @vek)";

        using (var connection = new SqlConnection(connectionString))
        {
            connection.Open();
            var command = new SqlCommand(sqlQuery, connection);
            command.Parameters.AddWithValue("@jmeno", JmenoTextBox.Text);
            command.Parameters.AddWithValue("@prijmeni", PrijmeniTextBox.Text);
            command.Parameters.AddWithValue("@vek", int.Parse(VekTextBox.Text));
            command.ExecuteNonQuery();
        }

        MessageBox.Show("Záznam byl uložen");
    }
}

V tomto příkladu se po kliknutí na tlačítko „Uložit záznam“ uloží data z textových polí do tabulky MojeTabulka v databázi SQL Server.

Další tipy:

• Můžete použít knihovny Entity Framework pro usnadnění práce s databázemi.
• Můžete použít databázové procedury pro komplexnější operace s daty.
• Můžete použít databázové triggery pro automatické spuštění akcí při změně dat.

Víceuživatelské aplikace

Víceuživatelské aplikace umožňují více uživatelům současně pracovat s aplikací. WPF podporuje vývoj víceuživatelských aplikací a nabízí funkce pro synchronizaci dat a řízení přístupu.

Příklady WPF s kódy:

Příklad 1: Zobrazení obrázku v okně:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Image Source="kocka.jpg" />
    </Grid>
</Window>

Příklad 2: Zobrazení obrázku na tlačítku:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Button>
            <Button.Content>
                <Image Source="kocka.jpg" />
            </Button.Content>
        </Button>
    </Grid>
</Window>

Příklad 3: Zobrazení obrázku v panelu:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <StackPanel>
            <Image Source="kocka.jpg" />
            <TextBlock Text="Toto je obrázek kočky" />
        </StackPanel>
    </Grid>
</Window>

Příklad 4: Načtení dat z databáze SQL Server a jejich zobrazení v ListBoxu:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <ListBox ItemsSource="{Binding Zaznamy}" />
    </Grid>
</Window>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        var connectionString = "Data Source=localhost;Initial Catalog=MojeDatabaze;Integrated Security=True";
        var sqlQuery = "SELECT * FROM MojeTabulka";

        using (var connection = new SqlConnection(connectionString))
        {
            connection.Open();
            var command = new SqlCommand(sqlQuery, connection);
            var reader = command.ExecuteReader();

            while (reader.Read())
            {
                var zaznam = new Zaznam
                {
                    Jmeno = reader["Jmeno"].ToString(),
                    Prijmeni = reader["Prijmeni"].ToString(),
                    Vek = reader.GetInt32(reader.GetOrdinal("Vek"))
                };

                Zaznamy.Add(zaznam);
            }
        }
    }

    public ObservableCollection<Zaznam> Zaznamy { get; set; } = new ObservableCollection<Zaznam>();

    public class Zaznam
    {
        public string Jmeno { get; set; }
        public string Prijmeni { get; set; }
        public int Vek { get; set; }
    }
}

Příklad 5: Uložení dat do databáze SQL Server:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <TextBox x:Name="JmenoTextBox" />
        <TextBox x:Name="PrijmeniTextBox" />
        <TextBox x:Name="Vek

Nasazení a testování

Nasazení je proces instalace a konfigurace aplikace na cílovém počítači. Testování je proces ověřování, zda aplikace splňuje požadavky. WPF nabízí nástroje pro nasazení a testování aplikací.

Ukázka nasazení a testování v WPF:

Nasazení:

1. Klikněte pravým tlačítkem myši na projekt v Visual Studio a vyberte možnost „Publikovat“.

2. Vyberte cílovou platformu (např. Windows 10 x64).

3. Zadejte cílové umístění pro publikovanou aplikaci.

4. Klikněte na tlačítko „Publikovat“.

Výsledkem bude soubor s příponou .exe, který lze spustit na cílovém počítači.

Testování:

1. V Visual Studio spusťte aplikaci v režimu ladění.

2. Použijte nástroje pro ladění, jako je debugger a diagnostický nástroj XAML, k nalezení chyb v aplikaci.

3. Napište automatizované testy pro ověření funkčnosti aplikace.

Nástroje pro nasazení a testování v WPF:

• Visual Studio: Visual Studio integrovaný nástroj pro publikování a ladění WPF aplikací.
• ClickOnce: Technologie ClickOnce umožňuje snadno nasazovat WPF aplikace na klientské počítače.
• MSTest: Testovací framework pro automatizované testování WPF aplikací.
• White: Nástroj pro UI testování WPF aplikací.

Důležité:

• Před nasazením aplikace na produkční prostředí je důležité důkladně otestovat aplikaci.
• Měli byste implementovat strategii pro zálohování a obnovení databáze.
• Měli byste monitorovat výkon aplikace a dostupnost služeb.

Další tipy:

• Můžete použít nástroje pro kontinuální integraci a nasazení (CI/CD) k automatizaci procesu nasazení.
• Můžete použít nástroje pro monitorování výkonu (APM) ke sledování výkonu aplikace.
• Můžete použít nástroje pro správu aplikací (ALM) ke správě životního cyklu aplikace.

Ladění a optimalizace

Ladění je proces nalezení a opravy chyb v aplikaci. Optimalizace je proces zlepšení výkonu aplikace. WPF nabízí nástroje pro ladění a optimalizaci aplikací.

Ukázka a postup: Ladění a optimalizace v WPF

Ladění:

1. Spusťte aplikaci v režimu ladění ve Visual Studio.

2. Použijte debugger k procházení kódu řádek po řádku.

3. Zkontrolujte hodnoty proměnných a stav objektů.

4. Použijte diagnostický nástroj XAML k diagnostice problémů s rozhraním XAML.

Optimalizace:

1. Analyzujte výkon aplikace pomocí nástrojů pro profilování výkonu.

2. Optimalizujte algoritmy a datové struktury.

3. Využijte techniky optimalizace kódu, jako je inlining a optimalizace smyček.

4. Použijte techniky optimalizace grafiky, jako je komprese obrázků a optimalizace animací.

Nástroje pro ladění a optimalizaci v WPF:

• Visual Studio: Visual Studio integrovaný nástroj pro ladění a profilování WPF aplikací.
• Debugger: Nástroj pro procházení kódu a kontrolu hodnot proměnných.
• Diagnostický nástroj XAML: Nástroj pro diagnostiku problémů s rozhraním XAML.
• Nástroje pro profilování výkonu: Nástroje pro analýzu výkonu aplikace.

Postup:

1. Identifikujte problém: Určete, zda se jedná o chybu nebo o problém s výkonem.
2. Vyberte nástroj: Vyberte vhodný nástroj pro ladění nebo optimalizaci.
3. Použijte nástroj: Použijte nástroj k nalezení a opravě chyby nebo ke zlepšení výkonu.
4. Otestujte aplikaci: Otestujte aplikaci, abyste se ujistili, že je problém vyřešen.

Knihovny a frameworky pro zefektivnění tvorby WPF aplikací:

• MahApps.Metro: Knihovna pro implementaci moderního vzhledu a dojmu v WPF aplikacích.
• Prism: Framework pro implementaci vzoru MVVM v WPF aplikacích.
• Caliburn.Micro: Framework pro implementaci vzoru MVVM v WPF aplikacích.
• Autofac: Framework pro vkládání závislostí v WPF aplikacích.
• Ninject: Framework pro vkládání závislostí v WPF aplikacích.

Doufám, že vám tato ukázka a postup pomohly lépe pochopit, jak lze ladit a optimalizovat WPF aplikace.

Důležité:

• Ladění a optimalizace jsou důležité kroky ve vývoji WPF aplikací.
• Existuje mnoho nástrojů a technik, které vám pomohou ladit a optimalizovat vaše aplikace.
• Používání knihoven a frameworků může zefektivnit tvorbu WPF aplikací.

Další tipy:

• Můžete použít nástroje pro statickou analýzu kódu k nalezení potenciálních problémů v kódu.
• Můžete použít techniky refaktoringu kódu ke zlepšení struktury a čitelnosti kódu.
• Můžete využít online zdroje a komunity pro získání rady a pomoci s laděním a optimalizací.

Přeji vám hodně štěstí při vývoji vašich WPF aplikací!

V další části se podíváme podrobněji na každý z těchto konceptů.

Tady je rozbor zmíněných knihoven a frameworků, které pomáhají zefektivnit tvorbu WPF aplikací:

Knihovny pro vzor MVVM

• MVVM Light Toolkit: Jednoduchá a oblíbená knihovna, která usnadňuje implementaci architektonického vzoru MVVM. Základní koncept je mít pro každý View (okno aplikace) odpovídající ViewModel třídu. Nabízí:
  • Messenger: Systém pro jednoduchou komunikaci mezi komponentami aplikace.
  • RelayCommand: Zjednodušení práce s příkazy (ICommand).
  • ViewModels: Pomocné třídy a služby pro vytváření ViewModelů.
• Caliburn.Micro: Pokročilejší framework pro MVVM aplikace. Zaměřený hlavně na konvence pojmenování a automatické propojování, díky čemuž můžete psát méně kódu. Zahrnuje:
  • Actions: Mechanismus pro snadnou obsluhu událostí a reakci ViewModelu na akce ve View.
  • IoC kontejner: Systém pro správu závislostí aplikací.
  • Podpora Coroutines: Umožňuje psát asynchronní kód, který je dobře čitelný.
• Prism: Komplexní framework pro vytváření složitých, modulárních a dobře testovatelných WPF aplikací. Umožňuje velké přizpůsobení a zavádí dodatečné koncepty:
  • Regions: Systém pro definici oblastí v UI, do kterých se dynamicky vkládají View.
  • Moduly: Rozdělení aplikace do samostatných, znovupoužitelných modulů.
  • Event Aggregator: Vylepšený mechanismus pro komunikaci mezi částmi aplikace.

Příklad 1: MVVM Light Toolkit – Zobrazení obrázku

View (MainWindow.xaml):

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Image Source="{Binding ImageSource}" />
    </Grid>
</Window>

ViewModel (MainWindowViewModel.cs):

C#

using GalaSoft.MvvmLight;
using System;
using System.Windows.Media.Imaging;

namespace WpfApp1
{
    public class MainWindowViewModel : ViewModelBase
    {
        private readonly Uri _imageUri = new Uri("pack://application:,,,/Resources/kocka.jpg");

        public MainWindowViewModel()
        {
            ImageSource = new BitmapImage(_imageUri);
        }

        public BitmapImage ImageSource { get; private set; }
    }
}

V tomto příkladu:

• ViewModel MainWindowViewModel obsahuje vlastnost ImageSource, která ukládá cestu k obrázku.
• View MainWindow používá vazbu dat k zobrazení obrázku z vlastnosti ImageSource.

Příklad 2: MVVM Light Toolkit – RelayCommand

View (MainWindow.xaml):

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Button Content="Zobrazit obrázek" Command="{Binding ShowImageCommand}" />
        <Image Source="{Binding ImageSource}" />
    </Grid>
</Window>

ViewModel (MainWindowViewModel.cs):

C#

using GalaSoft.MvvmLight;
using System;
using System.Windows.Input;
using System.Windows.Media.Imaging;

namespace WpfApp1
{
    public class MainWindowViewModel : ViewModelBase
    {
        private readonly Uri _imageUri = new Uri("pack://application:,,,/Resources/kocka.jpg");

        private BitmapImage _imageSource;

        public MainWindowViewModel()
        {
            ShowImageCommand = new RelayCommand(ShowImage);

            _imageSource = new BitmapImage();
        }

        public ICommand ShowImageCommand { get; private set; }

        public BitmapImage ImageSource
        {
            get { return _imageSource; }
            set
            {
                _imageSource = value;
                RaisePropertyChanged();
            }
        }

        private void ShowImage()
        {
            ImageSource = new BitmapImage(_imageUri);
        }
    }
}

V tomto příkladu:

• ViewModel MainWindowViewModel obsahuje příkaz ShowImageCommand, který zobrazí obrázek.
• View MainWindow používá vazbu dat k zobrazení tlačítka a obrázku.
• Tlačítko používá příkaz ShowImageCommand k zobrazení obrázku.

Příklad 3: MVVM Light Toolkit – Messenger

View1 (View1.xaml):

XML

<Window x:Class="WpfApp1.View1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="View1" Height="300" Width="400">
    <Grid>
        <TextBox x:Name="TextBox1" />
        <Button Content="Odeslat zprávu" Click="Button_Click" />
    </Grid>
</Window>

ViewModel1 (ViewModel1.cs):

C#

using GalaSoft.MvvmLight;
using System;
using System.Windows;

namespace WpfApp1
{
    public class ViewModel1 : ViewModelBase
    {
        public ViewModel1()
        {
            Messenger.Instance.Register<string>(this, ReceiveMessage);
        }

        private void ReceiveMessage(string message)
        {
            MessageBox.Show(message);

Knihovny pro práci s databázemi

• Entity Framework: Objektově-relační mapování (ORM) od Microsoftu. Umožňuje pracovat s databází pomocí tříd a objektů jazyka C#. Zjednodušuje načítání dat do modelů, ukládání změn, práci s relacemi atd. Entity Framework existuje v několika verzích, mezi nimi nejpopulárnější Entity Framework Core pro modernější přístup.

Entity Framework – Příklad s kódem

Tento příklad ukazuje, jak používat Entity Framework Core k načtení dat z databáze SQL Server a jejich zobrazení v ListBoxu.

Model (MyModel.cs):

C#

public class MyModel
{
    public int Id { get; set; }
    public string Jmeno { get; set; }
    public string Prijmeni { get; set; }
}

DbContext (MyContext.cs):

C#

public class MyContext : DbContext
{
    public DbSet<MyModel> Models { get; set; }

    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        optionsBuilder.UseSqlServer(@"Data Source=localhost;Initial Catalog=MojeDatabaze;Integrated Security=True");
    }
}

ViewModel (MainWindowViewModel.cs):

C#

using System.Collections.ObjectModel;
using System.Linq;
using System.Windows.Input;

namespace WpfApp1
{
    public class MainWindowViewModel : ViewModelBase
    {
        private ObservableCollection<MyModel> _models;

        public MainWindowViewModel()
        {
            LoadModels();
        }

        public ObservableCollection<MyModel> Models
        {
            get { return _models; }
            set
            {
                _models = value;
                RaisePropertyChanged();
            }
        }

        private void LoadModels()
        {
            using (var context = new MyContext())
            {
                Models = new ObservableCollection<MyModel>(context.Models.ToList());
            }
        }
    }
}

View (MainWindow.xaml):

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <ListBox ItemsSource="{Binding Models}" />
    </Grid>
</Window>

V tomto příkladu:

• Model MyModel reprezentuje tabulku v databázi.
• DbContext MyContext slouží k přístupu k databázi a provádění operací s daty.
• ViewModel MainWindowViewModel načítá data z databáze a zobrazuje je v ListBoxu.
• View MainWindow používá vazbu dat k zobrazení dat z ViewModelu.

Další tipy:

• Můžete použít migraci databáze k automatické aktualizaci struktury databáze při změně modelu.
• Můžete použít Fluent API k definování mapování mezi objekty a tabulkami.
• Můžete použít LINQ k dotazování dat v databázi.

Knihovny pro vzhled aplikace

• Material Design In XAML: Implementace Google Material Designu pro WPF aplikace. Poskytuje ovládací prvky a témata (themes) pro atraktivní a moderní uživatelské rozhraní.
• MahApps.Metro: Další populární knihovna, která obsahuje prvky a styly inspirované rozhraním Metro (původně známé z Windows Phone). Umožňuje dodat aplikaci styl, který byl běžný v aplikacích pro Windows 8.

Material Design In XAML:

Ukázka kódu pro tlačítko s Material designem:

XML

<Button x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:materialDesign="http://materialdesigninxaml.net/wpf/xaml/themes"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <Button Background="{materialDesign:MaterialDesignTheme.PrimaryAccentBrush}" Content="Tlačítko">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Border BorderBrush="{materialDesign:MaterialDesignTheme.PrimaryAccentColor}" BorderThickness="2">
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
    </Grid>
</Window>

V tomto příkladu:

• Pro tlačítko se používá materialDesign:MaterialDesignTheme.PrimaryAccentBrush pro nastavení barvy pozadí.
• Tlačítko má styl, který nastavuje tloušťku ohraničení a zarovnání obsahu.

MahApps.Metro:

Ukázka kódu pro tlačítko s stylem Metro:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:metro="http://metro.mahapps.com/winfx/xaml/controls"
        Title="MainWindow" Height="300" Width="400">
    <Grid>
        <metro:Button Background="AccentColor" Content="Tlačítko" />
    </Grid>
</Window>

V tomto příkladu:

• Pro tlačítko se používá AccentColor pro nastavení barvy pozadí.
• Tlačítko je typu metro:Button, který má styl inspirovaný rozhraním Metro.

Další tipy:

• Obě knihovny nabízí širokou škálu ovládacích prvků a stylů.
• Můžete si vybrat styly, které se hodí k vašemu designu a brandingu.
• Můžete kombinovat prvky z obou knihoven.

Kterou vybrat?

• Pokud začínáte a chcete snadno zvládnutelnou možnost, MVVM Light Toolkit je dobrou volbou pro rychlý start.
• Jestliže chcete pokročilejší funkce a konvence, Caliburn.Micro poskytuje větší flexibilitu a pokročilejší možnosti.
• Pro velké, složité a snadno testovatelné aplikace, kde je důležitá modularita, je dobrou volbou framework Prism.
• Potřebujete-li efektivně pracovat s databází, zejména relační, Entity Framework je standardním řešením.
• Chcete-li své WPF aplikaci dodat moderní, atraktivní vzhled, podívejte se na Material Design In XAML nebo MahApps.Metro.

Doporučení: I když tyto knihovny poskytují skvělou výchozí kostru, neomezujte své poznávání WPF pouze na ně. Pochopení základů WPF vám dá nejlepší základ pro využití jakékoliv dodatečné knihovny.

Příklady a cvičení

Zde je několik příkladů a cvičení, které vám pomohou procvičit si koncepty WPF:

1. Vytvoření jednoduché kalkulačky:

• Cílem je vytvořit základní kalkulačku s tlačítky pro čísla, základní operace a rovnítko.
• Naučíte se:
  • Definovat UI v XAML.
  • Propojovat UI s logikou v C#.
  • Používat základní datové typy a operace.
  • Zpracovávat události z tlačítek.

Vytvoření jednoduché kalkulačky v WPF:

1. Definice UI v XAML

Vytvořte soubor MainWindow.xaml s následujícím kódem:

XML

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Kalkulačka" Height="300" Width="400">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Button Content="7" Grid.Column="0" Grid.Row="0" Click="Button_Click" />
        <Button Content="8" Grid.Column="1" Grid.Row="0" Click="Button_Click" />
        <Button Content="9" Grid.Column="2" Grid.Row="0" Click="Button_Click" />
        <Button Content="4" Grid.Column="0" Grid.Row="1" Click="Button_Click" />
        <Button Content="5" Grid.Column="1" Grid.Row="1" Click="Button_Click" />
        <Button Content="6" Grid.Column="2" Grid.Row="1" Click="Button_Click" />
        <Button Content="1" Grid.Column="0" Grid.Row="2" Click="Button_Click" />
        <Button Content="2" Grid.Column="1" Grid.Row="2" Click="Button_Click" />
        <Button Content="3" Grid.Column="2" Grid.Row="2" Click="Button_Click" />
        <Button Content="0" Grid.Column="0" Grid.Row="3" Click="Button_Click" />
        <Button Content="." Grid.Column="1" Grid.Row="3" Click="Button_Click" />

        <Button Content="+" Grid.Column="3" Grid.Row="0" Click="Button_Click" />
        <Button Content="-" Grid.Column="3" Grid.Row="1" Click="Button_Click" />
        <Button Content="*" Grid.Column="3" Grid.Row="2" Click="Button_Click" />
        <Button Content="/" Grid.Column="3" Grid.Row="3" Click="Button_Click" />

        <Button Content="=" Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="4" Click="Button_Click" />

        <TextBox x:Name="TextBoxResult" Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="4" />
    </Grid>
</Window>

Tento kód definuje základní rozvržení kalkulačky s tlačítky pro čísla, operace a rovnítko. Dále obsahuje textové pole pro zobrazení výsledku.

2. Propojování UI s logikou v C#

Vytvořte soubor MainWindow.xaml.cs s následujícím kódem:

C#

using System;
using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        private string _operand1;
        private string _operand2;
        private string _operation;

        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var button = (Button)sender;
            var content = button.Content.ToString();

            switch (content)
            {
                case "0":
                case "1":
                case "2":
                case "3":
                case "4":
                case "5":
                case "6":
                case "7":
                case "8":
                case "9":
                    if (_operation == null)
                    

2. Aplikace pro zobrazení fotografií:

• Cílem je vytvořit aplikaci pro prohlížení fotografií v adresáři.
• Naučíte se:
  • Načítat a zobrazovat obrázky.
  • Používat datové vazby pro zobrazení metadat fotografií.
  • Implementovat základní navigaci mezi obrázky.

Aplikace pro zobrazení fotografií

Cíl: Vytvořit aplikaci WPF pro prohlížení fotografií v adresáři.

Naučíte se:

• Načítat a zobrazovat obrázky.
• Používat datové vazby pro zobrazení metadat fotografií.
• Implementovat základní navigaci mezi obrázky.

Postup:

1. Vytvořte nový projekt WPF v Visual Studiu.
2. Přidejte do projektu referenci na knihovnu System.Drawing.
3. Vytvořte rozhraní pro zobrazení fotografií:
   • Použijte ListBox pro zobrazení náhledů fotografií.
   • Použijte Image pro zobrazení vybrané fotografie.
   • Přidejte tlačítka pro navigaci mezi obrázky.
4. Načtěte soubory fotografií z adresáře:
   • Použijte třídu Directory.GetFiles pro získání názvů souborů.
   • Načtěte obrázky do paměti pomocí BitmapImage.
5. Zobrazte metadata fotografií:
   • Použijte třídu Image pro načtení metadat fotografií.
   • Zobrazte metadata v textových blocích vedle obrázku.
6. Implementujte navigaci mezi obrázky:
   • Udržujte aktuální index zobrazené fotografie.
   • Změňte zobrazenou fotografii při kliknutí na tlačítka navigace.

Tipy:

• Můžete použít knihovnu MahApps.Metro pro moderní vzhled a dojem.
• Můžete implementovat filtrování a řazení fotografií.
• Můžete umožnit uživatelům přidávat a upravovat metadata fotografií.

Ukázka kódu:

C#

using System;
using System.Collections.ObjectModel;
using System.Drawing;
using System.IO;
using System.Windows;
using System.Windows.Data;
using System.Windows.Media.Imaging;

namespace PhotoViewer
{
    public class MainWindow : Window
    {
        private ObservableCollection<BitmapImage> _images;
        private int _currentIndex;

        public MainWindow()
        {
            InitializeComponent();

            _images = new ObservableCollection<BitmapImage>();
            LoadImages();

            DataContext = this;
        }

        private void LoadImages()
        {
            var files = Directory.GetFiles("C:\\Users\\Public\\Pictures\\Sample Pictures");
            foreach (var file in files)
            {
                var image = new BitmapImage(new Uri(file));
                _images.Add(image);
            }
        }

        public BitmapImage CurrentImage
        {
            get { return _images[_currentIndex]; }
        }

        private void PreviousButton_Click(object sender, RoutedEventArgs e)
        {
            if (_currentIndex > 0)
            {
                _currentIndex--;
            }
        }

        private void NextButton_Click(object sender, RoutedEventArgs e)
        {
            if (_currentIndex < _images.Count - 1)
            {
                _currentIndex++;
            }
        }
    }
}

Další náměty pro tvorbu aplikací:

3. Aplikace pro správu kontaktů:

• Cílem je vytvořit aplikaci pro ukládání a editaci kontaktů.
• Naučíte se:
  • Pracovat s databází (např. SQLite).
  • Definovat a validavat datové modely.
  • Vytvářet formuláře pro editaci kontaktů.
  • Implementovat filtrování a vyhledávání kontaktů.

4. Chatovací klient:

• Cílem je vytvořit jednoduchou aplikaci pro chatování mezi dvěma uživateli.
• Naučíte se:
  • Síťovou komunikaci (např. pomocí WebSockets).
  • Zpracovávání zpráv v reálném čase.
  • Zobrazování a odesílání textových zpráv.
  • Implementaci základních funkcí chatu (jako je přihlašování a odhlašování).

5. Hra:

• Cílem je vytvořit jednoduchou hru (např. hru typu „Hádej číslo“).
• Naučíte se:
  • Implementovat herní logiku.
  • Používat animace a efekty.
  • Zpracovávat uživatelské vstupy.
  • Ukládat a načítat herní stav.

Další zdroje:

• Existuje mnoho online tutoriálů a kurzů, které vás provedou tvorbou WPF aplikací.
• Můžete také procházet ukázky kódu dostupné na GitHubu a dalších platformách.
• Nezapomeňte se aktivně zapojit do komunity WPF vývojářů a klást otázky na fórech a online diskuzních skupinách.

Tipy:

• Začněte s jednoduchými příklady a postupně se propracujte k složitějším projektům.
• Nebojte se experimentovat a zkoušet nové věci.
• Využívejte online zdroje a komunitu WPF vývojářů.
• Důkladně testujte svůj kód a odstraňujte chyby.
• Bavte se a užijte si proces tvorby WPF aplikací!

Nejčastěji používané komponenty pro WPF:

Základní komponenty:

• Button: Tlačítko pro spuštění akce.
• TextBox: Pole pro zadávání textu.
• Label: Popisek pro zobrazení textu.
• Image: Obrázek.
• ListBox: Seznam položek.
• Grid: Rozvržení pro uspořádání komponent do mřížky.
• StackPanel: Rozvržení pro uspořádání komponent do svislého nebo vodorovného seznamu.

Ukázkový kód pro komponenty WPF v C#:

Button:

C#

<Button Content="Odeslat" Click="Button_Click" />

TextBox:

C#

<TextBox Text="Zadejte jméno" />

Label:

C#

<Label Content="Jméno:" />

Image:

C#

<Image Source="image.png" />

ListBox:

C#

<ListBox>
  <ListBoxItem>Položka 1</ListBoxItem>
  <ListBoxItem>Položka 2</ListBoxItem>
  <ListBoxItem>Položka 3</ListBoxItem>
</ListBox>

Grid:

C#

<Grid>
  <Button Content="Tlačítko 1" Grid.Row="0" Grid.Column="0" />
  <Button Content="Tlačítko 2" Grid.Row="0" Grid.Column="1" />
  <TextBox Text="Zadejte text" Grid.Row="1" Grid.ColumnSpan="2" />
</Grid>

StackPanel:

C#

<StackPanel>
  <Button Content="Tlačítko 1" />
  <Button Content="Tlačítko 2" />
  <TextBox Text="Zadejte text" />
</StackPanel>

Další informace na:

• WPF Code Samples: https://github.com/microsoft/wpf-samples

Pokročilé komponenty:

• DataGrid: Tabulka pro zobrazení dat.
• TreeView: Stromová struktura pro zobrazení dat.
• TabControl: Karty pro zobrazení různého obsahu.
• MediaElement: Přehrávač médií.
• WebBrowser: Prohlížeč webu.
• InkCanvas: Plátno pro kreslení a psaní.

Ukázkový kód pro další komponenty WPF v C#:

DataGrid:

C#

<DataGrid ItemsSource="{Binding Data}" />

TreeView:

C#

<TreeView ItemsSource="{Binding Data}">
  <TreeViewItem Header="Položka 1">
    <TreeViewItem Header="Podpoložka 1" />
    <TreeViewItem Header="Podpoložka 2" />
  </TreeViewItem>
  <TreeViewItem Header="Položka 2" />
</TreeView>

TabControl:

C#

<TabControl>
  <TabItem Header="Karta 1">
    <TextBlock Text="Obsah karty 1" />
  </TabItem>
  <TabItem Header="Karta 2">
    <TextBlock Text="Obsah karty 2" />
  </TabItem>
</TabControl>

MediaElement:

C#

<MediaElement Source="video.mp4" />

WebBrowser:

C#

<WebBrowser Source="https://www.microsoft.com" />

InkCanvas:

C#

<InkCanvas />

Poznámka: Toto je pouze základní ukázkový kód. Komponenty lze dále konfigurovat a upravovat pomocí vlastností a událostí.

Popis a příklady použití:

Button: Tlačítko se používá pro spuštění akce, jako je odeslání formuláře, otevření okna nebo spuštění výpočtu.

TextBox: Pole pro zadávání textu se používá pro zadávání uživatelských vstupů, jako je jméno, email nebo adresa.

Label: Popisek se používá pro zobrazení textu, jako je název, instrukce nebo popis.

Image: Obrázek se používá pro zobrazení obrázků, fotografií nebo ikon.

ListBox: Seznam položek se používá pro zobrazení seznamu dat, jako je seznam produktů, seznam kontaktů nebo seznam souborů.

Grid: Rozvržení do mřížky se používá pro uspořádání komponent do sloupce a řádků.

StackPanel: Rozvržení do seznamu se používá pro uspořádání komponent do svislého nebo vodorovného seznamu.

DataGrid: Tabulka se používá pro zobrazení dat v tabulkovém formátu.

TreeView: Stromová struktura se používá pro zobrazení dat v hierarchické struktuře.

TabControl: Karty se používá pro zobrazení různého obsahu na kartách.

MediaElement: Přehrávač médií se používá pro přehrávání audio a video souborů.

WebBrowser: Prohlížeč webu se používá pro zobrazení webových stránek.

InkCanvas: Plátno pro kreslení a psaní se používá pro kreslení a psaní perem na dotykové obrazovce.

Poznámka: Toto je pouze základní seznam nejčastěji používaných komponent. Existuje mnoho dalších komponent, které lze v aplikacích WPF použít.

Reference a další zdroje

Dokumentace WPF od Microsoftu:

• Oficiální dokumentace WPF od Microsoftu je komplexním a podrobným zdrojem informací o všech aspektech platformy WPF: https://learn.microsoft.com/cs-cz/dotnet/desktop/wpf/?view=netdesktop-8.0
• Najdete zde návody, reference API, ukázky kódu a další užitečné materiály.

Online tutoriály a kurzy:

• Existuje mnoho online tutoriálů a kurzů, které vás provedou tvorbou WPF aplikací:
• Microsoft Learn: Nabízí bezplatné kurzy pro začátečníky i pokročilé vývojáře WPF: https://learn.microsoft.com/en-us/dotnet/desktop/wpf/?view=netdesktop-8.0
• Udemy: Platforma s širokou nabídkou placených i bezplatných kurzů o WPF: https://www.udemy.com/topic/windows-presentation-foundation/
• Pluralsight: Platforma s placenými kurzy pro vývojáře všech úrovní: https://www.pluralsight.com/courses/wpf-fundamentals
• YouTube: Najdete zde mnoho videonávodů a tutoriálů o WPF: https://www.youtube.com/watch?v=gSfMNjWNoX0

Fóra a komunity WPF vývojářů:

• Stack Overflow: Platforma pro zodpovídání otázek a sdílení znalostí mezi vývojáři: https://stackoverflow.com/questions/tagged/wpf
• WPF Forum: Fórum zaměřené na WPF vývoj: https://learn.microsoft.com/en-us/dotnet/desktop/wpf/getting-started/community-feedback?view=netframeworkdesktop-4.8
• Reddit WPF: Subreddit pro WPF vývojáře: https://www.reddit.com/r/dotnet/comments/zpp8wj/wpf_is_good/

Knihy a další publikace:

• WPF in Action: Kniha od Matthew MacDonald: https://github.com/adamshe/books/blob/master/WPF%20in%20Action%20with%20Visual%20Studio%202008.pdf
• Pro WPF: Kniha od Charles Petzold: https://www.amazon.com/Pro-WPF-4-5-Presentation-Foundation/dp/1430243651
• WPF Unleashed: Kniha od Adam Nathan: https://www.amazon.com/WPF-4-5-Unleashed-Adam-Nathan/dp/0672336979

Kromě výše uvedených zdrojů existuje mnoho dalších online a offline materiálů, které vám pomohou naučit se WPF. Nebojte se prozkoumávat a experimentovat, abyste našli ty nejlepší zdroje pro vaše potřeby a preferovaný styl učení.

Dodatek

Slovník pojmů:

• XAML: Extensible Application Markup Language – jazyk pro definici uživatelského rozhraní WPF aplikací.
• MVVM: Model-View-ViewModel – architektonický vzor pro WPF aplikace.
• Data binding: Propojení dat s UI.
• Příkazy a události: Mechanismy pro interakci s uživatelem.
• Styly a zdroje: Definice a používání vzhledu a chování UI.
• 3D grafika a animace: Vytváření 3D objektů a animací v UI.
• Knihovny a frameworky: Nástroje pro usnadnění vývoje WPF aplikací.
• Dokumentace a tutoriály: Zdroje informací a návodů pro WPF vývojáře.

Klávesové zkratky:

• Ctrl+Z: Zpět.
• Ctrl+Y: Znovu.
• Ctrl+C: Kopírovat.
• Ctrl+V: Vložit.
• Ctrl+X: Vyjmout.
• Ctrl+A: Vybrat vše.
• Ctrl+F: Najít.
• Ctrl+H: Nahradit.
• Ctrl+S: Uložit.
• Ctrl+Shift+B: Spustit ladění.

Odkazy na online zdroje:

• Dokumentace WPF: https://learn.microsoft.com/cs-cz/dotnet/desktop/wpf/?view=netdesktop-8.0
• Fórum WPF: https://learn.microsoft.com/en-us/dotnet/desktop/wpf/getting-started/community-feedback?view=netframeworkdesktop-4.8
• Stack Overflow: https://stackoverflow.com/questions/tagged/wpf
• WPF na GitHubu: https://github.com/topics/wpf

Kde najít knihy o WPF / XAML?

Prodejci:

• Amazon.com: https://www.amazon.com/
• Barnes & Noble: https://www.barnesandnoble.com/
• Books-A-Million: https://www.booksamillion.com/
• Powell’s Books: https://www.powells.com/

• Knihy pokrývající C# obecně: I když nejsou přímo zaměřené na WPF, kvalitní kniha o C# vás může naučit základy jazyka, které pro vývoj WPF aplikací potřebujete. Zkuste hledat knihy určené alespoň částečně pro vizuální vývoj v C#.
• Blogy a online články: Existuje množství českých webů věnujících se programování, které články a tutoriály o WPF mívají. Zkuste hledat na těchto webech:
  • ITNetwork.cz: https://www.itnetwork.cz/
  • Živě.cz: https://www.zive.cz/
  • Root.cz: https://www.root.cz/
• Vysokoškolská skripta: Některé vysoké školy a univerzity poskytují volně přístupná skripta. Hledejte univerzity s obory zaměřenými na informatiku a projděte, zda nemají v seznamu materiálů něco o WPF.
• Překlady knih: Je možné, že by mohly existovat překlady některých známých anglických knih o WPF. Zkuste takové překlady pohledat v online knihkupectvích.

Učení WPF v češtině bohužel bude vyžadovat větší úsilí v hledání vhodných materiálů. Nebojte se ale využít i výborné anglické zdroje, které jsou dostupné – mnoho českých programátorů je v angličtině zdatných, takže případné dotazy na fórech a podobně budou mít velkou šanci na zodpovězení.

Další užitečné odkazy:

• Udemy: https://www.udemy.com/
• Pluralsight: https://www.pluralsight.com/
• YouTube: https://www.youtube.com/

Doufám, že vám tato příručka pomohla naučit se základy WPF a že vám bude sloužit jako užitečný referenční materiál v budoucnu.