Přehled grafického subsystému WPF (Windows Presentation Foundation)

Článek
10/18/2023

Windows Presentation Foundation (WPF) umožňuje vytvářet desktopové klientské aplikace pro Windows s vizuálně ohromujícími uživatelskými prostředími.

Contoso Healthcare UI sample

Jádrem WPF je vykreslovací modul nezávislý na rozlišení a vektorové vykreslování, který je vytvořený tak, aby využíval výhod moderního grafického hardwaru. WPF rozšiřuje jádro o komplexní sadu funkcí vývoje aplikací, mezi které patří XAML (Extensible Application Markup Language), ovládací prvky, datové vazby, rozložení, 2D a 3D grafika, animace, styly, šablony, dokumenty, média, text a typografie. WPF je součástí rozhraní .NET, takže můžete vytvářet aplikace, které začleňují jiné prvky rozhraní .NET API.

Tento přehled je určen novým uživatelům a zabývá se hlavními funkcemi a koncepty WPF.

Programování s WPF

WPF existuje jako podmnožina typů .NET, které jsou (většinou) umístěné v System.Windows oboru názvů. Pokud jste dříve vytvořili aplikace s .NET pomocí spravovaných technologií, jako jsou ASP.NET a model Windows Forms, měli byste znát základní programovací prostředí WPF. Vytvoříte instance tříd, nastavíte vlastnosti, metody volání a zpracujete události pomocí oblíbeného programovacího jazyka .NET, jako je C# nebo Visual Basic.

WPF obsahuje další programovací konstrukce, které vylepšují vlastnosti a události: vlastnosti závislostí a směrované události.

Značky a kód na pozadí

WPF umožňuje vyvíjet aplikaci jak pomocí značek, tak pomocí kódu na pozadí. To jsou možnosti, které by vývojáři v ASP.NET už měli znát. V obecné rovině využijete značky XAML, pomocí kterých implementujete vzhled aplikace, a ve spravovaných programovacích jazycích (kódu na pozadí) implementujete její chování. Takové oddělení vzhledu od chování má tyto výhody:

Náklady na vývoj a údržbu se snižují, protože kód specifický pro vzhled není úzce propojený s kódem specifickým pro chování.
Vývoj je efektivnější, protože návrháři můžou implementovat vzhled aplikace souběžně s vývojáři, kteří implementují její chování.
Globalizace a lokalizace pro aplikace WPF je jednodušší.

Značkování

XAML je značkovací jazyk založený na jazyku XML, který deklarativně implementuje vzhled aplikace. Obvykle ho používáte k vytváření oken, dialogových oken, stránek a uživatelských ovládacích prvků a k jejich vyplnění ovládacími prvky, obrazci a grafikou.

Následující ukázka používá XAML k implementaci vzhledu okna, které obsahuje jedno tlačítko:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    Title="Window with Button"
    Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button">Click Me!</Button>

</Window>

Konkrétně tento XAML definuje okno a tlačítko pomocí Window prvků a Button prvků. Každý element má nakonfigurované atributy, třeba atribut Title elementu Window, který určuje text záhlaví okna. WPF za běhu tyto elementy a atributy definované ve značkách převádí na instance tříd WPF. Například element Window se převede na instanci třídy Window, jejíž vlastnost Title je hodnota atributu Title.

Následující obrázek znázorňuje uživatelské rozhraní definované pomocí XAML v předchozím příkladu:

A window that contains a button

Vzhledem k tomu, že XAML je založený na jazyce XML, uživatelské rozhraní, se kterým vytváříte, se sestavuje v hierarchii vnořených elementů označovaných jako strom elementů. Strom elementů nabízí logický a intuitivní způsob, jak vytvářet a spravovat uživatelská rozhraní.

Code-behind

Hlavním chováním aplikace je implementovat funkce, které reagují na interakce uživatelů, včetně zpracování událostí (například kliknutí na nabídku, panel nástrojů nebo tlačítko) a volání obchodní logiky a logiky přístupu k datům v reakci. Ve WPF se toto chování implementuje v kódu přidruženému ke značkám. Tomuto typu kódu se říká code-behind (kód na pozadí). Následující příklad ukazuje aktualizované značky z předchozího příkladu a kód na pozadí:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.AWindow"
    Title="Window with Button"
    Width="250" Height="100">

  <!-- Add button to window -->
  <Button Name="button" Click="button_Click">Click Me!</Button>

</Window>

using System.Windows; // Window, RoutedEventArgs, MessageBox

namespace SDKSample
{
    public partial class AWindow : Window
    {
        public AWindow()
        {
            // InitializeComponent call is required to merge the UI
            // that is defined in markup with this class, including  
            // setting properties and registering event handlers
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked.
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}

Namespace SDKSample

    Partial Public Class AWindow
        Inherits System.Windows.Window

        Public Sub New()

            ' InitializeComponent call is required to merge the UI
            ' that is defined in markup with this class, including  
            ' setting properties and registering event handlers
            InitializeComponent()

        End Sub

        Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)

            ' Show message box when button is clicked.
            MessageBox.Show("Hello, Windows Presentation Foundation!")

        End Sub

    End Class

End Namespace

V tomto příkladu kód-behind implementuje třídu, která je odvozena z Window třídy. Atribut x:Class se používá k přidružení značky ke třídě kódu za kódem. Z konstruktoru třídy kódu na pozadí se zavolá InitializeComponent, aby se sloučilo uživatelské rozhraní definované ve značkách a třída kódu na pozadí. (InitializeComponent vygeneruje se pro vás při sestavení aplikace, a proto ji nemusíte implementovat ručně.) Kombinace x:Class a InitializeComponent zajištění správné inicializace implementace při každém vytvoření. Třída kódu za sebou také implementuje obslužnou rutinu události pro událost tlačítka Click . Po kliknutí na tlačítko obslužná rutina události zobrazí okno se zprávou voláním System.Windows.MessageBox.Show metody.

Následující obrázek znázorňuje výsledek kliknutí na tlačítko:

A MessageBox

Ovládací prvky

Uživatelská prostředí zajišťovaná modelem aplikace jsou konstruované ovládací prvky. Ve WPF je ovládací prvek zastřešující termín, který se vztahuje na kategorii tříd WPF, které jsou hostované v okně nebo stránce, mají uživatelské rozhraní a implementují určité chování.

Další informace najdete v části o ovládacích prvcích.

Ovládací prvky WPF podle funkce

Tady je seznam integrovaných ovládacích prvků WPF:

Tlačítka: Button a RepeatButton
Zobrazení dat: DataGrid, ListView a TreeView
Zobrazení a výběr kalendářních dat: Calendar a DatePicker
Dialogová okna: OpenFileDialog, PrintDialog a SaveFileDialog
Digitální inkoust: InkCanvas a InkPresenter
Dokumenty: DocumentViewer, FlowDocumentPageViewer, FlowDocumentReader, FlowDocumentScrollViewer a StickyNoteControl
Vstup: TextBox, RichTextBox a PasswordBox
Rozložení: Border, BulletDecorator, Canvas, DockPanel, Expander, Grid, GridView, GridSplitter, GroupBox, Panel, ResizeGrip, Separator, ScrollBar, ScrollViewer, StackPanel, Thumb, Viewbox, VirtualizingStackPanel, Window a WrapPanel
Média: Image, MediaElement a SoundPlayerAction
Nabídky: ContextMenu, Menu a ToolBar
Navigace: Frame, Hyperlink, Page, NavigationWindow a TabControl
Výběr: CheckBox, ComboBox, ListBox, RadioButton a Slider
Uživatelské informace: AccessText, Label, Popup, ProgressBar, StatusBar, TextBlock a ToolTip

Vstup a příkazy

Ovládací prvky nejčastěji detekují uživatelský vstup a reagují na něj. Vstupní systém WPF používá přímé i směrované události k podpoře zadávání textu, správy fokusu a umístění myši.

Aplikace mají často složité požadavky na vstup. WPF poskytuje systém příkazů , který odděluje akce uživatelského vstupu od kódu, který na tyto akce reaguje.

Rozložení

Při vytváření uživatelského rozhraní uspořádáváte ovládací prvky podle pozice a velikosti tak, aby utvořily rozložení. Hlavním požadavkem jakéhokoli rozložení je, aby se přizpůsobovalo změnám velikosti okna a nastavením zobrazení. Abyste nemuseli psát kód, který rozložení v takových situacích přizpůsobí, WPF nabízí prvotřídní rozšiřitelný systém rozložení.

Základním kamenem tohoto systému rozložení jsou relativní pozice, které zvyšují schopnost přizpůsobit se měnícím se situacím okna a zobrazení. Kromě toho systém rozložení spravuje vyjednávání mezi ovládacími prvky a určuje rozložení. Vyjednávání je dvoustupňový proces: nejprve ovládací prvek řekne nadřazené, jaké umístění a velikost vyžaduje; druhý, nadřazený říká ovládacímu prvku, jaký prostor může mít.

Systém rozložení je podřízeným ovládacím prvkům k dispozici prostřednictvím základních tříd WPF. Pro běžná rozložení, jako jsou mřížky nebo skládaná a kotvená zobrazení, obsahuje WPF několik mechanismů rozložení:

Canvas: Podřízené ovládací prvky poskytují své vlastní rozložení.
DockPanel: Podřízené ovládací prvky jsou zarovnané na kraje panelu.
Grid: Podřízené ovládací prvky se umisťují do řádků a sloupců.
StackPanel: Podřízené ovládací prvky se skládají buď svisle, nebo vodorovně.
VirtualizingStackPanel: Podřízené ovládací prvky jsou virtualizované a uspořádané na jeden řádek, který je orientovaný buď svisle, nebo vodorovně.
WrapPanel: Podřízené ovládací prvky jsou umístěny v pořadí zleva doprava a zabaleny na další řádek, pokud je na aktuálním řádku více ovládacích prvků, než umožňuje mezera.

V následujícím příkladu se využívá DockPanel k rozložení několika ovládacích prvků TextBox:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.LayoutWindow"
    Title="Layout with the DockPanel" Height="143" Width="319">
  
  <!--DockPanel to layout four text boxes--> 
  <DockPanel>
    <TextBox DockPanel.Dock="Top">Dock = "Top"</TextBox>
    <TextBox DockPanel.Dock="Bottom">Dock = "Bottom"</TextBox>
    <TextBox DockPanel.Dock="Left">Dock = "Left"</TextBox>
    <TextBox Background="White">This TextBox "fills" the remaining space.</TextBox>
  </DockPanel>

</Window>

DockPanel umožňuje podřízeným ovládacím prvkům TextBox poskytnout informaci o tom, jak je uspořádat. Kvůli tomu DockPanel implementuje přidruženou vlastnost Dock, kterou mají k dispozici podřízené ovládací prvky. Každý z nich tak může určit styl kotvení.

Poznámka:

Vlastnost implementovaná nadřazeným ovládacím prvkem, kterou můžou používat podřízené ovládací prvky, je konstrukce WPF s názvem přidružená vlastnost.

Následující obrázek znázorňuje výsledek značek XAML v předchozím příkladu:

DockPanel page

Datová vazba

Většina aplikací vznikla proto, aby uživatelům nabídla možnosti zobrazovat a upravovat data. U aplikací WPF je práce ukládání a přístupu k datům již poskytována technologiemi, jako jsou SQL Server a ADO .NET. Po získání přístupu k datům a jejich načtení do spravovaných objektů aplikace nastává v aplikacích WPF ta těžká část. V podstatě je zapotřebí vyřešit dvě věci:

Kopírování dat ze spravovaných objektů do ovládacích prvků, kde se data dají zobrazit a upravit
Zajištění, že změny dat provedené v ovládacích prvcích se zkopírují zpět do spravovaných objektů

Pro zjednodušení vývoje aplikací poskytuje WPF modul pro datové vazby, který tyto kroky automaticky provede. Základní jednotkou modulu pro datové vazby je třída Binding, jejímž úkolem je vytvořit vazbu mezi ovládacím prvkem (cílem vazby) a datovým objektem (zdrojem vazby). Tento vztah je znázorněn na následujícím obrázku:

Basic data binding diagram

Další příklad ukazuje, jak vytvořit vazbu na TextBox instanci vlastního Person objektu. Implementace Person se zobrazí v následujícím kódu:

Namespace SDKSample

    Class Person

        Private _name As String = "No Name"

        Public Property Name() As String
            Get
                Return _name
            End Get
            Set(ByVal value As String)
                _name = value
            End Set
        End Property

    End Class

End Namespace

namespace SDKSample
{
    class Person
    {
        string name = "No Name";

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
    }
}

Následující kód vytvoří TextBox vazbu na instanci vlastního Person objektu:

 <Window
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Class="SDKSample.DataBindingWindow">

   <!-- Bind the TextBox to the data source (TextBox.Text to Person.Name) -->
   <TextBox Name="personNameTextBox" Text="{Binding Path=Name}" />

 </Window>

Imports System.Windows ' Window

Namespace SDKSample

    Partial Public Class DataBindingWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()

            ' Create Person data source
            Dim person As Person = New Person()

            ' Make data source available for binding
            Me.DataContext = person

        End Sub

    End Class

End Namespace

using System.Windows; // Window

namespace SDKSample
{
    public partial class DataBindingWindow : Window
    {
        public DataBindingWindow()
        {
            InitializeComponent();

            // Create Person data source
            Person person = new Person();

            // Make data source available for binding
            this.DataContext = person;
        }
    }
}

V tomto příkladu je Person třída vytvořena v kódu za sebou a je nastavena jako datový kontext pro objekt DataBindingWindow. V kódu Text je vlastnost TextBox vázána Person.Name na vlastnost (pomocí{Binding ... } "" syntaxe XAML). Tento KÓD XAML říká WPF, aby sváže TextBox ovládací prvek s objektem Person , který je uložen ve DataContext vlastnosti okna.

Modul datových vazeb WPF poskytuje další podporu, která zahrnuje ověřování, řazení, filtrování a seskupování. Kromě toho datová vazba podporuje použití šablon dat k vytvoření vlastního uživatelského rozhraní pro svázaná data, když uživatelské rozhraní zobrazené standardními ovládacími prvky WPF není vhodné.

Další informace najdete v přehledu datových vazeb.

Grafika

WPF představuje rozsáhlou, škálovatelnou a flexibilní sadu grafických funkcí, které mají následující výhody:

Grafika nezávislá na rozlišení a zařízení. Základní měrnou jednotkou grafického systému WPF je pixel nezávislý na zařízení, který je 1/96. palce bez ohledu na skutečné rozlišení obrazovky a poskytuje základ pro vykreslování nezávislé na rozlišení a nezávisle na zařízení. Každý pixel nezávislý na zařízení automaticky mění své měřítko, aby odpovídal nastavení počtu bodů na palec (DPI) systému, na kterém se vykresluje.
Zvýšená přesnost. Souřadnicový systém WPF se měří v desetinných číslech s plovoucí desetinnou čárkou s dvojitou, nikoli jednoduchou přesností. I hodnoty transformace a neprůhlednosti se vyjadřují s dvojitou přesností. Navíc WPF podporuje široký barevný gamut (scRGB) a poskytuje integrovanou podporu pro správu vstupů z různých barevných prostorů.
Rozšířená podpora grafiky a animací. WPF zjednodušuje programování grafiky tím, že spravuje animační scény za vás; Nemusíte se starat o zpracování scény, vykreslovací smyčky a bilineární interpolaci. Kromě toho WPF nabízí podporu testování průchodu a plnou podporu alfakompozice.
Hardwarová akcelerace. Grafický systém WPF využívá grafický hardware, aby se minimalizovalo využití procesoru.

2D obrazce

WPF poskytuje knihovnu běžných vektorově nakreslených 2D obrazců, jako jsou obdélníky a tři tečky, které jsou znázorněny na následujícím obrázku:

Ellipses and rectangles

Zajímavou schopností obrazců je, že nejsou jen pro zobrazení; obrazce implementují mnoho funkcí, které očekáváte od ovládacích prvků, včetně klávesnice a vstupu myši. Následující příklad ukazuje MouseUp událost Ellipse zpracování:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.EllipseEventHandlingWindow"
    Title="Click the Ellipse">
    <Ellipse Name="clickableEllipse" Fill="Blue" MouseUp="clickableEllipse_MouseUp" />
</Window>

Imports System.Windows ' Window, MessageBox
Imports System.Windows.Input ' MouseButtonEventArgs

Namespace SDKSample

    Public Class EllipseEventHandlingWindow
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub clickableEllipse_MouseUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            MessageBox.Show("You clicked the ellipse!")
        End Sub

    End Class

End Namespace

using System.Windows; // Window, MessageBox
using System.Windows.Input; // MouseButtonEventHandler

namespace SDKSample
{
    public partial class EllipseEventHandlingWindow : Window
    {
        public EllipseEventHandlingWindow()
        {
            InitializeComponent();
        }

        void clickableEllipse_MouseUp(object sender, MouseButtonEventArgs e)
        {
            // Display a message
            MessageBox.Show("You clicked the ellipse!");
        }
    }
}

Následující obrázek znázorňuje, co je vytvořeno předchozím kódem:

A window with the text

Další informace naleznete v tématu Obrazce a základní výkres v přehledu WPF.

2D geometrie

2D obrazce poskytované ve WPF odpovídají běžné sadě základních obrazců. Možná ale budete muset vytvořit vlastní obrazce, abyste usnadnili návrh přizpůsobeného uživatelského rozhraní. Pro tento účel poskytuje WPF geometrie. Následující obrázek znázorňuje použití geometrií k vytvoření vlastního obrazce, který lze nakreslit přímo, použít jako štětec nebo použít k oříznutí jiných obrazců a ovládacích prvků.

Path Objekty lze použít k kreslení uzavřených nebo otevřených obrazců, více obrazců a dokonce k zakřiveným obrazcům.

Geometry Objekty lze použít k oříznutí, testování hit-testování a vykreslování 2D grafických dat.

Various uses of a path

Další informace najdete v přehledu geometrie.

2D efekty

Do podmnožiny funkcí 2D grafiky ve WPF patří vizuální efekty, třeba přechody, bitové mapy, kreslení, malování s videi, otáčení, změna měřítka a zkosení. To vše se dosahuje štětci; Následující obrázek ukazuje několik příkladů:

Illustration of different brushes

Další informace najdete v přehledu štětců WPF.

3D vykreslování

WPF navíc obsahuje funkce pro vykreslování 3D grafiky, které se integrují s 2D grafikou a umožňují vytvářet působivější a zajímavější uživatelská rozhraní. Například následující obrázek znázorňuje 2D obrázky vykreslené na 3D tělesech:

Visual3D sample screen shot

Další informace najdete v přehledu 3D grafiky.

Animace

Podpora animací ve WPF umožňuje ovládací prvky zvětšovat, třást s nimi, otáčet je nebo stmívat a vytvářet tak zajímavé přechody mezi stránkami a další efekty. Animovat je možné většinu tříd WPF, dokonce i ty vlastní. Následující obrázek znázorňuje jednoduchou animaci v praxi:

Images of an animated cube

Další informace najdete v přehledu animace.

Médium

Jedním ze způsobů, jak sdělit bohatý obsah, je použití audiovizuálních médií. WPF poskytuje zvláštní podporu obrázků, videa a zvuku.

Obrázky

Obrázky jsou pro většinu aplikací běžné a WPF nabízí několik způsobů jejich použití. Následující obrázek znázorňuje uživatelské rozhraní se seznamem, který obsahuje miniatury obrázků. Když vyberete miniaturu, obrázek se zobrazí v plné velikosti.

Thumbnail images and a full-size image

Další informace najdete v tématu Přehled obrázků.

Video a zvuk

Ovládací MediaElement prvek je schopen přehrávat video i zvuk a je dostatečně flexibilní, aby byl základem pro vlastní přehrávač médií. Následující kód XAML implementuje přehrávač médií:

<MediaElement 
  Name="myMediaElement" 
  Source="media/wpf.wmv" 
  LoadedBehavior="Manual" 
  Width="350" Height="250" />

Okno na následujícím obrázku znázorňuje MediaElement ovládací prvek v akci:

A MediaElement control with audio and video

Další informace naleznete v tématu Grafika a multimédia.

Text a typografie

Pro usnadnění vykreslování textu ve vysoké kvalitě nabízí WPF následující funkce:

Podpora písem OpenType
Vylepšení ClearType
Vysoký výkon, který využívá hardwarovou akceleraci
Integrace textu s multimédii, grafikou a animacemi
Podpora mezinárodních písem a náhradních mechanismů

Na ukázku integrace textu s grafikou následující obrázek znázorňuje využití dekorací textu:

Text with various text decorations

Další informace najdete v části o typografii ve Windows Presentation Foundation.

Přizpůsobení aplikací WPF

Do této chvíle jste viděli základní stavební bloky WPF pro vývoj aplikací. Pomocí modelu aplikace hostujete a doručujete obsah aplikace, který se skládá převážně z ovládacích prvků. Chcete-li zjednodušit uspořádání ovládacích prvků v uživatelském rozhraní a zajistit, aby uspořádání bylo zachováno v případě změn velikosti okna a nastavení zobrazení, použijete systém rozložení WPF. Vzhledem k tomu, že většina aplikací umožňuje uživatelům pracovat s daty, můžete pomocí datové vazby omezit práci integrace uživatelského rozhraní s daty. Pro zlepšení vizuálního vzhledu aplikace využíváte ucelenou paletu funkcí pro grafiku, animace a multimédia, kterou WPF nabízí.

Základy ale často nestačí k vytváření a správě skutečně jedinečného a vizuálně působivého uživatelského prostředí. Standardní ovládací prvky WPF nemusí odpovídat požadovanému vzhledu vaší aplikace. Data se nemusí zobrazovat tím nejefektivnějším způsobem. Celkové uživatelské prostředí vaší aplikace nemusí být vhodné pro výchozí vzhled a chování motivů Windows. Prezentační technologie v mnoha ohledech potřebuje vizuální rozšiřitelnost stejně jako jakýkoli jiný typ rozšiřitelnosti.

Z tohoto důvodu POSKYTUJE WPF různé mechanismy pro vytváření jedinečných uživatelských prostředí, včetně bohatého con režim stanu l pro ovládací prvky, triggery, řídicí a datové šablony, styly, prostředky uživatelského rozhraní a motivy a skiny.

Con režim stanu l

Hlavním účelem většiny ovládacích prvků WPF je zobrazení obsahu. Ve WPF se typu a počtu položek, ze kterých se může obsah ovládacího prvku skládat, říká model obsahu ovládacího prvku. Některé ovládací prvky mohou obsahovat jednu položku a typ obsahu; Například obsah a TextBox je řetězcová hodnota, která je přiřazena Text vlastnosti. Následující příklad nastaví obsah TextBox:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.TextBoxContentWindow"
    Title="TextBox Content">

    <TextBox Text="This is the content of a TextBox." />
</Window>

Následující obrázek znázorňuje výsledek:

A TextBox control that contains text

Jiné ovládací prvky však mohou obsahovat více položek různých typů obsahu; obsah objektu Button, určený vlastností Content , může obsahovat řadu položek, včetně ovládacích prvků rozložení, textu, obrázků a obrazců. Následující příklad ukazuje Button s obsahem, který obsahuje DockPanel, a , Label Bordera , a a MediaElement:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ButtonContentWindow"
    Title="Button Content">

  <Button Margin="20">
    <!-- Button Content -->
    <DockPanel Width="200" Height="180">
      <Label DockPanel.Dock="Top" HorizontalAlignment="Center">Click Me!</Label>
      <Border Background="Black" BorderBrush="Yellow" BorderThickness="2"
        CornerRadius="2" Margin="5">
        <MediaElement Source="media/wpf.wmv" Stretch="Fill" />
      </Border>
    </DockPanel>
  </Button>
</Window>

Následující obrázek znázorňuje obsah tohoto tlačítka:

A button that contains multiple types of content

Další informace o druzích obsahu podporovaných různými ovládacími prvky najdete v modelu obsahu WPF.

Aktivační události

I když je hlavním účelem značek XAML implementovat vzhled aplikace, dá se XAML použít i pro některé aspekty jejího chování. Příkladem může být používání aktivačních událostí ke změně vzhledu aplikace podle interakcí uživatele. Další informace najdete v části o stylech a šablonách.

Šablony ovládacích prvků

Výchozí uživatelská rozhraní pro ovládací prvky WPF se obvykle vytvářejí z jiných ovládacích prvků a obrazců. Například Button se skládá z ovládacích prvků ButtonChrome a ContentPresenter. ButtonChrome nabízí standardní vzhled tlačítka a ContentPresenter zobrazuje jeho obsah, jak jej určuje vlastnost Content.

Někdy může být výchozí vzhled ovládacího prvku nekongruentní s celkovým vzhledem aplikace. V takovém případě můžete pomocí ControlTemplate změnit vzhled uživatelského rozhraní ovládacího prvku, aniž byste museli měnit jeho obsah a chování.

Následující příklad ukazuje, jak změnit vzhled ovládacího Button prvku pomocí ControlTemplate:

<Window 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.ControlTemplateButtonWindow"
  Title="Button with Control Template" Height="158" Width="290">

  <!-- Button using an ellipse -->
  <Button Content="Click Me!" Click="button_Click">
    <Button.Template>
      <ControlTemplate TargetType="{x:Type Button}">
        <Grid Margin="5">
          <Ellipse Stroke="DarkBlue" StrokeThickness="2">
            <Ellipse.Fill>
              <RadialGradientBrush Center="0.3,0.2" RadiusX="0.5" RadiusY="0.5">
                <GradientStop Color="Azure" Offset="0.1" />
                <GradientStop Color="CornflowerBlue" Offset="1.1" />
              </RadialGradientBrush>
            </Ellipse.Fill>
          </Ellipse>
          <ContentPresenter Name="content" HorizontalAlignment="Center" 
            VerticalAlignment="Center"/>
        </Grid>
      </ControlTemplate>
    </Button.Template>

  </Button>

</Window>

using System.Windows; // Window, RoutedEventArgs, MessageBox

namespace SDKSample
{
    public partial class ControlTemplateButtonWindow : Window
    {
        public ControlTemplateButtonWindow()
        {
            InitializeComponent();
        }

        void button_Click(object sender, RoutedEventArgs e)
        {
            // Show message box when button is clicked
            MessageBox.Show("Hello, Windows Presentation Foundation!");
        }
    }
}

Imports System.Windows ' Window, RoutedEventArgs, MessageBox

Namespace SDKSample

    Public Class ControlTemplateButtonWindow
        Inherits Window

        Public Sub New()

            InitializeComponent()

        End Sub

        Private Sub button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
            MessageBox.Show("Hello, Windows Presentation Foundation!")
        End Sub

    End Class

End Namespace

V tomto příkladu bylo výchozí uživatelské rozhraní tlačítka nahrazeno Ellipse tmavě modrým ohraničením a je vyplněno znakem RadialGradientBrush. Ovládací ContentPresenter prvek zobrazí obsah Buttontlačítka "Click Me!" (Kliknout na mě). Button Po kliknutí se Click událost stále vyvolá jako součást výchozího Button chování ovládacího prvku. Výsledek je znázorněn na následujícím obrázku:

An elliptical button and a second window

Šablony dat

Zatímco šablona ovládacího prvku umožňuje určit vzhled ovládacího prvku, šablona dat umožňuje určit vzhled jeho obsahu. Pomocí šablon dat se často vylepšuje způsob zobrazování svázaných dat. Následující obrázek znázorňuje výchozí vzhled pro ListBox s vazbou na kolekci objektů Task, kde každá úloha má název, popis a prioritu:

A list box with the default appearance

Výchozí vzhled je to, co byste od ovládacího prvku ListBox očekávali. Každá úloha s výchozím vzhledem však zobrazuje pouze svůj název. Pokud chcete zobrazovat název, popis a prioritu úlohy, výchozí vzhled položek svázaného seznamu ovládacího prvku ListBox se musí změnit pomocí DataTemplate. Následující XAML definuje takový DataTemplate, který se použije pro každý úkol pomocí atributu ItemTemplate :

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.DataTemplateWindow"
  Title="With a Data Template">
  <Window.Resources>
    <!-- Data Template (applied to each bound task item in the task collection) -->
    <DataTemplate x:Key="myTaskTemplate">
      <Border Name="border" BorderBrush="DarkSlateBlue" BorderThickness="2"
        CornerRadius="2" Padding="5" Margin="5">
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
            <RowDefinition/>
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition />
          </Grid.ColumnDefinitions>
          <TextBlock Grid.Row="0" Grid.Column="0" Padding="0,0,5,0" Text="Task Name:"/>
          <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=TaskName}"/>
          <TextBlock Grid.Row="1" Grid.Column="0" Padding="0,0,5,0" Text="Description:"/>
          <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=Description}"/>
          <TextBlock Grid.Row="2" Grid.Column="0" Padding="0,0,5,0" Text="Priority:"/>
          <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=Priority}"/>
        </Grid>
      </Border>
    </DataTemplate>
  </Window.Resources>

  <!-- UI -->
  <DockPanel>
    <!-- Title -->
    <Label DockPanel.Dock="Top" FontSize="18" Margin="5" Content="My Task List:"/>

    <!-- Data template is specified by the ItemTemplate attribute -->
    <ListBox
      ItemsSource="{Binding}"
      ItemTemplate="{StaticResource myTaskTemplate}"
      HorizontalContentAlignment="Stretch"
      IsSynchronizedWithCurrentItem="True"
      Margin="5,0,5,5" />

 </DockPanel>
</Window>

Následující obrázek znázorňuje účinek tohoto kódu:

List box that uses a data template

Všimněte si, že ListBox chování a celkový vzhled se zachoval. Změnil se pouze vzhled obsahu zobrazeného seznamem.

Další informace najdete v přehledu šablon dat.

Styly

Styly umožňují vývojářům a návrhářům standardizovat konkrétní vzhled svého produktu. WPF nabízí silný model stylu, jehož základem je element Style. Následující příklad vytvoří styl, který nastaví barvu pozadí pro každé Button okno na Orange:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.StyleWindow"
    Title="Styles">
    
    <Window.Resources>
        <!-- Style that will be applied to all buttons for this window -->
        <Style TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Orange" />
            <Setter Property="BorderBrush" Value="Crimson" />
            <Setter Property="FontSize" Value="20" />
            <Setter Property="FontWeight" Value="Bold" />
            <Setter Property="Margin" Value="5" />
        </Style>
    </Window.Resources>
    <StackPanel>

        <!-- This button will have the style applied to it -->
        <Button>Click Me!</Button>

        <!-- This label will not have the style applied to it -->
        <Label>Don't Click Me!</Label>

        <!-- This button will have the style applied to it -->
        <Button>Click Me!</Button>
        
    </StackPanel>
</Window>

Jelikož tento styl cílí na všechny prvky Button, automaticky se zavede všem tlačítkům v okně, jak je znázorněno na tomto obrázku:

Two orange buttons

Další informace najdete v části o stylech a šablonách.

Zdroje informací

Ovládací prvky v aplikaci by měly sdílet stejný vzhled, který může zahrnovat cokoli od písem a barev pozadí po šablony ovládacích prvků, šablony dat a styly. S využitím podpory prostředků uživatelských rozhraní ve WPF můžete tyto prostředky zapouzdřit do jednoho místa, aby se daly opakovaně používat.

Následující příklad definuje společnou barvu pozadí sdílenou prvky Button a Label:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.ResourcesWindow"
    Title="Resources Window">

  <!-- Define window-scoped background color resource -->
  <Window.Resources>
    <SolidColorBrush x:Key="defaultBackground" Color="Red" />
  </Window.Resources>

  <!-- Button background is defined by window-scoped resource -->
  <Button Background="{StaticResource defaultBackground}">One Button</Button>

  <!-- Label background is defined by window-scoped resource -->
  <Label Background="{StaticResource defaultBackground}">One Label</Label>
</Window>

Tento příklad implementuje prostředek barvy pozadí pomocí elementu Window.Resources property. Tento zdroj je k dispozici pro všechny podřízené Windowpoložky . Existují různé rozsahy prostředků, včetně následujících, uvedených v pořadí, ve kterém jsou vyřešeny:

Jednotlivý ovládací prvek (pomocí zděděné System.Windows.FrameworkElement.Resources vlastnosti)
A Window nebo a Page (také pomocí zděděné System.Windows.FrameworkElement.Resources vlastnosti).
An Application (pomocí System.Windows.Application.Resources vlastnosti).

Různé rozsahy poskytují flexibilitu s ohledem na způsob, jakým definujete a sdílíte prostředky.

Jako alternativu k přímému přidružení prostředků k určitému oboru můžete jeden nebo více prostředků zabalit pomocí samostatného ResourceDictionary prostředku, na který se dá odkazovat v jiných částech aplikace. Například následující příklad definuje výchozí barvu pozadí ve slovníku prostředků:

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

  <!-- Define background color resource -->
  <SolidColorBrush x:Key="defaultBackground" Color="Red" />

  <!-- Define other resources -->
</ResourceDictionary>

Následující příklad odkazuje na slovník prostředků definovaný v předchozím příkladu, aby se sdílel napříč aplikací:

<Application
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.App">

  <Application.Resources>
    <ResourceDictionary>
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="BackgroundColorResources.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

Zdroje a slovníky prostředků jsou základem podpory WPF pro motivy a skiny.

Další informace najdete v tématu Zdroje informací.

Vlastní ovládací prvky

I když WPF nabízí rozsáhlou podporu přizpůsobení, může dojít k situacím, kdy stávající ovládací prvky WPF nesplňují požadavky aplikace nebo jejích uživatelů. K tomu může dojít v těchto případech:

Uživatelské rozhraní, které potřebujete, se nedá vytvořit přizpůsobením vzhledu a chování stávajících implementací WPF.
Chování, které požadujete, není podporováno (nebo není snadno podporováno) stávajícími implementacemi WPF.

V takových situacích však můžete využít jeden ze tří modelů WPF a vytvořit nový ovládací prvek. Každý model cílí na konkrétní scénář a vyžaduje, aby byl váš vlastní ovládací prvek odvozený od konkrétní základní třídy WPF. Těmito třemi modely jsou:

Model uživatelských ovládacích prvků Vlastní ovládací prvek je odvozený z UserControl a sestává z jednoho nebo více jiných ovládacích prvků.
Řídicí model. Vlastní ovládací prvek je odvozen z Control a slouží k sestavení implementací, které oddělují jejich chování od jejich vzhledu pomocí šablon, podobně jako většina ovládacích prvků WPF. Odvození z Control nabízí větší svobodu při vytváření vlastních uživatelských rozhraní než uživatelské ovládací prvky, ale může být náročnější.
Model elementu rozhraní Vlastní ovládací prvek je odvozený z FrameworkElement a jeho vzhled se definuje vlastní logikou vykreslování (nikoli šablonami).

Následující příklad ukazuje vlastní číselný nahoru/dolů ovládací prvek, který je odvozen z UserControl:

<UserControl
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="SDKSample.NumericUpDown">

  <Grid>

    <Grid.RowDefinitions>
      <RowDefinition/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <!-- Value text box -->
    <Border BorderThickness="1" BorderBrush="Gray" Margin="2" Grid.RowSpan="2" 
      VerticalAlignment="Center" HorizontalAlignment="Stretch">
      <TextBlock Name="valueText" Width="60" TextAlignment="Right" Padding="5"/>
    </Border>

    <!-- Up/Down buttons -->
    <RepeatButton Name="upButton" Click="upButton_Click" Grid.Column="1" 
      Grid.Row="0">Up</RepeatButton>
    <RepeatButton Name="downButton" Click="downButton_Click" Grid.Column="1" 
      Grid.Row="1">Down</RepeatButton>

  </Grid>

</UserControl>

using System; // EventArgs
using System.Windows; // DependencyObject, DependencyPropertyChangedEventArgs,
                      // FrameworkPropertyMetadata, PropertyChangedCallback,
                      // RoutedPropertyChangedEventArgs
using System.Windows.Controls; // UserControl

namespace SDKSample
{
    public partial class NumericUpDown : UserControl
    {
        // NumericUpDown user control implementation
    }
}

imports System 'EventArgs
imports System.Windows 'DependencyObject, DependencyPropertyChangedEventArgs, 
                       ' FrameworkPropertyMetadata, PropertyChangedCallback, 
                       ' RoutedPropertyChangedEventArgs
imports System.Windows.Controls 'UserControl

Namespace SDKSample

    ' Interaction logic for NumericUpDown.xaml
    Partial Public Class NumericUpDown
        Inherits System.Windows.Controls.UserControl

        'NumericUpDown user control implementation

    End Class

End Namespace

Následující příklad znázorňuje XAML, který je nutný k začlenění uživatelského ovládacího prvku do Window:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SDKSample.UserControlWindow"
    xmlns:local="clr-namespace:SDKSample" 
    Title="User Control Window">

  <!-- Numeric Up/Down user control -->
  <local:NumericUpDown />

</Window>

Následující obrázek znázorňuje NumericUpDown ovládací prvek hostovaný v Window:

A custom UserControl

Další informace o vlastních ovládacích prvcích najdete v přehledu vytváření ovládacích prvků.

Osvědčené postupy PRO WPF

Stejně jako u jakékoli vývojové platformy lze WPF použít různými způsoby, jak dosáhnout požadovaného výsledku. Jako způsob, jak zajistit, aby aplikace WPF poskytovaly požadované uživatelské prostředí a obecně splňovaly požadavky cílové skupiny, jsou doporučené osvědčené postupy pro přístupnost, globalizaci a lokalizaci a výkon. Další informace naleznete zde:

Další kroky

Podívali jsme se na klíčové funkce WPF. Teď je čas vytvořit první aplikaci WPF.

Návod: Moje první desktopová aplikace WPF