Übersicht über das WPF-Grafikrendering

Dieses Thema enthält eine Übersicht über die visuelle WPF-Ebene. Sie konzentriert sich auf die Rolle der Visual Klasse für die Renderingunterstützung im WPF-Modell.

Rolle des visuellen Objekts

Die Visual Klasse ist die grundlegende Abstraktion, von der jedes FrameworkElement Objekt abgeleitet wird. Es dient auch als Einstiegspunkt zum Schreiben neuer Steuerelemente in WPF und kann auf viele Arten als Fensterhandle (HWND) im Win32-Anwendungsmodell betrachtet werden.

Das Visual-Objekt ist ein kernes WPF-Objekt, dessen primäre Rolle die Bereitstellung von Renderingunterstützung ist. Steuerelemente der Benutzeroberfläche wie Button und TextBox sind von der Visual-Klasse abgeleitet und verwenden sie für die Beibehaltung der Renderingdaten. Das Visual Objekt bietet Unterstützung für:

• Ausgabeanzeige: Rendern des permanenten, serialisierten Zeichnungsinhalts eines visuellen Elements.

• Transformationen: Transformationen an einem visuellen Element vornehmen.

• Clipping: Bereitstellen der Unterstützung des Clippingbereichs für ein visuelles Element.

• Treffertests: Bestimmen, ob eine Koordinate oder Geometrie innerhalb der Grenzen eines visuellen Elements enthalten ist.

• Begrenzungsfeldberechnungen: Bestimmen des umgebenden Rechtecks eines visuellen Elements.

Das Visual Objekt bietet jedoch keine Unterstützung für Nichtrenderingfeatures, z. B.:

• Ereignisbehandlung

• Gestaltung

• Stile

• Datenbindung

• Globalisierung

Visual wird als öffentliche abstrakte Klasse verfügbar gemacht, von der untergeordnete Klassen abgeleitet werden müssen. Die folgende Abbildung zeigt die Hierarchie der visuellen Objekte, die in WPF verfügbar gemacht werden.

DrawingVisual-Klasse

Die DrawingVisual ist eine einfache Zeichnungsklasse, die zum Rendern von Formen, Bildern oder Text verwendet wird. Diese Klasse gilt als einfach, da sie keine Layout- oder Ereignisbehandlung bereitstellt, wodurch die Laufzeitleistung verbessert wird. Aus diesem Grund sind Zeichnungen ideal für Hintergründe und ClipArt.For this reason, drawings are ideal for backgrounds and clipart. Dies DrawingVisual kann zum Erstellen eines benutzerdefinierten visuellen Objekts verwendet werden. Weitere Informationen finden Sie unter Verwenden von DrawingVisual-Objekten.

Viewport3DVisual-Klasse

Dies Viewport3DVisual stellt eine Brücke zwischen 2D Visual und Visual3D Objekten bereit. Die Visual3D Klasse ist die Basisklasse für alle visuellen 3D-Elemente. Dies Viewport3DVisual erfordert, dass Sie einen Camera Wert und einen Viewport Wert definieren. Mit der Kamera können Sie die Szene ansehen. Der Viewport legt fest, wo die Projektion auf die 2D-Oberfläche abgebildet wird. Weitere Informationen zu 3D in WPF finden Sie in der Übersicht über 3D-Grafiken.

ContainerVisual-Klasse

Die ContainerVisual Klasse wird als Container für eine Auflistung von Visual Objekten verwendet. Die DrawingVisual Klasse wird von der ContainerVisual Klasse abgeleitet, sodass sie eine Auflistung visueller Objekte enthalten kann.

Zeichnungsinhalt in visuellen Objekten

Ein Visual Objekt speichert seine Renderdaten als Vektorgrafikanweisungsliste. Jedes Element in der Befehlsliste stellt eine Reihe von Grafikdaten und zugeordneten Ressourcen in einem serialisierten Format dar. Es gibt vier verschiedene Arten von Renderdaten, die Zeichnungsinhalte enthalten können.

Zeichnungsinhaltstyp	BESCHREIBUNG
Vektorgrafik	Stellt Vektorgrafikdaten und alle zugehörigen Brush und Pen Informationen dar.
Abbildung	Stellt ein Bild innerhalb eines Bereichs dar, der durch eine Rect definiert wird.
Glyphe	Stellt eine Zeichnung dar, die eine Sequenz von Glyphen aus einer angegebenen Schriftartressource rendert. So wird Text dargestellt.
Video	Stellt eine Zeichnung dar, die Video rendert.

Mit DrawingContext können Sie einen Visual mit visuellen Inhalten befüllen. Wenn Sie die Draw-Befehle eines DrawingContext Objekts verwenden, speichern Sie tatsächlich eine Reihe von Renderdaten, die später vom Grafiksystem verwendet werden. Sie zeichnen nicht in Echtzeit auf den Bildschirm.

Wenn Sie ein WPF-Steuerelement wie z. B. Button erstellen, generiert das Steuerelement implizit Renderdaten für seine eigene Darstellung. Wenn Sie beispielsweise die Content Eigenschaft des Button Steuerelements festlegen, veranlasst dies das Steuerelement, eine Rendering-Darstellung einer Glyphe zu speichern.

Ein Visual stellt seinen Inhalt dar als ein Drawing oder mehrere Objekte in einem DrawingGroup. A DrawingGroup beschreibt außerdem Deckkraftmasken, Transformationen, Bitmapeffekte und andere Vorgänge, die auf seinen Inhalt angewendet werden. DrawingGroup Vorgänge werden in der folgenden Reihenfolge angewendet, wenn Inhalte gerendert werden: OpacityMask, Opacity, BitmapEffect, , ClipGeometry, GuidelineSetund dann Transform.

Die folgende Abbildung zeigt die Reihenfolge, in der DrawingGroup Vorgänge während der Renderingsequenz angewendet werden.

Reihenfolge der DrawingGroup-Vorgänge

Weitere Informationen finden Sie unter Drawing Objects Overview.

Inhalt auf der visuellen Darstellungsebene zeichnen

Sie instanziieren niemals direkt ein DrawingContext. Sie können jedoch einen Zeichnungskontext aus bestimmten Methoden erwerben, wie z. B. DrawingGroup.Open und DrawingVisual.RenderOpen. Im folgenden Beispiel wird ein DrawingContext Aus einem DrawingVisual Objekt abgerufen und zum Zeichnen eines Rechtecks verwendet.

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

Aufzählen von Zeichnungsinhalten auf der visuellen Ebene

Zusätzlich zu ihren anderen Verwendungen stellen Drawing Objekte auch ein Objektmodell zum Aufzählen des Inhalts eines Containers Visual bereit.

Hinweis

Wenn Sie den Inhalt des visuellen Elements aufzählen, werden Objekte abgerufen Drawing und nicht die zugrunde liegende Darstellung der Renderdaten als Vektorgrafikanweisungsliste.

Im folgenden Beispiel wird die GetDrawing Methode verwendet, um den DrawingGroup Wert eines Visual abzurufen und ihn aufzulisten.

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

So werden visuelle Objekte zum Erstellen von Steuerelementen verwendet

Viele der Objekte in WPF bestehen aus anderen visuellen Objekten, was bedeutet, dass sie unterschiedliche Hierarchien von untergeordneten Objekten enthalten können. Viele der Benutzeroberflächenelemente in WPF, z. B. Steuerelemente, bestehen aus mehreren visuellen Objekten, die verschiedene Arten von Renderingelementen darstellen. Das Button-Steuerelement kann z. B. eine Reihe anderer Objekte enthalten, einschließlich ClassicBorderDecorator, ContentPresenter und TextBlock.

Der folgende Code zeigt ein im Markup definiertes Button Steuerelement.

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

Wenn Sie die visuellen Objekte aufzählen möchten, die das Standardsteuerelement Button umfassen, finden Sie die Hierarchie visueller Objekte, die unten dargestellt sind:

Das Button Steuerelement enthält ein ClassicBorderDecorator Element, das wiederum ein ContentPresenter Element enthält. Das ClassicBorderDecorator Element ist verantwortlich für das Zeichnen eines Rahmens und eines Hintergrunds für die Button. Das ContentPresenter Element ist für die Anzeige des Inhalts des ButtonElements verantwortlich. Da Text angezeigt wird, enthält das ContentPresenter Element in diesem Fall ein TextBlock Element. Die Tatsache, dass das Button-Steuerelement ein ContentPresenter verwendet, bedeutet, dass der Inhalt durch andere Elemente dargestellt werden kann, z. B. durch eine Image oder eine Geometrie, wie z. B. eine EllipseGeometry.

Steuerelementvorlagen

Der Schlüssel zur Erweiterung eines Steuerelements in eine Hierarchie von Steuerelementen ist die ControlTemplate. Eine Steuerelementvorlage gibt die standardmäßige visuelle Hierarchie für ein Steuerelement an. Wenn Sie explizit auf ein Steuerelement verweisen, verweisen Sie implizit auf die visuelle Hierarchie. Sie können die Standardwerte für eine Steuerelementvorlage überschreiben, um eine angepasste visuelle Darstellung für ein Steuerelement zu erstellen. Sie können z. B. den Hintergrundfarbwert des Button Steuerelements so ändern, dass anstelle eines Volltonfarbwerts ein linearer Farbverlaufswert verwendet wird. Weitere Informationen finden Sie unter Schaltflächenformatvorlagen und -vorlagen.

Ein Benutzeroberflächenelement, z. B. ein Button Steuerelement, enthält mehrere Vektorgrafikanweisungslisten, die die gesamte Renderingdefinition eines Steuerelements beschreiben. Der folgende Code zeigt ein im Markup definiertes Button Steuerelement.

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

Wenn Sie die Listen mit visuellen Objekten und Vektorgrafiken aufzählen möchten, die das Button Steuerelement umfassen, finden Sie die Hierarchie der unten dargestellten Objekte:

Das Button Steuerelement enthält ein ClassicBorderDecorator Element, das wiederum ein ContentPresenter Element enthält. Das ClassicBorderDecorator Element ist für das Zeichnen aller einzelnen Grafikelemente verantwortlich, die den Rahmen und den Hintergrund einer Schaltfläche bilden. Das ContentPresenter Element ist für die Anzeige des Inhalts des ButtonElements verantwortlich. In diesem Fall enthält das ContentPresenter Element, da Sie ein Bild anzeigen, ein Image Element.

Es gibt eine Reihe von Punkten, die bezüglich der Hierarchie visueller Objekte und den Anweisungslisten für Vektorgrafiken zu beachten sind.

• Die Sortierung in der Hierarchie stellt die Renderreihenfolge der Zeichnungsinformationen dar. Aus dem visuellen Wurzelelement werden die untergeordneten Elemente von links nach rechts und von oben nach unten durchlaufen. Wenn ein Element visuelle untergeordnete Elemente enthält, werden diese vor seinen Geschwisterelementen durchlaufen.

• Nicht-Blattknotenelemente in der Hierarchie, wie ContentPresenter, werden verwendet, um untergeordnete Elemente zu enthalten – sie enthalten keine Anweisungslisten.

• Wenn ein visuelles Element sowohl eine Anweisungsliste für Vektorgrafiken als auch visuelle untergeordnete Elemente enthält, wird die Anweisungsliste im übergeordneten visuellen Element vor den Zeichnungen in den visuellen untergeordneten Objekten gerendert.

• Die Elemente in der Vektorgrafikanweisungsliste werden von links nach rechts gerendert.

Visueller Baum

Die visuelle Struktur, auch als visueller Baum bekannt, enthält alle visuellen Elemente, die auf der Benutzeroberfläche einer Anwendung verwendet werden. Da ein visuelles Element permanente Zeichnungsinformationen enthält, können Sie sich die visuelle Struktur als Szenendiagramm vorstellen, die alle Renderinginformationen enthält, die zum Verfassen der Ausgabe auf dem Anzeigegerät erforderlich sind. Diese Struktur ist die Anhäufung aller visuellen Elemente, die direkt von der Anwendung erstellt werden, unabhängig davon, ob im Code oder im Markup. Die visuelle Struktur enthält auch alle visuellen Elemente, die durch die Vorlagenerweiterung von Elementen wie Steuerelementen und Datenobjekten erstellt wurden.

Der folgende Code zeigt ein StackPanel im Markup definiertes Element.

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

Wenn Sie die visuellen Objekte aufzählen möchten, die das StackPanel Element im Markupbeispiel umfassen, finden Sie die Hierarchie visueller Objekte, die unten dargestellt sind:

Renderreihenfolge

Die visuelle Struktur bestimmt die Renderreihenfolge von visuellen WPF- und Zeichnungsobjekten. Die Traversierungsreihenfolge beginnt mit dem visuellen Stammelement, das der oberste Knoten im visuellen Baum ist. Die untergeordneten Elemente des Wurzelvisuells werden dann von links nach rechts durchgegangen. Wenn ein visuelles Element untergeordnete Elemente aufweist, werden die untergeordneten Elemente vor den Geschwisterelementen des visuellen Elements durchlaufen. Dies bedeutet, dass der Inhalt eines Kind-Visuellen Elements vor dem eigenen Inhalt des übergeordneten visuellen Elements gerendert wird.

Visuelles Stammelement

Das visuelle Stammelement ist das oberste Element in einer visuellen Strukturhierarchie. In den meisten Anwendungen ist die Basisklasse des visuellen Stammelements entweder Window oder NavigationWindow. Wenn Sie jedoch visuelle Objekte in einer Win32-Anwendung hosten, wäre das Stammvisual die am häufigsten visuelle Darstellung, die Sie im Win32-Fenster hosten. Weitere Informationen finden Sie im Lernprogramm: Hosten von visuellen Objekten in einer Win32-Anwendung.

Beziehung zum logischen Baum

Die logische Struktur in WPF stellt die Elemente einer Anwendung zur Laufzeit dar. Obwohl Sie diesen Baum nicht direkt manipulieren, hilft diese Applikationsansicht dabei, die Eigenschaftsvererbung und das Ereignisrouting besser zu verstehen. Im Gegensatz zur visuellen Struktur kann die logische Struktur nicht-visuelle Datenobjekte darstellen, wie z. B. ListItem. In vielen Fällen entspricht die logische Struktur den Markupdefinitionen einer Anwendung sehr genau. Der folgende Code zeigt ein DockPanel im Markup definiertes Element.

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

Wenn Sie die logischen Objekte aufzählen möchten, die das DockPanel Element im Markupbeispiel umfassen, finden Sie die Hierarchie der logischen Objekte unten dargestellt:

Diagramm des logischen Baums

Sowohl die visuelle Struktur als auch die logische Struktur werden mit dem aktuellen Satz von Anwendungselementen synchronisiert, der alle Ergänzungen, Löschungen oder Änderungen von Elementen widerspiegelt. Die Bäume stellen jedoch unterschiedliche Ansichten der Anwendung dar. Im Gegensatz zur visuellen Struktur erweitert die logische Struktur das Element eines Steuerelements ContentPresenter nicht. Dies bedeutet, dass es keine direkte 1:1-Entsprechung zwischen einer logischen Struktur und einer visuellen Struktur für dieselbe Gruppe von Objekten gibt. Tatsächlich führt das Aufrufen der Methode des LogicalTreeHelper-ObjektsGetChildren und der Methode des GetChild mit demselben Element wie ein Parameter zu unterschiedlichen Ergebnissen.

Weitere Informationen zur logischen Struktur finden Sie unter "Strukturen" in WPF.

Anzeigen des visuellen Baums mit XamlPad

Das WPF-Tool XamlPad bietet eine Option zum Anzeigen und Untersuchen der visuellen Struktur, die dem aktuell definierten XAML-Inhalt entspricht. Klicken Sie auf der Menüleiste auf die Schaltfläche "Visuelle Struktur anzeigen ", um die visuelle Struktur anzuzeigen. Im Folgenden wird die Erweiterung von XAML-Inhalten in visuelle Strukturknoten im Bereich 'Visual Tree Explorer' von XamlPad veranschaulicht.

Beachten Sie, wie die Label-, TextBox- und Button-Steuerelemente jeweils eine separate visuelle Objekthierarchie im Bereich Visual Tree Explorer von XamlPad anzeigen. Dies liegt daran, dass WPF-Steuerelemente über ein ControlTemplate verfügen, das den visuellen Baum dieses Steuerelements enthält. Wenn Sie explizit auf ein Steuerelement verweisen, verweisen Sie implizit auf die visuelle Hierarchie.

Analyse der visuellen Leistung

WPF bietet eine Reihe von Leistungsprofiltools, mit denen Sie das Laufzeitverhalten Ihrer Anwendung analysieren und die Arten von Leistungsoptimierungen bestimmen können, die Sie anwenden können. Das Visual Profiler-Tool bietet eine umfassende grafische Ansicht der Leistungsdaten, indem sie direkt der visuellen Struktur der Anwendung zugeordnet wird. In diesem Screenshot erhalten Sie im Abschnitt "CPU-Auslastung " des Visual Profiler eine präzise Aufschlüsselung der Verwendung von WPF-Diensten eines Objekts, z. B. Rendering und Layout.

Anzeigeausgabe des visuellen Profilers

Visuelles Renderingverhalten

WPF führt mehrere Features ein, die sich auf das Renderingverhalten visueller Objekte auswirken: beibehaltene Modusgrafiken, Vektorgrafiken und geräteunabhängige Grafiken.

Grafik im beibehaltenen Modus

Einer der Schlüssel zum Verständnis der Rolle des visuellen Objekts besteht darin, den Unterschied zwischen sofortigem Modus und Grafiksystemen des beibehaltenen Modus zu verstehen. Eine Win32-Standardanwendung, die auf GDI oder GDI+ basiert, verwendet ein Grafiksystem im unmittelbaren Modus. Dies bedeutet, dass die Anwendung dafür verantwortlich ist, den Teil des Clientbereichs neu zu zeichnen, der aufgrund einer Aktion, wie etwa einer Größenänderung eines Fensters oder davon, dass sich das Erscheinungsbild eines Objekts ändert, ungültig ist.

Im Gegensatz dazu verwendet WPF ein Retained-Mode-System. Dies bedeutet, dass Anwendungsobjekte mit visueller Darstellung einen Satz serialisierter Zeichnungsdaten definieren. Nachdem die Zeichnungsdaten definiert wurden, ist das System danach dafür verantwortlich, auf alle neu zu erstellenden Anforderungen zum Rendern der Anwendungsobjekte zu reagieren. Selbst zur Laufzeit können Sie Anwendungsobjekte ändern oder erstellen und sich weiterhin auf das System verlassen, um auf Paint-Anforderungen zu reagieren. Die Leistung in einem Grafiksystem im beibehaltenen Modus besteht darin, dass Zeichnungsinformationen von der Anwendung immer in einem serialisierten Zustand beibehalten werden, aber die Renderingverantwortung bleibt dem System überlassen. Das folgende Diagramm zeigt, wie die Anwendung WPF verwendet, um auf Paint-Anforderungen zu reagieren.

Intelligentes Neuzeichnen

Einer der größten Vorteile bei der Verwendung von Grafiken im beibehaltenen Modus besteht darin, dass WPF effizient optimieren kann, was in der Anwendung neu gezeichnet werden muss. Selbst wenn Sie eine komplexe Szene mit unterschiedlichen Deckkraftstufen haben, müssen Sie im Allgemeinen keinen besonderen Code schreiben, um das Neuzeichnen zu optimieren. Vergleichen Sie dies mit der Win32-Programmierung, in der Sie viel Aufwand für die Optimierung Ihrer Anwendung ausgeben können, indem Sie die Menge der Neuauszeichnung in der Updateregion minimieren. Ein Beispiel für die Komplexität bei der Optimierung des Neuzeichnens in Win32-Anwendungen finden Sie unter "Neuzeichnen" in der Updateregion.

Vektorgrafik

WPF verwendet Vektorgrafiken als Renderingdatenformat. Vektorgrafiken, die skalierbare Vektorgrafiken (SVG), Windows-Metadateien (WMF) und TrueType-Schriftarten enthalten, speichern Renderingdaten und übertragen sie als Eine Liste mit Anweisungen, die beschreiben, wie Sie ein Bild mithilfe von Grafikgrundtypen neu erstellen. TrueType-Schriftarten sind z. B. Gliederungsschriftarten, die einen Satz von Linien, Kurven und Befehlen und nicht ein Array von Pixeln beschreiben. Einer der wichtigsten Vorteile von Vektorgrafiken ist die Möglichkeit, auf jede Größe und Auflösung zu skalieren.

Im Gegensatz zu Vektorgrafiken speichern Bitmapgrafiken Renderingdaten als Pixeldarstellung eines Bilds, das für eine bestimmte Auflösung vorab gerendert wird. Einer der wichtigsten Unterschiede zwischen Bitmap- und Vektorgrafikformaten ist die Genauigkeit des ursprünglichen Quellbilds. 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.

Die folgende Abbildung zeigt ein Quellbild, dessen Größe um 300%geändert wurde. Beachten Sie die Verzerrungen, die angezeigt werden, wenn das Quellbild als Bitmapgrafikbild gestreckt wird und nicht als Vektorgrafikbild skaliert wird.

Das folgende Markup zeigt zwei definierte Path Elemente. Das zweite Element verwendet ein ScaleTransform , um die Größe der Zeichnungsanweisungen des ersten Elements um 300%zu ändern. Beachten Sie, dass die Zeichenanweisungen in den Path Elementen unverändert bleiben.

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

Informationen zu Auflösung und Device-Independent-Grafiken

Es gibt zwei Systemfaktoren, die die Größe von Text und Grafiken auf dem Bildschirm bestimmen: Auflösung und DPI. Die Auflösung beschreibt die Anzahl der Pixel, die auf dem Bildschirm angezeigt werden. Wenn die Auflösung höher wird, werden Pixel kleiner, wodurch Grafiken und Text kleiner angezeigt werden. Eine Grafik, die auf einem Monitor auf 1024 x 768 angezeigt wird, wird viel kleiner angezeigt, wenn die Auflösung auf 1600 x 1200 geändert wird.

Die andere Systemeinstellung DPI beschreibt die Größe eines Bildschirmzolls in Pixeln. Die meisten Windows-Systeme haben einen DPI-Wert von 96, was bedeutet, dass ein Bildschirm zoll 96 Pixel beträgt. Wenn Sie die DPI-Einstellung erhöhen, wird der Bildschirm zoll größer; Durch verringern des DPI-Werts wird der Bildschirm zoll kleiner. Dies bedeutet, dass ein Bildschirmzoll nicht die gleiche Größe wie ein realer Zoll ist; auf den meisten Systemen ist es wahrscheinlich nicht. Wenn Sie den DPI-Wert erhöhen, werden DPI-fähige Grafiken und Text größer, da Sie die Größe des Bildschirmzolls erhöht haben. Das Erhöhen des DPI-Werts kann das Lesen von Text erleichtern, insbesondere bei hohen Auflösungen.

Nicht alle Anwendungen sind DPI-fähig: Einige verwenden Hardwarepixel als primäre Maßeinheit; Das Ändern des System-DPI hat keine Auswirkungen auf diese Anwendungen. Viele andere Anwendungen verwenden DPI-fähige Einheiten zum Beschreiben von Schriftgraden, verwenden jedoch Pixel, um alles andere zu beschreiben. Wenn der DPI-Wert zu klein oder zu groß ist, kann dies zu Layoutproblemen für diese Anwendungen führen, da der Text der Anwendung mit der DPI-Einstellung des Systems skaliert wird, die Benutzeroberfläche der Anwendungen jedoch nicht. Dieses Problem wurde für Anwendungen beseitigt, die mit WPF entwickelt wurden.

WPF unterstützt die automatische Skalierung, indem das geräteunabhängige Pixel als primäre Maßeinheit anstelle von Hardwarepixeln verwendet wird. Grafiken und Text werden ohne zusätzliche Arbeit vom Anwendungsentwickler ordnungsgemäß skaliert. Die folgende Abbildung zeigt ein Beispiel dafür, wie WPF-Text und Grafiken in verschiedenen DPI-Einstellungen angezeigt werden.

Grafiken und Text bei unterschiedlichen DPI-Einstellungen

VisualTreeHelper-Klasse

Die VisualTreeHelper Klasse ist eine statische Hilfsklasse, die allgemeine Funktionen für die Programmierung auf visueller Objektebene bereitstellt, die in sehr spezifischen Szenarien nützlich ist, z. B. das Entwickeln von benutzerdefinierten Steuerelementen mit hoher Leistung. In den meisten Fällen bieten höherstufige WPF-Frameworkobjekte, wie Canvas und TextBlock, mehr Flexibilität und Benutzerfreundlichkeit.

Treffertests

Die VisualTreeHelper Klasse stellt Methoden für Treffertests für visuelle Objekte bereit, wenn die standardmäßige Treffertestunterstützung nicht Ihren Anforderungen entspricht. Mit den HitTest Methoden in der VisualTreeHelper Klasse können Sie bestimmen, ob sich ein Geometrie- oder Punktkoordinatenwert innerhalb der Grenze eines bestimmten Objekts befindet, z. B. ein Steuerelement oder grafikelement. Sie können beispielsweise Treffertests verwenden, um zu bestimmen, ob ein Mausklick innerhalb des umgebenden Rechtecks eines Objekts in die Geometrie eines Kreises fällt. Sie können auch die Standardimplementierung von Treffertests außer Kraft setzen, um eigene benutzerdefinierte Treffertestberechnungen durchzuführen.

Weitere Informationen zu Treffertests finden Sie unter Treffertests in der visuellen Ebene.

Aufzählen der Visualisierungshierarchie

Die VisualTreeHelper Klasse stellt Funktionen zum Aufzählen der Member einer visuellen Struktur bereit. Rufen Sie die GetParent Methode auf, um ein übergeordnetes Element abzurufen. Rufen Sie die GetChild Methode auf, um ein direktes oder indirektes Kind eines visuellen Objekts abzurufen. Diese Methode gibt ein untergeordnetes Visual des übergeordneten Elements am angegebenen Index zurück.

Das folgende Beispiel zeigt, wie Sie alle Nachfolger eines visuellen Objekts aufzählen. Dies ist eine Technik, die Sie verwenden möchten, wenn Sie alle Renderinginformationen einer visuellen Objekthierarchie serialisieren möchten.

// 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 nützlichere Darstellung der Elemente in einer WPF-Anwendung. Obwohl Sie die logische Struktur nicht direkt ändern, ist diese Ansicht der Anwendung hilfreich, um die Eigenschaftsvererbung und das Ereignisrouting zu verstehen. Im Gegensatz zur visuellen Struktur kann die logische Struktur nicht-visuelle Datenobjekte darstellen, wie z. B. ListItem. Weitere Informationen zur logischen Struktur finden Sie unter "Strukturen" in WPF.

Die VisualTreeHelper-Klasse stellt Methoden zum Zurückgeben des begrenzenden Rechtecks visueller Objekte bereit. Sie können das umgebende Rechteck eines visuellen Objekts abfragen, indem Sie GetContentBounds aufrufen. Sie können das begrenzende Rechteck aller Unterelemente eines visuellen Objekts, einschließlich des visuellen Objekts selbst, zurückerhalten, indem Sie GetDescendantBounds aufrufen. Der folgende Code zeigt, wie Sie das begrenzende Rechteck eines visuellen Objekts einschließlich aller seiner Unterobjekte berechnen.

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

• Visual
• VisualTreeHelper
• DrawingVisual
• 2D-Grafik und Bildverarbeitung
• Treffertests in der visuellen Ebene
• Verwenden von DrawingVisual-Objekten
• Lernprogramm: Hosten von visuellen Objekten in einer Win32-Anwendung
• Optimieren der WPF-Anwendungsleistung