Übersicht über das WPF-GrafikrenderingWPF Graphics Rendering Overview

Das Thema bietet einen Überblick über die visuelle WPFWPF-Schicht.This topic provides an overview of the WPFWPF visual layer. Der Schwerpunkt liegt auf der Rolle der Visual-Klasse für das Rendern von Unterstützung im WPFWPF-Modell.It focuses on the role of the Visual class for rendering support in the WPFWPF model.

Rolle des visuellen ObjektsRole of the Visual Object

Die Visual-Klasse ist die Basis Abstraktion, von der jedes FrameworkElement-Objekt abgeleitet wird.The Visual class is the basic abstraction from which every FrameworkElement object derives. Sie dient auch als Einstiegspunkt zum Schreiben neuer Steuerelemente WPFWPF und kann in vielerlei Hinsicht als Fensterhandle (HWND) im Win32-Anwendungsmodell betrachtet werden.It also serves as the entry point for writing new controls in WPFWPF, and in many ways can be thought of as the window handle (HWND) in the Win32 application model.

Das Visual-Objekt ist ein zentrales WPFWPF-Objekt, dessen primäre Rolle es ist, Renderingunterstützung bereitzustellen.The Visual object is a core WPFWPF object, whose primary role is to provide rendering support. Steuerelemente der Benutzeroberfläche, z. b. Button und TextBox, werden von der Klasse Visual abgeleitet und zum Speichern ihrer Renderingdaten verwendet.User interface controls, such as Button and TextBox, derive from the Visual class, and use it for persisting their rendering data. Das Visual-Objekt bietet Unterstützung für:The Visual object provides support for:

  • Ausgabe Anzeige: Rendern des beibehaltenen, serialisierten Zeichnungs Inhalts eines visuellen Elements.Output display: Rendering the persisted, serialized drawing content of a visual.

  • Beziehen Ausführen von Transformationen in einem visuellen Element.Transformations: Performing transformations on a visual.

  • Clipping Bereitstellen von Clipping-Regions Unterstützung für ein visuelles Element.Clipping: Providing clipping region support for a visual.

  • Treffer Tests: Bestimmen, ob eine Koordinate oder Geometrie innerhalb der Grenzen eines visuellen Elements enthalten ist.Hit testing: Determining whether a coordinate or geometry is contained within the bounds of a visual.

  • Begrenzungsfeld Berechnungen: Bestimmen des umgebenden Rechtecks eines visuellen Elements.Bounding box calculations: Determining the bounding rectangle of a visual.

Das Visual-Objekt beinhaltet jedoch keine Unterstützung für nicht-Renderingfeatures, wie z. b.:However, the Visual object does not include support for non-rendering features, such as:

  • EreignisbehandlungEvent handling

  • LayoutLayout

  • StileStyles

  • DatenbindungData binding

  • GlobalisierungGlobalization

Visual wird als öffentliche abstrakte Klasse verfügbar gemacht, von der untergeordnete Klassen abgeleitet werden müssen.Visual is exposed as a public abstract class from which child classes must be derived. Die folgende Abbildung zeigt die Hierarchie der visuellen Objekte, die in WPFWPF verfügbar gemacht werden.The following illustration shows the hierarchy of the visual objects that are exposed in WPFWPF.

Diagramm der vom Visual-Objekt abgeleiteten Klassen

DrawingVisual-KlasseDrawingVisual Class

Der DrawingVisual ist eine vereinfachte Zeichnungs Klasse, die zum Rendering von Formen, Bildern oder Text verwendet wird.The DrawingVisual is a lightweight drawing class that is used to render shapes, images, or text. Diese Klasse wird als einfach angesehen, da sie keine Layout- oder Ereignisbehandlung bereitstellt, was die Laufzeitleistung verbessert.This class is considered lightweight because it does not provide layout or event handling, which improves its runtime performance. Aus diesem Grund sind Zeichnungen für Hintergründe und ClipArt ideal.For this reason, drawings are ideal for backgrounds and clip art. Der DrawingVisual kann verwendet werden, um ein benutzerdefiniertes visuelles Objekt zu erstellen.The DrawingVisual can be used to create a custom visual object. Weitere Informationen finden Sie unter Verwenden von DrawingVisual-Objekten.For more information, see Using DrawingVisual Objects.

Viewport3DVisual-KlasseViewport3DVisual Class

Der Viewport3DVisual stellt eine Brücke zwischen 2D-Objekten Visual und Visual3D bereit.The Viewport3DVisual provides a bridge between 2D Visual and Visual3D objects. Die Visual3D-Klasse ist die Basisklasse für alle visuellen 3D-Elemente.The Visual3D class is the base class for all 3D visual elements. Der Viewport3DVisual erfordert, dass Sie einen Camera-Wert und einen Viewport-Wert definieren.The Viewport3DVisual requires that you define a Camera value and a Viewport value. Die Kamera ermöglicht die Anzeige der Szene.The camera allows you to view the scene. Der Anzeigebereich legt fest, wo die Projektion auf der 2D-Fläche zuordnet.The viewport establishes where the projection maps onto the 2D surface. Weitere Informationen über 3D in WPFWPF finden Sie unter Übersicht über 3D-Grafiken.For more information on 3D in WPFWPF, see 3-D Graphics Overview.

ContainerVisual-KlasseContainerVisual Class

Die ContainerVisual-Klasse wird als Container für eine Auflistung von Visual-Objekten verwendet.The ContainerVisual class is used as a container for a collection of Visual objects. Die DrawingVisual-Klasse wird von der ContainerVisual-Klasse abgeleitet, sodass Sie eine Auflistung visueller Objekte enthalten kann.The DrawingVisual class derives from the ContainerVisual class, allowing it to contain a collection of visual objects.

Zeichnungsinhalt in visuellen ObjektenDrawing Content in Visual Objects

Ein Visual-Objekt speichert seine Renderdaten als eine Vektorgrafik Anweisungs Liste.A Visual object stores its render data as a vector graphics instruction list. Jedes Element in der Anweisungsliste stellt einen Satz von Grafikdaten einer niedrigeren Ebene und dazugehörige Ressourcen in einem serialisierten Format dar.Each item in the instruction list represents a low-level set of graphics data and associated resources in a serialized format. Es gibt vier verschiedene Typen von Renderingdaten, die Zeichnungsinhalt enthalten können.There are four different types of render data that can contain drawing content.

ZeichnungsinhaltstypDrawing content type BeschreibungDescription
VektorgrafikVector graphics Stellt Vektorgrafik Daten und alle zugehörigen Brush-und Pen-Informationen dar.Represents vector graphics data, and any associated Brush and Pen information.
BildImage Stellt ein Bild innerhalb eines durch einen Rect definierten Bereichs dar.Represents an image within a region defined by a Rect.
GlypheGlyph Stellt eine Zeichnung dar, die eine @no__t 0 (null) rendert, bei der es sich um eine Sequenz von Symbolen aus einer angegebenen Schriftart Ressource handelt.Represents a drawing that renders a GlyphRun, which is a sequence of glyphs from a specified font resource. So wird Text dargestellt.This is how text is represented.
VideoVideo Stellt eine Zeichnung dar, die Video rendert.Represents a drawing that renders video.

Mit dem DrawingContext können Sie eine Visual mit visuellen Inhalten auffüllen.The DrawingContext allows you to populate a Visual with visual content. Wenn Sie die draw-Befehle eines DrawingContext-Objekts verwenden, speichern Sie tatsächlich eine Reihe von Renderingdaten, die später vom Grafiksystem verwendet werden. Sie werden nicht in Echtzeit auf den Bildschirm gezeichnet.When you use a DrawingContext object's draw commands, you are actually storing a set of render data that will later be used by the graphics system; you are not drawing to the screen in real-time.

Wenn Sie ein WPFWPF-Steuerelement erstellen, z. b. einen Button, generiert das Steuerelement implizit Rendering-Daten zum Zeichnen.When you create a WPFWPF control, such as a Button, the control implicitly generates render data for drawing itself. Beispielsweise bewirkt das Festlegen der Content-Eigenschaft des Button, dass das Steuerelement eine Renderingdarstellung eines Symbols speichert.For example, setting the Content property of the Button causes the control to store a rendering representation of a glyph.

Ein Visual beschreibt seinen Inhalt als ein oder mehrere Drawing-Objekte, die in einem DrawingGroup enthalten sind.A Visual describes its content as one or more Drawing objects contained within a DrawingGroup. Ein DrawingGroup beschreibt auch Deck Kraft Masken, Transformationen, Bitmapeffekte und andere Vorgänge, die auf den Inhalt angewendet werden.A DrawingGroup also describes opacity masks, transforms, bitmap effects, and other operations that are applied to its contents. DrawingGroup-Vorgänge werden in der folgenden Reihenfolge angewendet, wenn der Inhalt gerendert wird: OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSet und dann Transform.DrawingGroup operations are applied in the following order when content is rendered: OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSet, and then Transform.

Die folgende Abbildung zeigt die Reihenfolge, in der DrawingGroup-Vorgänge während der Renderingsequenz angewendet werden.The following illustration shows the order in which DrawingGroup operations are applied during the rendering sequence.

DrawingGroup-Reihenfolge der VorgängeDrawingGroup order of operations
Reihenfolge der DrawingGroup-VorgängeOrder of DrawingGroup operations

Weitere Informationen finden Sie unter Übersicht über Zeichnungsobjekte.For more information, see Drawing Objects Overview.

Zeichnungsinhalt auf Ebene des visuellen ObjektsDrawing Content at the Visual Layer

Sie instanziieren niemals direkt eine DrawingContext; Sie können jedoch einen Zeichnungs Kontext von bestimmten Methoden abrufen, z. b. DrawingGroup.Open und DrawingVisual.RenderOpen.You never directly instantiate a DrawingContext; you can, however, acquire a drawing context from certain methods, such as DrawingGroup.Open and DrawingVisual.RenderOpen. Im folgenden Beispiel wird eine DrawingContext von einem DrawingVisual abgerufen und zum Zeichnen eines Rechtecks verwendet.The following example retrieves a DrawingContext from a DrawingVisual and uses it to draw a rectangle.

// Create a DrawingVisual that contains a rectangle.
private DrawingVisual CreateDrawingVisualRectangle()
{
    DrawingVisual drawingVisual = new DrawingVisual();

    // Retrieve the DrawingContext in order to create new drawing content.
    DrawingContext drawingContext = drawingVisual.RenderOpen();

    // Create a rectangle and draw it in the DrawingContext.
    Rect rect = new Rect(new System.Windows.Point(160, 100), new System.Windows.Size(320, 80));
    drawingContext.DrawRectangle(System.Windows.Media.Brushes.LightBlue, (System.Windows.Media.Pen)null, rect);

    // Persist the drawing content.
    drawingContext.Close();

    return drawingVisual;
}
' Create a DrawingVisual that contains a rectangle.
Private Function CreateDrawingVisualRectangle() As DrawingVisual
    Dim drawingVisual As New DrawingVisual()

    ' Retrieve the DrawingContext in order to create new drawing content.
    Dim drawingContext As DrawingContext = drawingVisual.RenderOpen()

    ' Create a rectangle and draw it in the DrawingContext.
    Dim rect As New Rect(New Point(160, 100), New Size(320, 80))
    drawingContext.DrawRectangle(Brushes.LightBlue, CType(Nothing, Pen), rect)

    ' Persist the drawing content.
    drawingContext.Close()

    Return drawingVisual
End Function

Auflisten des Zeichnungsinhalts auf der Ebene eines visuellen ObjektsEnumerating Drawing Content at the Visual Layer

Zusätzlich zu den anderen Verwendungsmöglichkeiten stellen Drawing-Objekte auch ein Objektmodell für das Auflisten des Inhalts einer Visual bereit.In addition to their other uses, Drawing objects also provide an object model for enumerating the contents of a Visual.

Hinweis

Wenn Sie den Inhalt der Visualisierung auflisten, rufen Sie Drawing-Objekte und nicht die zugrunde liegende Darstellung der Renderingdaten als Liste von Vektorgrafik Anweisungen ab.When you are enumerating the contents of the visual, you are retrieving Drawing objects, and not the underlying representation of the render data as a vector graphics instruction list.

Im folgenden Beispiel wird die GetDrawing-Methode verwendet, um den DrawingGroup-Wert einer Visual abzurufen und zu auflisten.The following example uses the GetDrawing method to retrieve the DrawingGroup value of a Visual and enumerate it.

public void RetrieveDrawing(Visual v)
{
    DrawingGroup drawingGroup = VisualTreeHelper.GetDrawing(v);
    EnumDrawingGroup(drawingGroup);
}

// Enumerate the drawings in the DrawingGroup.
public void EnumDrawingGroup(DrawingGroup drawingGroup)
{
    DrawingCollection dc = drawingGroup.Children;

    // Enumerate the drawings in the DrawingCollection.
    foreach (Drawing drawing in dc)
    {
        // If the drawing is a DrawingGroup, call the function recursively.
        if (drawing is DrawingGroup group)
        {
            EnumDrawingGroup(group);
        }
        else if (drawing is GeometryDrawing)
        {
            // Perform action based on drawing type.  
        }
        else if (drawing is ImageDrawing)
        {
            // Perform action based on drawing type.
        }
        else if (drawing is GlyphRunDrawing)
        {
            // Perform action based on drawing type.
        }
        else if (drawing is VideoDrawing)
        {
            // Perform action based on drawing type.
        }
    }
}

Verwenden von visuellen Objekten zum Erstellen von SteuerelementenHow Visual Objects are Used to Build Controls

Viele der Objekte in WPFWPF bestehen aus anderen visuellen Objekten, d.h., sie können unterschiedliche Hierarchien von untergeordneten Objekten enthalten.Many of the objects in WPFWPF are composed of other visual objects, meaning they can contain varying hierarchies of descendant objects. Viele Benutzeroberflächenelemente in WPFWPF, z.B. Steuerelemente, bestehen aus mehreren visuellen Objekten, die unterschiedliche Typen von Renderingelementen darstellen.Many of the user interface elements in WPFWPF, such as controls, are composed of multiple visual objects, representing different types of rendering elements. Das Button-Steuerelement kann z. b. eine Reihe anderer Objekte enthalten, einschließlich ClassicBorderDecorator, ContentPresenter und TextBlock.For example, the Button control can contain a number of other objects, including ClassicBorderDecorator, ContentPresenter, and TextBlock.

Der folgende Code zeigt ein im Markup definiertes Button-Steuerelement.The following code shows a Button control defined in markup.

<Button Click="OnClick">OK</Button>

Wenn Sie die visuellen Objekte auflisten, die das Standard Button-Steuerelement bilden, finden Sie die unten dargestellte Hierarchie von visuellen Objekten:If you were to enumerate the visual objects that comprise the default Button control, you would find the hierarchy of visual objects illustrated below:

Diagramm der visuellen Strukturhierarchie

Das Button-Steuerelement enthält ein ClassicBorderDecorator-Element, das wiederum ein ContentPresenter-Element enthält.The Button control contains a ClassicBorderDecorator element, which in turn, contains a ContentPresenter element. Das ClassicBorderDecorator-Element ist für das Zeichnen eines Rahmens und eines Hintergrunds für die Button verantwortlich.The ClassicBorderDecorator element is responsible for drawing a border and a background for the Button. Das ContentPresenter-Element ist dafür verantwortlich, den Inhalt des Button anzuzeigen.The ContentPresenter element is responsible for displaying the contents of the Button. In diesem Fall enthält das ContentPresenter-Element ein TextBlock-Element, da Sie Text anzeigen.In this case, since you are displaying text, the ContentPresenter element contains a TextBlock element. Die Tatsache, dass das Button-Steuerelement einen ContentPresenter verwendet, bedeutet, dass der Inhalt durch andere Elemente dargestellt werden kann, z. b. eine Image oder eine Geometrie, wie z. b. ein EllipseGeometry.The fact that the Button control uses a ContentPresenter means that the content could be represented by other elements, such as an Image or a geometry, such as an EllipseGeometry.

SteuerelementvorlagenControl Templates

Der Schlüssel für die Erweiterung eines Steuer Elements in eine Hierarchie von Steuerelementen ist die ControlTemplate.The key to the expansion of a control into a hierarchy of controls is the ControlTemplate. Eine Steuerelementvorlage gibt die visuelle Standardhierarchie für ein Steuerelement an.A control template specifies the default visual hierarchy for a control. Wenn Sie explizit auf ein Steuerelement verweisen, verweisen Sie implizit auf dessen visuelle Hierarchie.When you explicitly reference a control, you implicitly reference its visual hierarchy. Sie können die Standardwerte für eine Steuerelementvorlage überschreiben, um eine angepasste visuelle Darstellung für ein Steuerelement zu erstellen.You can override the default values for a control template to create a customized visual appearance for a control. Beispielsweise können Sie den Wert für die Hintergrundfarbe des Button-Steuer Elements so ändern, dass ein linearer Farbverlaufs Farbwert anstelle eines voll tonfarbwerts verwendet wird.For example, you could modify the background color value of the Button control so that it uses a linear gradient color value instead of a solid color value. Weitere Informationen finden Sie unter Button-Stile und Vorlagen.For more information, see Button Styles and Templates.

Ein Benutzeroberflächen Element, z. b. ein Button-Steuerelement, enthält mehrere Vektorgrafik Anweisungs Listen, die die gesamte Renderingdefinition eines Steuer Elements beschreiben.A user interface element, such as a Button control, contains several vector graphics instruction lists that describe the entire rendering definition of a control. Der folgende Code zeigt ein im Markup definiertes Button-Steuerelement.The following code shows a Button control defined in markup.

<Button Click="OnClick">
  <Image Source="images\greenlight.jpg"></Image>
</Button>

Wenn Sie die Listen der visuellen Objekte und der Vektorgrafik Anweisung auflisten, die das Button-Steuerelement enthalten, finden Sie die unten dargestellte Hierarchie von Objekten:If you were to enumerate the visual objects and vector graphics instruction lists that comprise the Button control, you would find the hierarchy of objects illustrated below:

Diagramm der visuellen Struktur und des Renderings von Daten

Das Button-Steuerelement enthält ein ClassicBorderDecorator-Element, das wiederum ein ContentPresenter-Element enthält.The Button control contains a ClassicBorderDecorator element, which in turn, contains a ContentPresenter element. Das ClassicBorderDecorator-Element ist für das Zeichnen aller einzelnen Grafikelemente verantwortlich, die den Rahmen und den Hintergrund einer Schaltfläche bilden.The ClassicBorderDecorator element is responsible for drawing all the discrete graphic elements that make up the border and background of a button. Das ContentPresenter-Element ist dafür verantwortlich, den Inhalt des Button anzuzeigen.The ContentPresenter element is responsible for displaying the contents of the Button. In diesem Fall enthält das ContentPresenter-Element ein Image-Element, da Sie ein Bild anzeigen.In this case, since you are displaying an image, the ContentPresenter element contains a Image element.

Es gibt mehrere Dinge im Zusammenhang mit der Hierarchie von visuellen Objekten und Anweisungslisten für Vektorgrafiken zu beachten:There are a number of points to note about the hierarchy of visual objects and vector graphics instruction lists:

  • Die Reihenfolge in der Hierarchie stellt die Renderingreihenfolge der Zeichnungsinformationen dar.The ordering in the hierarchy represents the rendering order of the drawing information. Aus dem visuellen Stammelement werden untergeordnete Elemente von links nach rechts und von oben nach unten durchlaufen.From the root visual element, child elements are traversed, left to right, top to bottom. Wenn ein Element über visuelle untergeordnete Elemente verfügt, werden diese vor den gleichgeordneten Elementen des Elements durchlaufen.If an element has visual child elements, they are traversed before the element’s siblings.

  • Nicht Blattknoten Elemente in der Hierarchie, wie z. b. ContentPresenter, werden verwendet, um untergeordnete Elemente zu enthalten – Sie enthalten keine Anweisungs Listen.Non-leaf node elements in the hierarchy, such as ContentPresenter, are used to contain child elements—they do not contain instruction lists.

  • Wenn ein visuelles Element eine Anweisungsliste für Vektorgrafiken und visuelle untergeordnete Elemente enthält, wird die Anweisungsliste im übergeordneten visuellen Element vor Zeichnungen in einem der untergeordneten visuellen Objekte gerendert.If a visual element contains both a vector graphics instruction list and visual children, the instruction list in the parent visual element is rendered before drawings in any of the visual child objects.

  • Die Elemente in der Anweisungsliste für Vektorgrafiken werden von links nach rechts gerendert.The items in the vector graphics instruction list are rendered left to right.

Visuelle StrukturVisual Tree

Die visuelle Struktur enthält alle visuellen Elemente, die in der Benutzeroberfläche einer Anwendung verwendet werden.The visual tree contains all visual elements used in an application's user interface. Da ein visuelles Element persistent gespeicherte Zeichnungsinformationen enthält, können Sie sich die visuelle Struktur als Szenengraph vorstellen, der alle Renderinginformationen enthält, die erforderlich sind, um die Ausgabe auf dem Anzeigegerät zu erstellen.Since a visual element contains persisted drawing information, you can think of the visual tree as a scene graph, containing all the rendering information needed to compose the output to the display device. Diese Struktur ist die Ansammlung aller visuellen Elemente, die direkt von der Anwendung im Code oder im Markup erstellt werden.This tree is the accumulation of all visual elements created directly by the application, whether in code or in markup. Die visuelle Struktur enthält auch alle visuellen Elemente, die von der Vorlagenerweiterung der Elemente, wie z.B. Steuerelemente und Datenobjekte, erstellt werden.The visual tree also contains all visual elements created by the template expansion of elements such as controls and data objects.

Der folgende Code zeigt ein im Markup definiertes StackPanel-Element.The following code shows a StackPanel element defined in markup.

<StackPanel>
  <Label>User name:</Label>
  <TextBox />
  <Button Click="OnClick">OK</Button>
</StackPanel>

Wenn Sie die visuellen Objekte auflisten, die das StackPanel-Element im Markup Beispiel bilden, finden Sie die unten dargestellte Hierarchie von visuellen Objekten:If you were to enumerate the visual objects that comprise the StackPanel element in the markup example, you would find the hierarchy of visual objects illustrated below:

Diagramm der visuellen Strukturhierarchie

RenderingreihenfolgeRendering Order

Die visuelle Struktur bestimmt die Renderingreihenfolge der visuellen WPFWPF und Zeichnungsobjekte.The visual tree determines the rendering order of WPFWPF visual and drawing objects. Die Reihenfolge des Durchlaufs beginnt mit dem visuellen Stammelement, das der oberste Knoten in der visuellen Struktur ist.The order of traversal starts with the root visual, which is the top-most node in the visual tree. Die untergeordnete Elemente des visuellen Stammelements werden von links nach rechts durchlaufen.The root visual’s children are then traversed, left to right. Wenn ein visuelles Objekt über untergeordnete Elemente verfügt, werden seine untergeordneten Elemente vor den gleichgeordneten visuellen Elementen durchlaufen.If a visual has children, its children are traversed before the visual’s siblings. Dies bedeutet, dass der Inhalt eines untergeordneten visuellen Objekts vor dem Inhalt des visuellen Objekts selbst gerendert wird.This means that the content of a child visual is rendered in front of the visual's own content.

Diagramm der visuellen Struktur-Rendering-Reihenfolge

Visuelles StammobjektRoot Visual

Das visuelle Stammobjekt ist das oberste Element in der Hierarchie einer visuellen Struktur.The root visual is the top-most element in a visual tree hierarchy. In den meisten Anwendungen ist die Basisklasse des visuellen Stamm Elements entweder Window oder NavigationWindow.In most applications, the base class of the root visual is either Window or NavigationWindow. Wenn Sie jedoch visuelle Objekte in einer Win32-Anwendung hosten, ist das visuelle Stammobjekt das oberste visuelle Objekt, das Sie im Win32-Fenster hosten.However, if you were hosting visual objects in a Win32 application, the root visual would be the top-most visual you were hosting in the Win32 window. Weitere Informationen finden Sie unter [Tutorial: Hosting von visuellen Objekten in einer Win32-Anwendung @ no__t-0.For more information, see Tutorial: Hosting Visual Objects in a Win32 Application.

Beziehung zur logischen StrukturRelationship to the Logical Tree

Die logische Struktur in WPFWPF stellt die Elemente einer Anwendung zur Laufzeit dar.The logical tree in WPFWPF represents the elements of an application at run time. Obwohl Sie die Struktur nicht direkt bearbeiten, ist diese Ansicht der Anwendung nützlich, um die Vererbung von Eigenschaften und das Ereignisrouting nachzuvollziehen.Although you do not manipulate this tree directly, this view of the application is useful for understanding property inheritance and event routing. Anders als bei der visuellen Struktur kann die logische Struktur nicht visuelle Datenobjekte, z. b. ListItem, darstellen.Unlike the visual tree, the logical tree can represent non-visual data objects, such as ListItem. In vielen Fällen ist die logische Struktur eng an die Markupdefinitionen einer Anwendung angelehnt.In many cases, the logical tree maps very closely to an application's markup definitions. Der folgende Code zeigt ein im Markup definiertes DockPanel-Element.The following code shows a DockPanel element defined in markup.

<DockPanel>
  <ListBox>
    <ListBoxItem>Dog</ListBoxItem>
    <ListBoxItem>Cat</ListBoxItem>
    <ListBoxItem>Fish</ListBoxItem>
  </ListBox>
  <Button Click="OnClick">OK</Button>
</DockPanel>

Wenn Sie die logischen Objekte auflisten, die das DockPanel-Element im Markup Beispiel bilden, finden Sie die unten dargestellte Hierarchie von logischen Objekten:If you were to enumerate the logical objects that comprise the DockPanel element in the markup example, you would find the hierarchy of logical objects illustrated below:

Struktur DiagrammTree diagram
Diagramm der logischen StrukturDiagram of logical tree

Die visuelle Struktur und die logische Struktur werden mit dem aktuellen Satz von Anwendungselementen synchronisiert und spiegeln dabei alle Hinzufügungen, Löschungen oder Änderungen von Elementen wider.Both the visual tree and logical tree are synchronized with the current set of application elements, reflecting any addition, deletion, or modification of elements. Die Strukturen liefern jedoch verschiedene Ansichten der Anwendung.However, the trees present different views of the application. Anders als bei der visuellen Struktur, erweitert die logische Struktur nicht das ContentPresenter-Element eines Steuer Elements.Unlike the visual tree, the logical tree does not expand a control's ContentPresenter element. Dies bedeutet, dass keine direkte 1:1-Entsprechung zwischen einer logischen Struktur und einer visuellen Struktur für den gleichen Satz von Objekten vorhanden ist.This means there is not a direct one-to-one correspondence between a logical tree and a visual tree for the same set of objects. Tatsächlich führt das Aufrufen der GetChildren-Methode des LogicalTreeHelper -Objekts und der GetChild-Methode des VisualTreeHelper -Objekts zu unterschiedlichen Ergebnissen.In fact, invoking the LogicalTreeHelper object's GetChildren method and the VisualTreeHelper object's GetChild method using the same element as a parameter yields differing results.

Weitere Informationen über die logische Struktur finden Sie unter Strukturen in WPF.For more information on the logical tree, see Trees in WPF.

Anzeigen der visuellen Struktur mit XamlPadViewing the Visual Tree with XamlPad

Das WPFWPF-Tool XamlPad bietet eine Option zum Anzeigen und untersuchen der visuellen Struktur, die dem aktuell definierten XAML-Inhalt entspricht.The WPFWPF tool, XamlPad, provides an option for viewing and exploring the visual tree that corresponds to the currently defined XAML content. Klicken Sie auf die Schaltfläche Visuelle Struktur anzeigen der Menüleiste, um die visuelle Struktur anzuzeigen.Click the Show Visual Tree button on the menu bar to display the visual tree. Das folgende Beispiel veranschaulicht die Erweiterung von XAML-Inhalt in visuelle Struktur Knoten im Panel des visuellen Struktur- Explorers von XamlPad:The following illustrates the expansion of XAML content into visual tree nodes in the Visual Tree Explorer panel of XamlPad:

Visueller Struktur-Explorer-Bereich in XamlPad

Beachten Sie, dass die Steuerelemente "Label", "TextBox" und "Button" jeweils eine separate visuelle Objekthierarchie im visuellen Struktur- Explorer -Panel von XamlPad anzeigen.Notice how the Label, TextBox, and Button controls each display a separate visual object hierarchy in the Visual Tree Explorer panel of XamlPad. Dies liegt daran, dass WPFWPF-Steuerelemente über eine ControlTemplate verfügen, die die visuelle Struktur dieses Steuer Elements enthält.This is because WPFWPF controls have a ControlTemplate that contains the visual tree of that control. Wenn Sie explizit auf ein Steuerelement verweisen, verweisen Sie implizit auf dessen visuelle Hierarchie.When you explicitly reference a control, you implicitly reference its visual hierarchy.

Erstellung von visuellen LeistungsprofilenProfiling Visual Performance

WPFWPF stellt eine Suite von Leistungsprofilerstellungstools bereit, mit deren Hilfe Sie das Laufzeitverhalten der Anwendung analysieren und die Typen der anwendbaren Leistungsoptimierungen bestimmen können.provides a suite of performance profiling tools that allow you to analyze the run-time behavior of your application and determine the types of performance optimizations you can apply. Das Visual Profiler-Tool bietet eine umfassende grafische Sicht der Leistungsdaten, indem diese direkt der visuellen Struktur der Anwendung zugeordnet werden.The Visual Profiler tool provides a rich, graphical view of performance data by mapping directly to the application's visual tree. In diesem Screenshot verschafft Ihnen der Abschnitt CPU-Auslastung von Visual Profiler eine genaue Aufschlüsselung der Nutzung von WPFWPF-Diensten eines Objekts, z.B. Rendering und Layout.In this screenshot, the CPU Usage section of the Visual Profiler gives you a precise breakdown of an object's use of WPFWPF services, such as rendering and layout.

Visual Profiler-Anzeige AusgabeVisual Profiler display output
Visual Profiler-AnzeigeausgabeVisual Profiler display output

Verhalten des visuellen RenderingsVisual Rendering Behavior

WPFWPF verfügt über Funktionen, die das Renderingverhalten visueller Objekte beeinflussen: Retained Mode-Grafiken, Vektorgrafiken und geräteunabhängige Grafiken.introduces several features that affect the rendering behavior of visual objects: retained mode graphics, vector graphics, and device independent graphics.

Retained Mode-GrafikenRetained Mode Graphics

Einer der Schlüssel zum Verständnis der Rolle des visuellen Objekts ist der Unterschied zwischen Grafiksystemen mit Direktmodus und Retained Mode.One of the keys to understanding the role of the Visual object is to understand the difference between immediate mode and retained mode graphics systems. Eine standardmäßige Win32-Anwendung, die auf GDI oder GDI+ basiert, verwendet ein Grafiksystem mit unmittelbaren Modus.A standard Win32 application based on GDI or GDI+ uses an immediate mode graphics system. Das heißt, dass die Anwendung für das Neuzeichnen des Teils des Clientbereichs verantwortlich ist, der aufgrund einer Aktion, z.B. Änderung der Größe eines Fensters, oder eines Objekts, dessen visuelle Darstellung geändert wird, ungültig ist.This means that the application is responsible for repainting the portion of the client area that is invalidated, due to an action such as a window being resized, or an object changing its visual appearance.

Diagramm der Win32-Renderingsequenz

Im Gegensatz dazu verwendet WPFWPF ein System mit Retained Mode.In contrast, WPFWPF uses a retained mode system. Dies bedeutet, dass Objekte, die eine visuelle Darstellung haben, einen Satz serialisierter Zeichnungsdaten definieren.This means application objects that have a visual appearance define a set of serialized drawing data. Nachdem die Zeichnungsdaten definiert wurden, ist das System für alle Repaint-Anforderungen zum Rendern der Anwendungsobjekte verantwortlich.Once the drawing data is defined, the system is responsible thereafter for responding to all repaint requests for rendering the application objects. Auch zur Laufzeit können Sie Anwendungsobjekte ändern oder erstellen und das System weiterhin auf Zeichnungsanforderungen reagieren lassen.Even at run time, you can modify or create application objects, and still rely on the system for responding to paint requests. Die Leistungsstärke eines Grafiksystems mit Retained Mode ist darauf zurückzuführen, dass Zeichnungsinformationen stets in einem serialisierten Zustand von der Anwendung gespeichert werden, die Verantwortung für das Rendering aber dem System überlassen wird.The power in a retained mode graphics system is that drawing information is always persisted in a serialized state by the application, but rendering responsibility left to the system. Das folgende Diagramm zeigt, wie die Anwendung WPFWPF auf Zeichnungsanforderungen reagieren lässt.The following diagram shows how the application relies on WPFWPF for responding to paint requests.

Diagramm der WPF-Renderingsequenz

Intelligentes NeuzeichnenIntelligent Redrawing

Einer der größten Vorteile bei der Verwendung von Grafiken mit dem Retained Mode besteht darin, dass WPFWPF effizient optimieren kann, was in der Anwendung neu gezeichnet werden muss.One of the biggest benefits in using retained mode graphics is that WPFWPF can efficiently optimize what needs to be redrawn in the application. Auch wenn Sie über eine komplexe Szene mit unterschiedlicher Deckkraft verfügen, müssen Sie im Allgemeinen nicht für besondere Zwecke Code zum Neuzeichnen optimieren.Even if you have a complex scene with varying levels of opacity, you generally do not need to write special-purpose code to optimize redrawing. Vergleichen Sie dies mit der Win32-Programmierung, bei der Sie viele Ressourcen in die Optimierung Ihrer Anwendung durch Minimierung des Neuzeichnungaufwands im Aktualisierungsbereich investieren können.Compare this with Win32 programming in which you can spend a great deal of effort in optimizing your application by minimizing the amount of redrawing in the update region. Ein Beispiel für den Typ der Komplexität in Verbindung mit der Optimierung der Neuzeichnung in Win32-Anwendungen finden Sie unter Neuzeichnen im Aktualisierungsbereich.See Redrawing in the Update Region for an example of the type of complexity involved in optimizing redrawing in Win32 applications.

VektorgrafikenVector Graphics

WPFWPF verwendet Vektorgrafiken als Renderingdatenformat.uses vector graphics as its rendering data format. Vektorgrafiken – darunter Scalable Vector Graphics (SVG), Windows-Metadateien (WMF) und TrueType-Schriftarten – speichern Renderingdaten und übertragen sie als Liste von Anweisungen, die beschreiben, wie ein Bild mit Grafikprimitiven neu erstellt wird.Vector graphics—which include Scalable Vector Graphics (SVG), Windows metafiles (.wmf), and TrueType fonts—store rendering data and transmit it as a list of instructions that describe how to recreate an image using graphics primitives. TrueType-Schriftarten beispielsweise sind Umrissschriftarten, die einen Satz von Linien, Kurven und Befehlen anstelle eines Arrays von Pixeln beschreiben.For example, TrueType fonts are outline fonts that describe a set of lines, curves, and commands, rather than an array of pixels. Einer der wichtigsten Vorteile von Vektorgrafiken ist die Möglichkeit, auf eine beliebige Größe und Auflösung zu skalieren.One of the key benefits of vector graphics is the ability to scale to any size and resolution.

Im Gegensatz zu Vektorgrafiken speichern Bitmapgrafiken Renderingdaten als pixelweise Darstellung eines Bilds, die bereits für eine bestimmte Auflösung gerendert ist.Unlike vector graphics, bitmap graphics store rendering data as a pixel-by-pixel representation of an image, pre-rendered for a specific resolution. Einer der wichtigsten Unterschiede zwischen Bitmap- und Vektorgrafikformaten ist die Originaltreue in Bezug auf das ursprüngliche Bild.One of the key differences between bitmap and vector graphic formats is fidelity to the original source image. Wenn beispielsweise die Größe eines Quellbilds geändert wird, strecken Bitmapgrafiksysteme das Bild, während Vektorgrafiksysteme das Bild skalieren und dabei die Bildtreue beibehalten.For example, when the size of a source image is modified, bitmap graphics systems stretch the image, whereas vector graphics systems scale the image, preserving the image fidelity.

Die folgende Abbildung zeigt ein Quellbild, dessen Größe um 300 % geändert wurde.The following illustration shows a source image that has been resized by 300%. Beachten Sie die Verzerrungen, die angezeigt werden, wenn das Quellbild als Bitmap-Grafik gestreckt und nicht als Vektorgrafikbild skaliert wird.Notice the distortions that appear when the source image is stretched as a bitmap graphics image rather than scaled as a vector graphics image.

Unterschiede zwischen Raster- und Vektorgrafiken

Das folgende Markup zeigt zwei definierte Path-Elemente.The following markup shows two Path elements defined. Das zweite Element verwendet einen ScaleTransform, um die Größe der Zeichnungs Anweisungen des ersten Elements um 300% zu ändern.The second element uses a ScaleTransform to resize the drawing instructions of the first element by 300%. Beachten Sie, dass die Zeichnungs Anweisungen in den Path-Elementen unverändert bleiben.Notice that the drawing instructions in the Path elements remain unchanged.

<Path
  Data="M10,100 C 60,0 100,200 150,100 z"
  Fill="{StaticResource linearGradientBackground}"
  Stroke="Black"
  StrokeThickness="2" />

<Path
  Data="M10,100 C 60,0 100,200 150,100 z"
  Fill="{StaticResource linearGradientBackground}"
  Stroke="Black"
  StrokeThickness="2" >
  <Path.RenderTransform>
    <ScaleTransform ScaleX="3.0" ScaleY="3.0" />
  </Path.RenderTransform>
</Path>

Info zu auflösungs- und geräteunabhängiger GrafikAbout Resolution and Device-Independent Graphics

Zwei Systemfaktoren bestimmen die Größe von Text und Grafiken auf dem Bildschirm: Auflösung und DPI.There are two system factors that determine the size of text and graphics on your screen: resolution and DPI. Die Auflösung beschreibt die Anzahl der Pixel, die auf dem Bildschirm angezeigt werden.Resolution describes the number of pixels that appear on the screen. Mit höherer Auflösung werden Pixel kleiner und lassen Grafiken und Text kleiner erscheinen.As the resolution gets higher, pixels get smaller, causing graphics and text to appear smaller. Eine Grafik, die auf einem Monitor mit 1024 x 768 angezeigt wird, erscheint viel kleiner, wenn die Auflösung in 1600 x 1200 geändert wird.A graphic displayed on a monitor set to 1024 x 768 will appear much smaller when the resolution is changed to 1600 x 1200.

Die andere Systemeinstellung, DPI, beschreibt die Größe eines Bildschirmzolls in Pixeln.The other system setting, DPI, describes the size of a screen inch in pixels. Die meisten Windows-Systeme verfügen über den dpi-Wert 96, was bedeutet, dass ein Bildschirm Zoll 96 Pixel ist.Most Windows systems have a DPI of 96, which means a screen inch is 96 pixels. Durch Erhöhen der DPI-Einstellung wird der Bildschirmzoll größer, durch Verringern des DPI-Werts wird der Bildschirmzoll kleiner.Increasing the DPI setting makes the screen inch larger; decreasing the DPI makes the screen inch smaller. Das bedeutet, dass ein Bildschirmzoll nicht die gleiche Größe wie ein realer Zoll hat; auf den meisten System trifft dies wahrscheinlich zu.This means that a screen inch isn't the same size as a real-world inch; on most systems, it's probably not. Wenn Sie den DPI-Wert erhöhen, werden mit DPI kompatible Grafiken und Text größer, da Sie den Bildschirmzoll vergrößert haben.As you increase the DPI, DPI-aware graphics and text become larger because you've increased the size of the screen inch. Durch Erhöhen des DPI-Werts kann sich die Lesbarkeit von Text, besonders in hoher Auflösung, verbessern.Increasing the DPI can make text easier to read, especially at high resolutions.

Nicht alle Programme sind DPI-kompatibel: Einige verwenden Hardwarepixel als primäre Maßeinheit. Eine Änderung des DPI-Systemwerts hat keine Auswirkungen auf diese Anwendungen.Not all applications are DPI-aware: some use hardware pixels as the primary unit of measurement; changing the system DPI has no effect on these applications. Viele andere Clientanwendungen verwenden Einheiten, die mit DPI kompatibel sind, um Schriftgrade zu beschreiben, aber verwenden Pixel, um alles andere zu beschreiben.Many other applications use DPI-aware units to describe font sizes, but use pixels to describe everything else. Ein zu großer oder zu kleiner DPI-Wert kann zu Layoutproblemen für diese Anwendungen führen, da der Text der Anwendungen mit der DPI-Einstellung skaliert wird, während dies bei den Anwendungen der Benutzeroberfläche nicht der Fall ist.Making the DPI too small or too large can cause layout problems for these applications, because the applications' text scales with the system's DPI setting, but the applications' UI does not. Das Problem wurde für mit WPFWPF entwickelte Anwendungen gelöst.This problem has been eliminated for applications developed using WPFWPF.

WPFWPF unterstützt die automatische Skalierung mit geräteunabhängigen Pixeln als primärer Maßeinheit anstelle von Hardwarepixeln. Grafiken und Text skalieren ordnungsgemäß ohne zusätzlichen Eingriff seitens des Entwicklers der Anwendung.supports automatic scaling by using the device independent pixel as its primary unit of measurement, instead of hardware pixels; graphics and text scale properly without any extra work from the application developer. Die folgende Abbildung veranschaulicht anhand eines Beispiels, wie WPFWPF-Text und -Grafiken mit unterschiedlichen DPI-Einstellungen angezeigt werden.The following illustration shows an example of how WPFWPF text and graphics are appear at different DPI settings.

Grafiken und Text mit unterschiedlichen dpi-EinstellungenGraphics and text at different DPI settings
Grafiken und Text mit unterschiedlichen DPI-EinstellungenGraphics and text at different DPI settings

VisualTreeHelper-KlasseVisualTreeHelper Class

Die VisualTreeHelper-Klasse ist eine statische Hilfsklasse, die Funktionen auf niedriger Ebene für die Programmierung auf visueller Objektebene bereitstellt, die in sehr spezifischen Szenarien nützlich ist, z. b. bei der Entwicklung von benutzerdefinierten Steuerelementen mit hoher Leistung.The VisualTreeHelper class is a static helper class that provides low-level functionality for programming at the visual object level, which is useful in very specific scenarios, such as developing high-performance custom controls. In den meisten Fällen bieten die @no__t 0-Framework-Objekte auf höherer Ebene, z. b. Canvas und TextBlock, eine größere Flexibilität und Benutzerfreundlichkeit.In most case, the higher-level WPFWPF framework objects, such as Canvas and TextBlock, offer greater flexibility and ease of use.

TreffertestsHit Testing

Die VisualTreeHelper-Klasse stellt Methoden für Treffer Tests für visuelle Objekte bereit, wenn die standardmäßige Treffer Testunterstützung nicht Ihren Anforderungen entspricht.The VisualTreeHelper class provides methods for hit testing on visual objects when the default hit test support does not meet your needs. Sie können die HitTest-Methoden in der VisualTreeHelper-Klasse verwenden, um zu bestimmen, ob sich ein Geometrie-oder Punkt Koordinaten Wert innerhalb der Grenze eines bestimmten Objekts befindet, z. b. ein Steuerelement oder ein grafisches Element.You can use the HitTest methods in the VisualTreeHelper class to determine whether a geometry or point coordinate value is within the boundary of a given object, such as a control or graphic element. Sie können beispielsweise mit Treffertests bestimmen, ob ein Mausklick innerhalb des umschließenden Rechtecks eines Objekts innerhalb der Geometrie eines Kreises liegt. Außerdem können Sie angeben, dass die standardmäßige Implementierung des Treffertests Ihre eigenen benutzerdefinierten Treffertestberechnungen überschreibt.For example, you could use hit testing to determine whether a mouse click within the bounding rectangle of an object falls within the geometry of a circle You can also choose to override the default implementation of hit testing to perform your own custom hit test calculations.

Weitere Informationen zu Treffertests finden Sie unter Treffertests in der visuellen Ebene.For more information on hit testing, see Hit Testing in the Visual Layer.

Auflisten der visuellen StrukturEnumerating the Visual Tree

Die VisualTreeHelper-Klasse stellt Funktionen zum Auflisten der Elemente einer visuellen Struktur bereit.The VisualTreeHelper class provides functionality for enumerating the members of a visual tree. Rufen Sie die GetParent-Methode auf, um ein übergeordnetes Element abzurufen.To retrieve a parent, call the GetParent method. Rufen Sie die GetChild-Methode auf, um ein untergeordnetes Element oder einen direkt Nachfolger eines visuellen Objekts abzurufen.To retrieve a child, or direct descendant, of a visual object, call the GetChild method. Diese Methode gibt eine untergeordnete Visual des übergeordneten Elements am angegebenen Index zurück.This method returns a child Visual of the parent at the specified index.

Im folgenden Beispiel wird veranschaulicht, wie Sie alle Nachfolgerelemente eines visuellen Objekts auflisten. Diese Methode können Sie verwenden, wenn Sie alle Renderinginformationen einer Hierarchie von visuellen Objekten serialisieren möchten.The following example shows how to enumerate all the descendants of a visual object, which is a technique you might want to use if you were interested in serializing all the rendering information of a visual object hierarchy.

// Enumerate all the descendants of the visual object.
static public void EnumVisual(Visual myVisual)
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(myVisual); i++)
    {
        // Retrieve child visual at specified index value.
        Visual childVisual = (Visual)VisualTreeHelper.GetChild(myVisual, i);

        // Do processing of the child visual object.

        // Enumerate children of the child visual object.
        EnumVisual(childVisual);
    }
}
' Enumerate all the descendants of the visual object.
Public Shared Sub EnumVisual(ByVal myVisual As Visual)
    For i As Integer = 0 To VisualTreeHelper.GetChildrenCount(myVisual) - 1
        ' Retrieve child visual at specified index value.
        Dim childVisual As Visual = CType(VisualTreeHelper.GetChild(myVisual, i), Visual)

        ' Do processing of the child visual object.

        ' Enumerate children of the child visual object.
        EnumVisual(childVisual)
    Next i
End Sub

In den meisten Fällen ist die logische Struktur eine sinnvollere Darstellung der Elemente in einer WPFWPF-Anwendung.In most cases, the logical tree is a more useful representation of the elements in a WPFWPF application. Obwohl Sie die logische Struktur nicht ändern, ist diese Ansicht der Anwendung nützlich, um die Vererbung von Eigenschaften und das Ereignisrouting nachzuvollziehen.Although you do not modify the logical tree directly, this view of the application is useful for understanding property inheritance and event routing. Anders als bei der visuellen Struktur kann die logische Struktur nicht visuelle Datenobjekte, z. b. ListItem, darstellen.Unlike the visual tree, the logical tree can represent non-visual data objects, such as ListItem. Weitere Informationen über die logische Struktur finden Sie unter Strukturen in WPF.For more information on the logical tree, see Trees in WPF.

Die VisualTreeHelper-Klasse stellt Methoden zum Zurückgeben des umgebenden Rechtecks von visuellen Objekten bereit.The VisualTreeHelper class provides methods for returning the bounding rectangle of visual objects. Sie können das umgebende Rechteck eines visuellen Objekts zurückgeben, indem Sie GetContentBounds aufrufen.You can return the bounding rectangle of a visual object by calling GetContentBounds. Sie können das umgebende Rechteck aller Nachfolger eines visuellen Objekts, einschließlich des visuellen Objekts selbst, durch Aufrufen von GetDescendantBounds zurückgeben.You can return the bounding rectangle of all the descendants of a visual object, including the visual object itself, by calling GetDescendantBounds. Der folgende Code zeigt, wie Sie das umschließende Rechteck des visuellen Objekts und aller Nachfolgerknoten berechnen.The following code shows how you would calculate the bounding rectangle of a visual object and all its descendants.

// Return the bounding rectangle of the parent visual object and all of its descendants.
Rect rectBounds = VisualTreeHelper.GetDescendantBounds(parentVisual);
' Return the bounding rectangle of the parent visual object and all of its descendants.
Dim rectBounds As Rect = VisualTreeHelper.GetDescendantBounds(parentVisual)

Siehe auchSee also