WPF-ÜbersichtWPF overview

Mit Windows Presentation Foundation (WPF) können Sie Desktop-Clientanwendungen für Windows erstellen, die visuell herausragende Benutzeroberflächen haben.Windows Presentation Foundation (WPF) lets you create desktop client applications for Windows with visually stunning user experiences.

Contoso Healthcare-Beispiel

Der Kern von WPF ist eine auflösungsunabhängige und vektorbasierte Rendering-Engine, die die Leistungsfähigkeit moderner Grafikhardware nutzt.The core of WPF is a resolution-independent and vector-based rendering engine that is built to take advantage of modern graphics hardware. Dieser Kern wird durch WPF um mehrere Anwendungsentwicklungsfeatures erweitert, wozu Extensible Application Markup Language (XAML), Steuerelemente, Datenbindung, Layout, 2D- und 3D-Grafik, Animationen, Stile, Vorlagen, Dokumente, Medien, Text und Typographie zählen.WPF extends the core with a comprehensive set of application-development features that include Extensible Application Markup Language (XAML), controls, data binding, layout, 2D and 3D graphics, animation, styles, templates, documents, media, text, and typography. Da WPF in .NET Framework enthalten ist, können Sie Anwendungen erstellen, die andere Elemente der .NET Framework-Klassenbibliothek beinhalten.WPF is included in the .NET Framework, so you can build applications that incorporate other elements of the .NET Framework class library.

Diese Übersicht ist für Einsteiger gedacht und beschreibt die wichtigsten Funktionen und Konzepte von WPF.This overview is intended for newcomers and covers the key capabilities and concepts of WPF.

Programmieren mit WPFProgram with WPF

WPF ist eine Teilmenge von .NET Framework-Typen, die sich zum größten Teil im System.Windows -Namespace befinden.WPF exists as a subset of .NET Framework types that are for the most part located in the System.Windows namespace. Wenn Sie bereits Anwendungen mit .NET Framework und verwalteten Technologien wie ASP.NET und Windows Forms erstellt haben, sind Sie mit den Grundlagen der WPF-Programmierung vertraut. Sie instanziieren Klassen, legen Eigenschaften fest, rufen Methoden auf und behandeln Ereignisse und verwenden für all das Ihre bevorzugte .NET Framework-Programmiersprache, etwa C# oder Visual Basic.If you have previously built applications with .NET Framework using managed technologies like ASP.NET and Windows Forms, the fundamental WPF programming experience should be familiar; you instantiate classes, set properties, call methods, and handle events, all using your favorite .NET programming language, such as C# or Visual Basic.

WPF umfasst zusätzliche Programmierkonstrukte, mit denen Eigenschaften und Ereignisse erweitert werden: Abhängigkeitseigenschaften und Routingereignisse.WPF includes additional programming constructs that enhance properties and events: dependency properties and routed events.

Markup und CodeBehindMarkup and code-behind

WPF ermöglicht es Ihnen, eine Anwendung sowohl mit Markup als auch mit CodeBehindzu entwickeln, eine Vorgehensweise, mit der ASP.NET-Entwickler vertraut sein sollten.WPF lets you develop an application using both markup and code-behind, an experience with which ASP.NET developers should be familiar. Im Grundsatz verwenden Sie XAML-Markup, um die Darstellung einer Anwendung zu implementieren, und verwaltete Programmiersprachen (CodeBehind), um das Verhalten der Anwendung zu implementieren.You generally use XAML markup to implement the appearance of an application while using managed programming languages (code-behind) to implement its behavior. Diese Trennung von Darstellung und Verhalten bietet folgende Vorteile:This separation of appearance and behavior has the following benefits:

  • Entwicklungs- und Wartungskosten werden verringert, weil darstellungsspezifisches Markup nicht unmittelbar mit verhaltensspezifischem Code gekoppelt ist.Development and maintenance costs are reduced because appearance-specific markup is not tightly coupled with behavior-specific code.

  • Die Entwicklung ist effizienter, da Designer die Darstellung einer Anwendung implementieren können, während Entwickler gleichzeitig das Verhalten der Anwendung implementieren.Development is more efficient because designers can implement an application's appearance simultaneously with developers who are implementing the application's behavior.

  • DieGlobalisierung und Lokalisierung für WPF-Anwendungen wird stark vereinfacht.Globalization and localization for WPF applications is simplified.

MarkupMarkup

XAML ist eine auf XML basierende Markupsprache, mit der die Darstellung einer Anwendung deklarativ implementiert werden kann.XAML is an XML-based markup language that implements an application's appearance declaratively. Sie wird üblicherweise dazu verwendet, Fenster, Dialogfelder, Seiten und Benutzersteuerelemente zu erstellen und diese mit Steuerelementen, Formen und Grafiken zu füllen.You typically use it to create windows, dialog boxes, pages, and user controls, and to fill them with controls, shapes, and graphics.

Im folgenden Beispiel wird XAML verwendet, um die Darstellung eines Fensters zu implementieren, das eine einzelne Schaltfläche enthält.The following example uses XAML to implement the appearance of a window that contains a single button.

<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>

In diesem XAML-Code werden ein Fenster und eine Schaltfläche definiert, indem das Window - und das Button -Element verwendet werden.Specifically, this XAML defines a window and a button by using the Window and Button elements, respectively. Jedes Element wird mit Attributen konfiguriert. Hier wird beispielsweise das Window -Attribut des Title -Elements verwendet, um den Text für die Titelleiste des Fensters festzulegen.Each element is configured with attributes, such as the Window element's Title attribute to specify the window's title-bar text. Zur Laufzeit werden die im Markup definierten Elemente und Attribute von WPF in Instanzen von WPF-Klassen konvertiert.At run time, WPF converts the elements and attributes that are defined in markup to instances of WPF classes. Beispielsweise wird das Window -Element in eine Instanz der Window -Klasse konvertiert, deren Title -Eigenschaft dem Wert des Title -Attributs entspricht.For example, the Window element is converted to an instance of the Window class whose Title property is the value of the Title attribute.

In der folgenden Abbildung ist die Benutzeroberfläche dargestellt, die durch den XAML-Code im vorherigen Beispiel definiert ist.The following figure shows the user interface (UI) that is defined by the XAML in the previous example.

Ein Fenster, das eine Schaltfläche enthält

Da XAML auf XML basiert, wird die damit erstellte Benutzeroberfläche in einer Hierarchie geschachtelter Elemente zusammengestellt, die als Elementstrukturbezeichnet wird.Since XAML is XML-based, the UI that you compose with it is assembled in a hierarchy of nested elements known as an element tree. Die Elementstruktur stellt eine logische und intuitive Art und Weise zum Erstellen und Verwalten von Benutzeroberflächen bereit.The element tree provides a logical and intuitive way to create and manage UIs.

CodeBehindCode-behind

Der Hauptzweck einer Anwendung besteht darin, die Funktionalität zu implementieren, mit der auf Benutzeraktionen reagiert wird, wozu auch das Behandeln von Ereignissen (z. B. Klicken auf Menüs, Symbolleisten oder Schaltflächen) sowie das Aufrufen von Geschäftslogik und als Reaktion darauf von Datenzugriffslogik zählen.The main behavior of an application is to implement the functionality that responds to user interactions, including handling events (for example, clicking a menu, tool bar, or button) and calling business logic and data access logic in response. In WPF wird dieses Verhalten in Code implementiert, der mit Markup verknüpft ist.In WPF, this behavior is implemented in code that is associated with markup. Diese Art von Code wird als CodeBehind bezeichnet.This type of code is known as code-behind. Im folgenden Beispiel werden der aktualisierte Markupcode aus dem vorherigen Beispiel und das CodeBehind gezeigt.The following example shows the updated markup from the previous example and the code-behind.

<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

In diesem Beispiel wird im CodeBehind eine Klasse implementiert, die aus der Window -Klasse abgeleitet wird.In this example, the code-behind implements a class that derives from the Window class. Das x:Class -Attribut wird verwendet, um den Markupcode mit der CodeBehind-Klasse zu verknüpfen.The x:Class attribute is used to associate the markup with the code-behind class. InitializeComponent wird vom Konstruktor der CodeBehind-Klasse aufgerufen, um die im Markup definierte Benutzeroberfläche mit der CodeBehind-Klasse zusammenzuführen.InitializeComponent is called from the code-behind class's constructor to merge the UI that is defined in markup with the code-behind class. (InitializeComponent wird bei der Erstellung der Anwendung automatisch generiert, weshalb eine manuelle Implementierung daher nicht notwendig ist.) Mit der Kombination von x:Class und InitializeComponent wird sichergestellt, dass Ihre Implementierung jedes Mal, wenn sie erstellt wird, ordnungsgemäß initialisiert wird.(InitializeComponent is generated for you when your application is built, which is why you don't need to implement it manually.) The combination of x:Class and InitializeComponent ensure that your implementation is correctly initialized whenever it is created. In der CodeBehind-Klasse wird außerdem ein Ereignishandler für das Click-Ereignis der Schaltfläche implementiert.The code-behind class also implements an event handler for the button's Click event. Wird auf die Schaltfläche geklickt, zeigt der Ereignishandler ein Meldungsfeld an, indem er die System.Windows.MessageBox.Show -Methode aufruft.When the button is clicked, the event handler shows a message box by calling the System.Windows.MessageBox.Show method.

In der folgenden Abbildung ist das Ergebnis dargestellt, das nach einem Klicken auf die Schaltfläche zu sehen ist.The following figure shows the result when the button is clicked.

Eine MessageBox

SteuerelementeControls

Die Elemente einer Benutzeroberfläche, die mit dem Anwendungsmodell bereitgestellt werden, sind konstruierte Steuerelemente.The user experiences that are delivered by the application model are constructed controls. In WPF ist Steuerelement ein Sammelbegriff, der sich auf eine Kategorie von WPF-Klassen bezieht, die entweder in einem Fenster oder auf einer Seite gehostet werden, eine Benutzeroberfläche haben und ein bestimmtes Verhalten implementieren.In WPF, control is an umbrella term that applies to a category of WPF classes that are hosted in either a window or a page, have a user interface, and implement some behavior.

Weitere Informationen finden Sie unter Steuerelemente.For more information, see Controls.

WPF-Steuerelemente nach FunktionWPF controls by function

Die integrierten WPF-Steuerelemente sind nachstehend aufgelistet.The built-in WPF controls are listed here.

Eingabe und BefehleInput and commands

Steuerelemente sind üblicherweise dafür vorgesehen, Benutzereingaben zu erkennen und darauf zu reagieren.Controls most often detect and respond to user input. Im WPF-Eingabesystem werden sowohl direkte Ereignisse als auch Routingereignisse verwendet, um Texteingaben, Fokusverwaltung und Mauspositionierung zu unterstützen.The WPF input system uses both direct and routed events to support text input, focus management, and mouse positioning.

Anwendungen haben häufig komplexe Eingabeanforderungen.Applications often have complex input requirements. WPF stellt ein Befehlssystem bereit, über das Eingabeaktionen eines Benutzers von dem Code getrennt sind, mit dem auf diese Aktionen reagiert wird.WPF provides a command system that separates user-input actions from the code that responds to those actions.

LayoutLayout

Wenn Sie eine Benutzeroberfläche erstellen, ordnen Sie die Steuerelemente nach Position und Größe an, um ein Layout zu formen.When you create a user interface, you arrange your controls by location and size to form a layout. Eine Hauptanforderung für jedes Layout besteht darin, sich an Änderungen der Fenstergröße und Anzeigeeinstellungen anpassen zu können.A key requirement of any layout is to adapt to changes in window size and display settings. WPF bietet ein erstklassiges erweiterbares Layoutsystem, sodass Sie keinen zusätzlichen Code schreiben müssen, um ein Layout in diesen Fällen anzupassen.Rather than forcing you to write the code to adapt a layout in these circumstances, WPF provides a first-class, extensible layout system for you.

Die Basis des Layoutsystems ist relative Positionierung, wodurch die Fähigkeit zur Anpassung an geänderte Fenster- und Anzeigebedingungen verbessert wird.The cornerstone of the layout system is relative positioning, which increases the ability to adapt to changing window and display conditions. Das Layoutsystem verwaltet außerdem die Aushandlung zwischen Steuerelementen, um das Layout zu bestimmen.In addition, the layout system manages the negotiation between controls to determine the layout. Die Aushandlung ist ein zweistufiger Vorgang: Zuerst teilt ein Steuerelement seinem übergeordneten Element mit, welche Position und Größe es benötigt, und anschließend teilt das übergeordnete Element dem Steuerelement mit, welcher Raum ihm zur Verfügung steht.The negotiation is a two-step process: first, a control tells its parent what location and size it requires; second, the parent tells the control what space it can have.

Das Layoutsystem wird untergeordneten Steuerelementen über WPF-Basisklassen verfügbar gemacht.The layout system is exposed to child controls through base WPF classes. Für allgemeine Layouts wie Raster, Stapeln und Andocken enthält WPF mehrere Layoutsteuerelemente:For common layouts such as grids, stacking, and docking, WPF includes several layout controls:

  • Canvas: Untergeordnete Steuerelemente stellen ihr eigenes Layout bereit.Canvas: Child controls provide their own layout.

  • DockPanel: Untergeordnete Steuerelemente werden an den Rändern des Bereichs ausgerichtet.DockPanel: Child controls are aligned to the edges of the panel.

  • Grid: Untergeordnete Steuerelemente werden anhand von Zeilen und Spalten positioniert.Grid: Child controls are positioned by rows and columns.

  • StackPanel: Untergeordnete Steuerelemente werden entweder vertikal oder horizontal gestapelt.StackPanel: Child controls are stacked either vertically or horizontally.

  • VirtualizingStackPanel: Untergeordnete Steuerelemente werden virtualisiert und auf einer einzelnen Linie angeordnet, die horizontal oder vertikal verläuft.VirtualizingStackPanel: Child controls are virtualized and arranged on a single line that is either horizontally or vertically oriented.

  • WrapPanel: Untergeordnete Steuerelemente werden der Reihe nach von links nach rechts angeordnet und, wenn sich in der jeweiligen Zeile mehr Steuerelemente befinden, als der Platz zulässt, ggf. auf die nächste Zeile umbrochen.WrapPanel: Child controls are positioned in left-to-right order and wrapped to the next line when there are more controls on the current line than space allows.

Im folgenden Beispiel wird ein DockPanel -Objekt verwendet, um ein Layout mit mehreren TextBox -Steuerelementen zu erstellen.The following example uses a DockPanel to lay out several TextBox controls.

<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>

Das DockPanel-Objekt ermöglicht es den untergeordneten TextBox-Steuerelementen, ihm Informationen über ihre Anordnung bereitzustellen.The DockPanel allows the child TextBox controls to tell it how to arrange them. Dazu wird von der DockPanel-Klasse die angehängte Dock-Eigenschaft implementiert, die für die untergeordneten Steuerelemente verfügbar gemacht wird, damit jedes von ihnen eine Andockart festlegen kann.To do this, the DockPanel implements a Dock attached property that is exposed to the child controls to allow each of them to specify a dock style.

Note

Eine Eigenschaft, die von einem übergeordneten Steuerelement zur Verwendung durch untergeordnete Steuerelemente implementiert wird, ist ein WPF-Konstrukt, das als angefügte Eigenschaft bezeichnet wird.A property that's implemented by a parent control for use by child controls is a WPF construct called an attached property.

Die folgende Abbildung zeigt das Ergebnis des XAML-Markupcodes im vorangehenden Beispiel.The following figure shows the result of the XAML markup in the preceding example.

DockPanel-Seite

DatenbindungData binding

Die meisten Anwendungen werden erstellt, um Benutzern die Möglichkeit zum Anzeigen und Bearbeiten von Daten bereitzustellen.Most applications are created to provide users with the means to view and edit data. Bei WPF-Anwendungen wird die Arbeit zum Speichern und Zugreifen auf Daten von Technologien wie Microsoft SQL Server und ADO.NET übernommen.For WPF applications, the work of storing and accessing data is already provided for by technologies such as SQL Server and ADO .NET. Nachdem auf die Daten zugegriffen wurde und diese in die verwalteten Objekte einer Anwendung geladen wurden, beginnt die harte Arbeit für WPF-Anwendungen.After the data is accessed and loaded into an application's managed objects, the hard work for WPF applications begins. Dies umfasst im Wesentlichen zwei Dinge:Essentially, this involves two things:

  1. Kopieren der Daten aus den verwalteten Objekten in Steuerelemente, wo die Daten angezeigt und bearbeitet werden können.Copying the data from the managed objects into controls, where the data can be displayed and edited.

  2. Sicherstellen, dass Änderungen, die über Steuerelemente an den Daten vorgenommen wurden, in die verwalteten Objekte kopiert werden.Ensuring that changes made to data by using controls are copied back to the managed objects.

Um die Entwicklung von Anwendungen zu vereinfachen, stellt WPF eine Datenbindungs-Engine bereit, mit dem diese Schritte automatisch ausgeführt werden können.To simplify application development, WPF provides a data binding engine to automatically perform these steps. Das Kernelement der Datenbindungs-Engine ist die Binding , deren Aufgabe es ist, ein Steuerelement (das Bindungsziel) an ein Datenobjekt (die Bindungsquelle) zu binden.The core unit of the data binding engine is the Binding class, whose job is to bind a control (the binding target) to a data object (the binding source). Diese Beziehung wird in der folgenden Abbildung veranschaulicht:This relationship is illustrated by the following figure:

Grundlegendes Datenbindungsdiagramm

Im nächsten Beispiel wird gezeigt, wie ein TextBox-Objekt an eine Instanz eines benutzerdefinierten Person-Objekts gebunden wird.The next example demonstrates how to bind a TextBox to an instance of a custom Person object. Die Person-Implementierung wird im folgenden Beispielcode dargestellt:The Person implementation is shown in the following code:

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; }
        }
    }
}

Im folgenden Markupcode wird das TextBox-Objekt an eine Instanz eines benutzerdefinierten Person-Objekts gebunden.The following markup binds the TextBox to an instance of a custom Person object.

<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;
        }
    }
}

In diesem Beispiel wird die Person -Klasse in CodeBehind instanziiert und als Datenkontext für die DataBindingWindow-Klasse festgelegt.In this example, the Person class is instantiated in code-behind and is set as the data context for the DataBindingWindow. Im Markupcode wird die Text -Eigenschaft des TextBox -Steuerelements an die Person.Name -Eigenschaft gebunden (über die XAML-Syntax{Binding ... }).In markup, the Text property of the TextBox is bound to the Person.Name property (using the "{Binding ... }" XAML syntax). Dieser XAML-Code weist WPF an, das TextBox -Steuerelement an das Person -Objekt zu binden, das in der DataContext -Eigenschaft des Fensters gespeichert ist.This XAML tells WPF to bind the TextBox control to the Person object that is stored in the DataContext property of the window.

Die Datenbindungs-Engine von WPF bietet zusätzliche Unterstützung, wozu Validierung, Sortierung, Filterung und Gruppierung gehören.The WPF data binding engine provides additional support that includes validation, sorting, filtering, and grouping. Darüber hinaus wird für Datenbindung die Verwendung von Datenvorlagen unterstützt, um eine benutzerdefinierte Benutzeroberfläche für gebundene Daten zu erstellen, wenn die Benutzeroberfläche nicht geeignet ist, die von den WPF-Standardsteuerelementen angezeigt wird.Furthermore, data binding supports the use of data templates to create custom user interface for bound data when the user interface displayed by the standard WPF controls is not appropriate.

Weitere Informationen finden Sie unter Übersicht über Datenbindung.For more information, see Data binding overview.

GrafikGraphics

Mit WPF wird ein umfangreicher, skalierbarer und flexibler Satz von Grafikfeatures eingeführt, die die folgenden Vorteile bieten:WPF introduces an extensive, scalable, and flexible set of graphics features that have the following benefits:

  • Auflösungsunabhängige und geräteunabhängige Grafik.Resolution-independent and device-independent graphics. Die grundlegende Maßeinheit im WPF-Grafiksystem ist das geräteunabhängige Pixel, das, unabhängig von der jeweiligen Bildschirmauflösung, immer 1/96 Zoll entspricht. Diese Maßeinheit bildet die Grundlage für auflösungs- und geräteunabhängiges Rendering.The basic unit of measurement in the WPF graphics system is the device-independent pixel, which is 1/96th of an inch, regardless of actual screen resolution, and provides the foundation for resolution-independent and device-independent rendering. Jedes geräteunabhängige Pixel wird automatisch skaliert, um mit der DPI-Einstellung (Dots Per Inch) des Systems übereinzustimmen, auf dem das Pixel gerendert wird.Each device-independent pixel automatically scales to match the dots-per-inch (dpi) setting of the system it renders on.

  • Höhere Genauigkeit.Improved precision. Das WPF-Koordinatensystem wird mit Gleitkommazahlen mit doppelter Genauigkeit gemessen.The WPF coordinate system is measured with double-precision floating-point numbers rather than single-precision. Transformationen und Durchlässigkeitswerte werden ebenfalls mit doppelter Genauigkeit ausgedrückt.Transformations and opacity values are also expressed as double-precision. WPF unterstützt auch eine breite Farbskala (scRGB) und unterstützt das Verwalten von Eingaben aus unterschiedlichen Farbräumen.WPF also supports a wide color gamut (scRGB) and provides integrated support for managing inputs from different color spaces.

  • Erweiterte Unterstützung für Grafiken und Animationen.Advanced graphics and animation support. WPF vereinfacht die Grafikprogrammierung, indem es Animationsszenen für Sie verwaltet. Sie müssen sich keine Gedanken über Szenenverarbeitung, Renderingschleifen und bilineare Interpolation machen.WPF simplifies graphics programming by managing animation scenes for you; there is no need to worry about scene processing, rendering loops, and bilinear interpolation. Darüber bietet WPF Treffertest-Unterstützung und vollständige Alpha-Compositing-Unterstützung.Additionally, WPF provides hit-testing support and full alpha-compositing support.

  • Hardwarebeschleunigung.Hardware acceleration. Das WPF-Grafiksystem nutzt die Vorteile der Grafikhardware, um die CPU-Auslastung zu verringern.The WPF graphics system takes advantage of graphics hardware to minimize CPU usage.

2D-Formen2D shapes

Zu WPF gehört eine Bibliothek häufig verwendeter vektorbasierter 2D-Formen, etwa Rechtecke und Ellipsen, die in der folgenden Abbildung dargestellt sind:WPF provides a library of common vector-drawn 2D shapes, such as the rectangles and ellipses that are shown in the following illustration:

Ellipsen und Rechtecke

Eine interessante Fähigkeit von Formen ist, dass sie nicht nur zur Anzeige vorhanden sind, sondern für sie auch viele der Features implementiert sind, die Sie von Steuerelementen erwarten, einschließlich Tastatur- und Mauseingaben.An interesting capability of shapes is that they are not just for display; shapes implement many of the features that you expect from controls, including keyboard and mouse input. Im folgenden Beispiel wird das MouseUp -Ereignis einer Ellipse gezeigt, die verarbeitet wird.The following example shows the MouseUp event of an Ellipse being handled.

<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!");
        }
    }
}

In der folgenden Abbildung ist das Ergebnis des vorangehenden Codes dargestellt.The following figure shows what is produced by the preceding code.

Ein Fenster mit dem Text "you clicked the ellipse!" (Sie haben auf das Auslassungszeichen geklickt).

Weitere Informationen finden Sie unter Übersicht über Formen und die grundlegenden Funktionen zum Zeichnen in WPF.For more information, see Shapes and basic drawing in WPF overview.

2D-Geometrien2D geometries

Die von WPF bereitgestellten 2D-Formen decken die grundlegenden Standardformen ab.The 2D shapes provided by WPF cover the standard set of basic shapes. Möglicherweise müssen Sie jedoch benutzerdefinierte Formen erstellen, um den Entwurf einer angepassten Benutzeroberfläche zu ermöglichen.However, you may need to create custom shapes to facilitate the design of a customized user interface. Zu diesem Zweck stellt WPF Geometrien bereit.For this purpose, WPF provides geometries. In der folgenden Abbildung wird veranschaulicht, wie Geometrien verwendet werden können, um eine benutzerdefinierte Form zu erstellen, die direkt gezeichnet, als Pinsel verwendet oder dazu verwendet werden kann, andere Formen und Steuerelemente auszuschneiden.The following figure demonstrates the use of geometries to create a custom shape that can be drawn directly, used as a brush, or used to clip other shapes and controls.

MitPath -Objekten können geschlossene oder offene Formen, Mehrfachformen und sogar gekrümmte Formen gezeichnet werden.Path objects can be used to draw closed or open shapes, multiple shapes, and even curved shapes.

Geometry-Objekte können zum Ausschneiden, zum Ausführen von Treffertests und zum Rendern von 2D-Grafikdaten verwendet werden.Geometry objects can be used for clipping, hit-testing, and rendering 2D graphic data.

Verschiedene Einsatzbereiche eines Pfades

Weitere Informationen finden Sie unter Übersicht über die Geometrie.For more information, see Geometry overview.

2D-Effekte2D effects

Eine Teilmenge der 2D-Funktionen von WPF umfasst visuelle Effekte wie Farbverläufe, Bitmaps, Zeichnungen, Zeichnen mit Videos, Drehung, Skalierung und Neigung.A subset of WPF 2D capabilities includes visual effects, such as gradients, bitmaps, drawings, painting with videos, rotation, scaling, and skewing. Diese Effekte werden mithilfe von Pinseln erzielt. In der folgenden Abbildung sind einige Beispiele gezeigt.These are all achieved with brushes; the following figure shows some examples.

Darstellung unterschiedlicher Pinsel

Weitere Informationen finden Sie unter Übersicht über WPF-Pinsel.For more information, see WPF brushes overview.

3D-Rendering3D rendering

WPF beinhaltet auch 3D-Renderingfunktionen, die mit der 2D-Grafik kombiniert sind, um noch ansprechendere und interessantere Benutzeroberflächen erstellen zu können.WPF also includes 3D rendering capabilities that integrate with 2-d graphics to allow the creation of more exciting and interesting user interfaces. Als Beispiel sind in der folgenden Abbildung 2D-Bilder dargestellt, die auf 3D-Formen gerendert wurden.For example, the following figure shows 2D images rendered onto 3D shapes.

Bildschirmabbildung für Visual3D-Beispiel

Weitere Informationen finden Sie unter Übersicht über 3D-Grafiken.For more information, see 3D graphics overview.

AnimationAnimation

Die WPF-Animationsunterstützung ermöglicht es Ihnen, Steuerelemente wachsen, bewegen, schütteln sowie ein- und ausblenden zu lassen, um interessante Seitenübergänge zu erstellen, und vieles mehr.WPF animation support lets you make controls grow, shake, spin, and fade, to create interesting page transitions, and more. Die meisten WPF-Klassen, selbst benutzerdefinierte Klassen, können animiert werden.You can animate most WPF classes, even custom classes. In der folgenden Abbildung wird eine einfache Animation in Aktion gezeigt.The following figure shows a simple animation in action.

Bilder eines animierten Cubes

Weitere Informationen finden Sie unter Übersicht über Animation.For more information, see Animation overview.

MedienMedia

Eine Möglichkeit, Inhalte interessant zu vermitteln, ist die Verwendung audiovisueller Medien.One way to convey rich content is through the use of audiovisual media. WPF bietet spezielle Unterstützung für Bilder, Video und Audio.WPF provides special support for images, video, and audio.

BilderImages

In den meisten Anwendungen werden Bilder verwendet, und WPF bietet mehrere Möglichkeiten, Bilder zu verwenden.Images are common to most applications, and WPF provides several ways to use them. Die folgende Abbildung zeigt eine Benutzeroberfläche mit einem Listenfeld, das Miniaturbilder enthält.The following figure shows a user interface with a list box that contains thumbnail images. Wird eine Miniaturansicht ausgewählt, wird das Bild in voller Größe angezeigt.When a thumbnail is selected, the image is shown full-size.

Miniaturbilder und ein Bild in voller Größe

Weitere Informationen finden Sie unter Übersicht über die Bildverarbeitung.For more information, see Imaging overview.

Video und AudioVideo and audio

Mit dem MediaElement -Steuerelement kann sowohl Video als auch Audio wiedergegeben werden, und es ist flexibel genug, um als Grundlage für einen benutzerdefinierten Media Player verwendet zu werden.The MediaElement control is capable of playing both video and audio, and it is flexible enough to be the basis for a custom media player. Mit dem folgenden XAML-Markup wird ein Media Player implementiert.The following XAML markup implements a media player.

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

Das Fenster in der folgenden Abbildung zeigt das MediaElement-Steuerelement in Aktion.The window in the following figure shows the MediaElement control in action.

Ein MediaElement-Steuerelement mit Audio und Video

Weitere Informationen finden Sie unter Grafiken und Multimedia.For more information, see Graphics and multimedia.

Text und TypografieText and typography

Um ein qualitativ hochwertiges Textrendering zu ermöglichen, bietet WPF die folgenden Features:To facilitate high-quality text rendering, WPF offers the following features:

  • Unterstützung für OpenType-SchriftartenOpenType font support.

  • ClearType-OptimierungenClearType enhancements.

  • Hohe Leistung durch Nutzung von HardwarebeschleunigungHigh performance that takes advantage of hardware acceleration.

  • Einbinden von Text in Medien, Grafiken und AnimationenIntegration of text with media, graphics, and animation.

  • Unterstützung internationaler Schriftarten und FallbackmechanismenInternational font support and fallback mechanisms.

Zur Veranschaulichung der Texteinbindung in Grafiken ist in der folgenden Abbildung die Anwendung von Textdekorationen gezeigt.As a demonstration of text integration with graphics, the following figure shows the application of text decorations.

Text mit verschiedenen Textergänzungen

Weitere Informationen finden Sie unter Typografie in WPF.For more information, see Typography in Windows Presentation Foundation.

Anpassen von WPF-AppsCustomize WPF apps

Bis zu dieser Stelle haben die WPF-Kernbausteine zur Entwicklung von Anwendungen kennen gelernt.Up to this point, you've seen the core WPF building blocks for developing applications. Sie verwenden das Anwendungsmodell, um Anwendungsinhalte, die hauptsächlich aus Steuerelementen bestehen, zu hosten und bereitzustellen.You use the application model to host and deliver application content, which consists mainly of controls. Das WPF-Layoutsystem verwenden Sie, um die Anordnung von Steuerelementen in einer Benutzeroberfläche zu vereinfachen und sicherzustellen, dass die Anordnung bei Änderungen von Fenstergröße und Anzeigeeinstellungen erhalten bleibt.To simplify the arrangement of controls in a user interface, and to ensure the arrangement is maintained in the face of changes to window size and display settings, you use the WPF layout system. Da die meisten Anwendungen Benutzern ein Bearbeiten von Daten ermöglichen, verwenden Sie Datenbindung, um den Arbeitsaufwand für das Einbinden der Daten in die jeweilige Benutzeroberfläche zu reduzieren.Because most applications let users interact with data, you use data binding to reduce the work of integrating your user interface with data. Um die visuelle Darstellung Ihrer Anwendung zu verbessern, verwenden Sie die umfangreiche Grafik-, Animations- und Medienunterstützung, die von WPF bereitgestellt wird.To enhance the visual appearance of your application, you use the comprehensive range of graphics, animation, and media support provided by WPF.

Häufig reichen die Grundelemente jedoch nicht aus, um eine wirklich herausragende und visuell eindrucksvolle Benutzeroberfläche zu erstellen und zu verwalten.Often, though, the basics are not enough for creating and managing a truly distinct and visually stunning user experience. Die Standardsteuerelemente von WPF passen möglicherweise nicht zum gewünschten Erscheinungsbild Ihrer Anwendung.The standard WPF controls might not integrate with the desired appearance of your application. Daten können vielleicht nicht auf die bestmögliche Art angezeigt werden.Data might not be displayed in the most effective way. Der Gesamteindruck Ihrer Anwendung ist eventuell nicht für das standarmäßige Aussehen und Verhalten der Windows-Designs geeignet.Your application's overall user experience may not be suited to the default look and feel of Windows themes. In vielerlei Hinsicht erfordert eine Präsentationstechnologie visuelle Erweiterbarkeit ebenso wie jede andere Art von Erweiterbarkeit.In many ways, a presentation technology needs visual extensibility as much as any other type of extensibility.

Aus diesem Grund bietet die WPF eine Vielzahl von Mechanismen zum Erzeugen einzigartiger Benutzeroberflächen, wie z. B. ein umfangreiches Inhaltsmodell für Steuerelemente, Trigger, Steuerelement- und Datenvorlagen, Stile, Ressourcen für Benutzeroberflächen, Designs und Skins.For this reason, WPF provides a variety of mechanisms for creating unique user experiences, including a rich content model for controls, triggers, control and data templates, styles, user interface resources, and themes and skins.

InhaltsmodellContent model

Die meisten WPF-Steuerelemente haben hauptsächlich die Aufgabe, Inhalte anzuzeigen.The main purpose of a majority of the WPF controls is to display content. In WPF werden der Typ und die Anzahl von Elementen, die den Inhalt eines Steuerelements bilden können, als Inhaltsmodelldes Steuerelements bezeichnet.In WPF, the type and number of items that can constitute the content of a control is referred to as the control's content model. Einige Steuerelemente können ein einzelnes Element und einen einzelnen Inhaltstyp enthalten. Beispielsweise ist der Inhalt eines TextBox -Steuerelements ein Zeichenfolgenwert, der der Text -Eigenschaft zugewiesen ist.Some controls can contain a single item and type of content; for example, the content of a TextBox is a string value that is assigned to the Text property. Im folgenden Beispiel wird der Inhalt eines TextBox-Steuerelements festgelegt.The following example sets the content of a 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>

Die folgende Abbildung zeigt das Ergebnis.The following figure shows the result.

Ein TextBox-Steuerelement, das Text enthält

Andere Steuerelemente können dagegen mehrere Elemente verschiedener Inhaltstypen enthalten. Der Inhalt eines Button-Steuerelements, der durch die Content-Eigenschaft angegeben ist, kann eine Vielzahl von Elementen enthalten, etwa Layoutsteuerelemente, Text, Bildern und Formen.Other controls, however, can contain multiple items of different types of content; the content of a Button, specified by the Content property, can contain a variety of items including layout controls, text, images, and shapes. Das folgende Beispiel zeigt ein Button -Steuerelement mit Inhalt, zu dem ein DockPanel-, ein Label-, ein Border- und ein MediaElement-Objekt gehören.The following example shows a Button with content that includes a DockPanel, a Label, a Border, and 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>

In der folgenden Abbildung ist der Inhalt dieser Schaltfläche dargestellt.The following figure shows the content of this button.

Eine Schaltfläche, die mehrere Inhaltstypen enthält

Weitere Informationen zu den Inhaltstypen, die von den verschiedenen Steuerelementen unterstützt werden, finden Sie unter WPF-Inhaltsmodell.For more information on the kinds of content that is supported by various controls, see WPF content model.

TriggerTriggers

Obwohl der Hauptzweck von XAML-Markup in der Implementierung der Darstellung einer Anwendung besteht, lassen sich mit XAML auch einige Aspekte des Verhaltens einer Anwendung implementieren.Although the main purpose of XAML markup is to implement an application's appearance, you can also use XAML to implement some aspects of an application's behavior. Ein Beispiel ist die Verwendung von Triggern, um die Darstellung einer Anwendung anhand von Benutzeraktionen zu ändern.One example is the use of triggers to change an application's appearance based on user interactions. Weitere Informationen finden Sie unter Erstellen von Formaten und Vorlagen.For more information, see Styling and templating.

SteuerelementvorlagenControl templates

Die standardmäßigen Benutzeroberflächen für WPF-Steuerelemente werden üblicherweise aus anderen Steuerelementen und Formen erstellt.The default user interfaces for WPF controls are typically constructed from other controls and shapes. Beispielsweise besteht ein Button -Steuerelement aus einem ButtonChrome - und einem ContentPresenter -Steuerelement.For example, a Button is composed of both ButtonChrome and ContentPresenter controls. Das ButtonChrome -Steuerelement stellt die Standarddarstellung der Schaltfläche bereit, während das ContentPresenter -Steuerelement den Inhalt der Schaltfläche anzeigt, der in der Content -Eigenschaft angegeben ist.The ButtonChrome provides the standard button appearance, while the ContentPresenter displays the button's content, as specified by the Content property.

Manchmal passt die Standarddarstellung eines Steuerelements nicht zum Gesamterscheinungsbild einer Anwendung.Sometimes the default appearance of a control may be incongruent with the overall appearance of an application. In diesem Fall können Sie ein ControlTemplate -Objekt verwenden, um die Darstellung der Benutzeroberfläche des Steuerelements anzupassen, ohne dessen Inhalt und Verhalten zu ändern.In this case, you can use a ControlTemplate to change the appearance of the control's user interface without changing its content and behavior.

Im folgenden Beispiel wird gezeigt, wie die Darstellung eines Button -Steuerelements durch Verwenden eines ControlTemplate-Objekts geändert werden kann.For example, the following example shows how to change the appearance of a Button by using a 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

In diesem Beispiel wurde die Standardbenutzeroberfläche der Schaltfläche durch ein Ellipse -Steuerelement ersetzt, das einen dunkelblauem Rand hat und über ein RadialGradientBrush-Steuerelement gefüllt wird.In this example, the default button user interface has been replaced with an Ellipse that has a dark blue border and is filled using a RadialGradientBrush. Das ContentPresenter -Steuerelement zeigt den Inhalt des Button-Steuerelements an („Click Me!“).The ContentPresenter control displays the content of the Button, "Click Me!" Wenn auf das Button -Steuerelement geklickt wird, wird das Click -Ereignis weiterhin als Teil des Standardverhaltens des Button n-Steuerelements ausgelöst.When the Button is clicked, the Click event is still raised as part of the Button control's default behavior. Das Ergebnis ist in der folgenden Abbildung dargestellt:The result is shown in the following figure:

Eine elliptische Schaltfläche und ein zweites Fenster

DatenvorlagenData templates

Während Sie mit einer Steuerelementvorlage die Darstellung eines Steuerelements angeben können, können Sie mit einer Datenvorlage die Darstellung des Inhalts eines Steuerelements angeben.Whereas a control template lets you specify the appearance of a control, a data template lets you specify the appearance of a control's content. Datenvorlagen werden häufig dazu verwendet, die Anzeige gebundener Daten zu verbessern.Data templates are frequently used to enhance how bound data is displayed. Die folgende Abbildung zeigt die Standarddarstellung für ein ListBox-Steuerelement, das an eine Auflistung von Task-Objekten gebunden ist, wobei jede Aufgabe einen Namen, eine Beschreibung und eine Priorität hat.The following figure shows the default appearance for a ListBox that is bound to a collection of Task objects, where each task has a name, description, and priority.

Ein Listenfeld mit der Standarddarstellung

Die Standarddarstellung entspricht dem, was Sie von einem ListBox-Steuerelement erwarten.The default appearance is what you would expect from a ListBox. Allerdings enthält die Standarddarstellung jeder Aufgabe nur den Aufgabennamen.However, the default appearance of each task contains only the task name. Um den Aufgabennamen, die Beschreibung und die Priorität anzuzeigen, muss die Standarddarstellung der gebundenen Listenelemente des ListBox -Steuerelements über ein DataTemplate-Objekt geändert werden.To show the task name, description, and priority, the default appearance of the ListBox control's bound list items must be changed by using a DataTemplate. Im folgenden XAML-Code wird ein solches DataTemplate-Objekt definiert, das über das ItemTemplate -Attribut auf jede Aufgabe angewendet wird.The following XAML defines such a DataTemplate, which is applied to each task by using the ItemTemplate attribute.

<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>

Die folgende Abbildung zeigt das Ergebnis dieses Codes.The following figure shows the effect of this code.

Listenfeld, das eine Datenvorlage verwendet

Beachten Sie, dass das Verhalten und die Gesamtdarstellung des ListBox-Steuerelements beibehalten wurden. Lediglich die Darstellung der vom Listenfeld angezeigten Inhalte wurde geändert.Note that the ListBox has retained its behavior and overall appearance; only the appearance of the content being displayed by the list box has changed.

Weitere Informationen finden Sie unter Übersicht über Datenvorlagen.For more information, see Data templating overview.

StileStyles

Stile ermöglichen Entwicklern und Designern die Standardisierung auf ein bestimmtes Erscheinungsbild ihres Produkts.Styles enable developers and designers to standardize on a particular appearance for their product. WPF stellt ein solides Formatmodell bereit, dessen Grundlage das Style -Element bildet.WPF provides a strong style model, the foundation of which is the Style element. Im folgenden Beispiel wird ein Stil erstellt, mit dem die Hintergrundfarbe für jedes Button-Steuerelement in einem Fenster auf Orange festgelegt wird.The following example creates a style that sets the background color for every Button on a window to 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">
  <!-- Style that will be applied to all buttons -->
  <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>
  <!-- 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>
</Window>

Da sich dieser Stil auf alle Button-Steuerelemente bezieht, wird er automatisch auf alle Schaltflächen im Fenster angewendet. Dies ist in der folgenden Abbildung zu sehen:Because this style targets all Button controls, the style is automatically applied to all the buttons in the window, as shown in the following figure:

Zwei orangefarbene Schaltflächen

Weitere Informationen finden Sie unter Erstellen von Formaten und Vorlagen.For more information, see Styling and templating.

RessourcenResources

Die Steuerelemente in einer Anwendung sollten die gleiche Darstellung haben, wozu alles von Schriftarten und Hintergrundfarben bis zu Steuerelementvorlagen, Datenvorlagen und Stilen gehören kann.Controls in an application should share the same appearance, which can include anything from fonts and background colors to control templates, data templates, and styles. Über die WPF-Unterstützung für Benutzeroberflächenressourcen können diese Ressourcen in einem einzigen Speicherort kapseln, um sie wiederzuverwenden.You can use WPF's support for user interface resources to encapsulate these resources in a single location for reuse.

Im folgenden Beispiel wird eine gemeinsame Hintergrundfarbe festgelegt, die für ein Button - und ein Label-Steuerelement verwendet wird.The following example defines a common background color that is shared by a Button and 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>

In diesem Beispiel wird mit dem Window.Resources-Eigenschaftenelements eine Ressource für die Hintergrundfarbe implementiert.This example implements a background color resource by using the Window.Resources property element. Diese Ressource ist für alle untergeordneten Elemente des Window-Elements verfügbar.This resource is available to all children of the Window. Es gibt eine Vielzahl von Ressourcenbereichen, von denen einige nachfolgend in der Reihenfolge aufgeführt sind, in der sie aufgelöst werden:There are a variety of resource scopes, including the following, listed in the order in which they are resolved:

  1. Ein einzelnes Steuerelement (über die geerbte System.Windows.FrameworkElement.Resources -Eigenschaft)An individual control (using the inherited System.Windows.FrameworkElement.Resources property).

  2. Ein Window - oder Page -Element (ebenfalls über die geerbte System.Windows.FrameworkElement.Resources -Eigenschaft)A Window or a Page (also using the inherited System.Windows.FrameworkElement.Resources property).

  3. Ein Application -Element (über die System.Windows.Application.Resources -Eigenschaft)An Application (using the System.Windows.Application.Resources property).

Durch die Vielzahl von Bereichen erhalten Sie Flexibilität in Bezug auf die Art, mit der Sie Ihre Ressourcen definieren und freigeben.The variety of scopes gives you flexibility with respect to the way in which you define and share your resources.

Anstatt Ihre Ressourcen direkt mit einem bestimmten Bereich zu verknüpfen, können Sie eine oder mehrere Ressourcen über ein separates ResourceDictionary -Element verpacken, auf das in anderen Teilen einer Anwendung verwiesen werden kann.As an alternative to directly associating your resources with a particular scope, you can package one or more resources by using a separate ResourceDictionary that can be referenced in other parts of an application. Im folgenden Beispiel wird etwa eine Standardhintergrundfarbe in einem Ressourcenwörterbuch definiert.For example, the following example defines a default background color in a resource dictionary.

<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>

Im folgenden Beispiel wird auf das Ressourcenwörterbuch, das im vorherigen Beispiel definiert wurde, verwiesen, sodass es in einer Anwendung freigegeben ist.The following example references the resource dictionary defined in the previous example so that it is shared across an application.

<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>

Ressourcen und Ressourcenwörterbücher bilden die Grundlage der WPF-Unterstützung für Designs und Skins.Resources and resource dictionaries are the foundation of WPF support for themes and skins.

Weitere Informationen finden Sie unter Ressourcen.For more information, see Resources.

Benutzerdefinierte SteuerelementeCustom controls

Obwohl WPF umfangreiche Unterstützung für Anpassungen bietet, kann es Fälle geben, in denen die vorhandenen WPF-Steuerelemente den Anforderungen Ihrer Anwendung oder denen der Benutzer nicht genügen.Although WPF provides a host of customization support, you may encounter situations where existing WPF controls do not meet the needs of either your application or its users. Dies kann auftreten, wenn Folgendes zutrifft:This can occur when:

  • Die von Ihnen gewünschte Benutzeroberfläche kann nicht erstellt werden, indem das Aussehen und Verhalten vorhandener WPF-Implementierungen angepasst wird.The user interface that you require cannot be created by customizing the look and feel of existing WPF implementations.

  • Das von Ihnen gewünschte Verhalten wird von vorhandenen WPF-Implementierungen nicht (oder nicht einfach) unterstützt.The behavior that you require is not supported (or not easily supported) by existing WPF implementations.

An diesem Punkt können Sie jedoch eines der drei WPF-Modelle nutzen, um ein neues Steuerelement zu erstellen.At this point, however, you can take advantage of one of three WPF models to create a new control. Jedes Modell ist für ein bestimmtes Szenario vorgesehen und erfordert, dass Ihr benutzerdefiniertes Steuerelement aus einer bestimmten WPF-Basisklasse abgeleitet wird.Each model targets a specific scenario and requires your custom control to derive from a particular WPF base class. Die drei Modelle sind hier aufgeführt:The three models are listed here:

  • BenutzersteuerelementmodellUser Control Model. Ein benutzerdefiniertes Steuerelement wird aus UserControl abgeleitet und besteht aus mindestens einem anderen Steuerelement.A custom control derives from UserControl and is composed of one or more other controls.

  • SteuerelementmodellControl Model. Ein benutzerdefiniertes Steuerelement wird aus Control abgeleitet und dazu verwendet, eine Implementierung zu erstellen, deren Verhalten mithilfe von Vorlagen von ihrer Darstellung getrennt wird, so wie beim Großteil der WPF-Steuerelemente.A custom control derives from Control and is used to build implementations that separate their behavior from their appearance using templates, much like the majority of WPF controls. Durch Ableiten aus Control erhalten Sie für ein Erstellen einer benutzerdefinierten Benutzeroberfläche mehr Freiheit als mit Benutzersteuerelementen, dies kann jedoch höheren Aufwand erfordern.Deriving from Control allows you more freedom for creating a custom user interface than user controls, but it may require more effort.

  • Frameworkelementmodell.Framework Element Model. Ein benutzerdefiniertes Steuerelement wird aus FrameworkElement abgeleitet, wenn seine Darstellung durch benutzerdefinierte Renderinglogik (nicht durch Vorlagen) definiert ist.A custom control derives from FrameworkElement when its appearance is defined by custom rendering logic (not templates).

Im folgenden Beispiel wird ein benutzerdefiniertes numerisches „Nach oben/Nach unten“-Steuerelement gezeigt, das aus UserControlabgeleitet wird.The following example shows a custom numeric up/down control that derives from 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

Im nächsten Beispiel wird der XAML-Code dargestellt, der dazu erforderlich ist, das Benutzersteuerelement in ein Window-Element zu integrieren.The next example illustrates the XAML that is required to incorporate the user control into a 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">

Die folgende Abbildung zeigt das NumericUpDown-Steuerelement, das in einem Window-Element gehostet wird.The following figure shows the NumericUpDown control hosted in a Window.

Ein benutzerdefiniertes UserControl

Weitere Informationen zu benutzerdefinierten Steuerelementen finden Sie unter Übersicht über das Erstellen von Steuerelementen.For more information on custom controls, see Control authoring overview.

Bewährte Methoden für WPFWPF best practices

Wie bei jeder Entwicklungsplattform kann das gewünschte Ergebnis mit WPF auf verschiedene Arten erreicht werden.As with any development platform, WPF can be used in a variety of ways to achieve the desired result. Um sichergehen zu können, dass Ihre WPF-Anwendungen die geforderte Benutzerfreundlichkeit bereitstellen und grundsätzlich den Ansprüche der Zielgruppe entsprechen, gibt es empfohlene bewährte Methoden in Bezug auf Barrierefreiheit, Globalisierung, Lokalisierung und Leistung.As a way of ensuring that your WPF applications provide the required user experience and meet the demands of the audience in general, there are recommended best practices for accessibility, globalization and localization, and performance. Weitere Informationen finden Sie unter:For more information, see:

Nächste SchritteNext steps

In diesem Artikel wurden die Schlüsselfeatures von WPF erläutert.We've looked at the key features of WPF. Jetzt können Sie Ihre erste WPF-App erstellen.Now it's time to build your first WPF app.

Siehe auchSee also