Erstellen von Formaten und Vorlagen

 

Veröffentlicht: Juni 2016

Windows Presentation Foundation (WPF)von Formaten und Vorlagen finden Sie in eine Suite von Features (Formate, Vorlagen, Trigger und Storyboards), mit denen Entwickler und Designer visuell überzeugende Effekte erzeugen und ein einheitliches Erscheinungsbild ihres Produkts zu erstellen. Entwickler und Designer die Darstellung häufig auf der Grundlage von Anwendung angepasst werden können, ist ein sicheres Modell von Formaten und Vorlagen erforderlich, Wartung und Freigabe der Darstellung innerhalb und zwischen Anwendungen zu ermöglichen. Windows Presentation Foundation (WPF)stellt dieses Modell bereit.

Ein weiteres Feature von der Entity with relative path '../Token/TLA2%23tla_winclient_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"de-DE"}'. Stil Modell ist die Trennung von Darstellung und Logik. Dies bedeutet, dass Designer auf die Darstellung einer Anwendung können nur mit XAML zur gleichen Zeit, die Entwickler die Programmierlogik mit c# oder Visual Basic.

Diese Übersicht konzentriert sich auf die von Formaten und Vorlagen Aspekte der Anwendung und keine Datenbindungskonzepte behandelt. Informationen zum Binden von Daten finden Sie unter Data Binding Overview.

Darüber hinaus ist es wichtig zu verstehen, Ressourcen, die Stile und Vorlagen für die Wiederverwendung ermöglichen. Weitere Informationen zu Ressourcen finden Sie unter XAML-Ressourcen.

Entity with relative path '../Token/autoOutline_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"de-DE"}'.

In dieser Übersicht verwendeten Codebeispiele basieren auf einem einfachen Foto-Beispiel in der folgenden Abbildung dargestellt:

ListView formatiert

In diesem einfachen Foto-Beispiel werden von Formaten und Vorlagen verwendet, um eine visuell beeindruckende Benutzeroberfläche zu erstellen. Das Beispiel verfügt über zwei TextBlock Elemente und ListBox Steuerelement, das an eine Liste von Bildern gebunden ist. Das vollständige Beispiel finden Sie unter Introduction to Styling and Templating Sample.

Sie können sich vorstellen, eine Stil als eine einfache Möglichkeit, eine Reihe von Eigenschaftswerten auf mehr als ein Element anzuwenden. Betrachten Sie z. B. die folgenden TextBlock Elemente und deren Erscheinungsbild:

    <TextBlock>My Pictures</TextBlock>
    <TextBlock>Check out my new pictures!</TextBlock>

Stil-Beispiel-Screenshot

Sie können das Erscheinungsbild ändern, indem Sie Eigenschaften festlegen, z. B. FontSize und FontFamily, auf jedem TextBlock Element direkt. Jedoch ggf. Ihre TextBlock -Elemente einige Eigenschaften gemeinsam nutzen können eine Stil in der Resources Teil Ihrer XAML Datei, wie hier gezeigt:

  <Window.Resources>

    <!--A Style that affects all TextBlocks-->
    <Style TargetType="TextBlock">
      <Setter Property="HorizontalAlignment" Value="Center" />
      <Setter Property="FontFamily" Value="Comic Sans MS"/>
      <Setter Property="FontSize" Value="14"/>
    </Style>

  </Window.Resources>

Beim Festlegen der TargetType des Formats auf die TextBlock Typ, der Stil angewendet wird, auf alle die TextBlock Elemente im Fenster.

Jetzt die TextBlock Elemente wie folgt aussehen:

Stil-Beispiel-Screenshot

Erweitern von Formaten

Vielleicht möchten Sie die beiden TextBlock -Elemente einige Eigenschaftswerte wie z. B. die FontFamily und die zentrierte HorizontalAlignment, aber der Text "My Pictures" zusätzliche Eigenschaften haben soll. Sie können hierzu erstellen ein neues Format, das auf dem ersten Format basiert, wie hier gezeigt:

  <Window.Resources>

    <!--A Style that extends the previous TextBlock Style-->
    <!--This is a "named style" with an x:Key of TitleText-->
    <Style BasedOn="{StaticResource {x:Type TextBlock}}"
           TargetType="TextBlock"
           x:Key="TitleText">
      <Setter Property="FontSize" Value="26"/>
      <Setter Property="Foreground">
      <Setter.Value>
          <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <LinearGradientBrush.GradientStops>
              <GradientStop Offset="0.0" Color="#90DDDD" />
              <GradientStop Offset="1.0" Color="#5BFFFF" />
            </LinearGradientBrush.GradientStops>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
    </Style>

  </Window.Resources>

Beachten Sie, das das vorherige Format angegebenen ist ein x:Key. Zum Anwenden des Formats legen Sie die Stil Eigenschaft auf Ihre TextBlock zu den x:Key -Wert fest, wie hier gezeigt:

    <TextBlock Style="{StaticResource TitleText}" Name="textblock1">My Pictures</TextBlock>
    <TextBlock>Check out my new pictures!</TextBlock>

Dies TextBlock Stil verfügt jetzt über eine HorizontalAlignment Wert der Center, FontFamily Wert Comic Sans MS, FontSize -Wert von 26 und ein Vordergrund Wert festgelegt der LinearGradientBrush im Beispiel gezeigt. Beachten Sie, den sie überschreibt die FontSize Wert, der die Basis-Format. Wenn es mehr als eine Setter dieselbe Eigenschaft festlegen, eine Stil, Setter , deklarierten letzten hat Vorrang.

Das folgende Beispiel zeigt, was die TextBlock Elemente wie folgt aussehen:

Formatiert TextBlocks

Diese TitleText Stil erweitert die Formatvorlage, die für die Erstellung der TextBlock Typ. Sie können auch eine Formatvorlage mit erweitern ein x:Key mithilfe der x:Key Wert. Ein Beispiel finden Sie im Beispiel für die auf Eigenschaft.

Beziehung zwischen der TargetType-Eigenschaft und das X: Key-Attribut

Wie im ersten Beispiel gezeigt, Festlegen der TargetType -Eigenschaft TextBlock ohne das Format zuzuweisen ein x:Key , wird auf alle angewendet TextBlock Elemente. In diesem Fall die x:Key implizit auf festgelegt ist {x:Type TextBlock}. Dies bedeutet, dass, wenn Sie explizit die x:Key auf einen anderen Wert als {x:Type TextBlock}, Stil gilt nicht für alle TextBlock Elemente automatisch. Stattdessen müssen Sie die Formatvorlage anwenden (mithilfe der x:Key Wert), die TextBlock Elemente explizit. Wenn sich das Format im Ressourcenabschnitt und nicht Festlegen der TargetType -Eigenschaft auf die Formatvorlage, und Sie muss Bereitstellen einer x:Key.

Zusätzlich zur Bereitstellung eines Standardwerts für die x:Key, TargetType -Eigenschaft gibt den Typ für die Setter-Eigenschaften gelten. Wenn Sie nicht angeben einer TargetType, müssen Sie die Eigenschaften im qualifizieren der Setter Objekte mit dem Klassennamen mithilfe der Syntax Property="ClassName.Property". Anstatt z. B. Property="FontSize", müssen Sie festlegen, Eigenschaft auf "TextBlock.FontSize" oder "Control.FontSize".

Beachten Sie außerdem, dass viele Entity with relative path '../Token/TLA2%23tla_winclient_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"de-DE"}'. Steuerelemente bestehen aus einer Kombination von anderen Entity with relative path '../Token/TLA2%23tla_winclient_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"de-DE"}'. Steuerelemente. Wenn Sie eine Formatvorlage, die auf alle Steuerelemente eines Typs angewendet wird erstellen, erhalten Sie möglicherweise unerwartete Ergebnisse. Beispielsweise, wenn Sie eine Formatvorlage erstellen, die TextBlock Geben Sie ein Fenster, der Stil angewendet wird, um alle TextBlock Steuerelemente im Fenster selbst wenn die TextBlock ist Teil eines anderen Steuerelements, wie z. B. ein ListBox.

Formate und Ressourcen

Verwenden Sie einen Stil auf alle Elemente, die von abgeleitet ist FrameworkElement oder "FrameworkContentElement". Die gängigste Methode zum Deklarieren einer Formatvorlage wird als Ressource in die Resources im Abschnitt eine XAML Datei, wie in den vorherigen Beispielen gezeigt. Da Stilen um Ressourcen handelt, unterliegen sie die gleichen Bereichsregeln, die für alle Ressourcen gelten; in dem Sie eine Formatvorlage wirkt sich auf deklarieren, der Stil angewendet werden kann. Wenn Sie das Format in das Stammelement Ihrer Anwendungsdefinition deklarieren z. B. XAML -Datei kann das Format überall in der Anwendung verwendet werden. Wenn Sie eine navigationsanwendung erstellen, und deklarieren die Formatvorlage in einer von der Anwendungsverzeichnis XAML Dateien, die Formatvorlage können verwendet werden, nur in XAML Datei. Weitere Informationen zu Bereichsregeln für Ressourcen finden Sie unter XAML-Ressourcen.

Darüber hinaus finden Sie weitere Informationen zu Formaten und Ressourcen in gemeinsam genutzte Ressourcen und Designs weiter unten in dieser Übersicht.

Programmgesteuertes Festlegen von Formaten

Um einen benannten Stil auf ein Element programmgesteuert zuweisen möchten, rufen Sie den Stil aus der Resources-Auflistung, und weisen Sie sie auf des Elements Stil Eigenschaft. Beachten Sie, dass die Elemente in eine Resources-Auflistung des Typs Objekt. Aus diesem Grund müssen Sie das abgerufene Format umwandeln einer Stil vor der Zuweisung zu den Stil Eigenschaft. Beispielsweise, um die definierten festgelegt TitleText Stil auf ein TextBlock namens textblock1, gehen Sie folgendermaßen vor:

            textblock1.Style = (Style)(this.Resources["TitleText"]);

Beachten Sie, dass wenn ein Stil angewendet wurde, versiegelt ist und kann nicht geändert werden. Wenn Sie möchten ein Format dynamisch zu ändern, die bereits angewendet wurde, müssen Sie ein neues Format, um das vorhandene zu ersetzen erstellen. Weitere Informationen finden Sie unter der IsSealed Eigenschaft.

Sie können ein Objekt erstellen, die ein Format anwenden auf Grundlage benutzerdefinierten Logik auswählt. Ein Beispiel finden Sie im Beispiel für die StyleSelector Klasse.

Bindungen, dynamische Ressourcen und Ereignishandler

Hinweis, mit denen Sie die Setter.Value -Eigenschaft an eine Binding-Markuperweiterung oder DynamicResource-Markuperweiterung. Weitere Informationen finden Sie unter den Beispielen für die Setter.Value Eigenschaft.

In dieser Übersicht erläutert bisher nur die Verwendung von Settern einen Eigenschaftswert festlegen. Sie können auch Ereignishandler in einem Format angeben. Weitere Informationen finden Sie unter EventSetter.

In dieser beispielanwendung ist eine ListBox Steuerelement, um eine Liste der Fotos gebunden ist:

      <ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
               Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>

Diese ListBox derzeit wie folgt aussieht:

ListBox vor dem Anwenden der Vorlage

Die meisten Steuerelemente verfügen über Inhalte und Inhalte, die häufig von Daten, an die gebunden werden, abgerufen. In diesem Beispiel sind die Daten für die Liste der Fotos. In Entity with relative path '../Token/TLA2%23tla_winclient_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"de-DE"}'., Sie verwenden ein DataTemplate die visuelle Darstellung der Daten zu definieren. Im Grunde genommen, was Sie in den versetzen einer DataTemplate bestimmt, wie die Daten in der gerenderten Anwendung dargestellt.

In unserer beispielanwendung einzelnen benutzerdefinierten Photo Objekt verfügt über eine Source -Eigenschaft vom Typ String, der den Pfad des Bilds angibt. Derzeit werden die Fotoobjekte als Dateipfade angezeigt.

Damit die Fotos als Bilder angezeigt werden, erstellen Sie eine DataTemplate als Ressource:

  <Window.Resources>

    <!--DataTemplate to display Photos as images
        instead of text strings of Paths-->
    <DataTemplate DataType="{x:Type local:Photo}">
      <Border Margin="3">
        <Image Source="{Binding Source}"/>
      </Border>
    </DataTemplate>

  </Window.Resources>

Beachten Sie, dass die Datentyp Eigenschaft ähnelt der TargetType Eigenschaft der Stil. Wenn Ihre DataTemplate ist im Abschnitt "Ressourcen", wenn Sie angeben der Datentyp -Eigenschaft auf einen Typ, und weisen Sie sie keine x:Key, die DataTemplate angewendet wird, wenn dieser Typ vorkommt. Sie haben immer die Option zum Zuweisen der DataTemplate mit ein x:Key und legen sie als eine StaticResource für Eigenschaften, DataTemplate Typen, z. B. die ItemTemplate Eigenschaft oder die ContentTemplate Eigenschaft.

Im Wesentlichen die DataTemplate im obigen Beispiel definiert, die bei jeder ein Photo -Objekt, es sollte angezeigt werden, als ein Bild innerhalb einer Rahmen. Mit diesem DataTemplate, sieht die Anwendung jetzt wie folgt:

Bild

Das Textvorlagen-Datenmodell bietet weitere Features. Beispielsweise, wenn Sie angezeigt, die angezeigt werden, die andere mithilfe von Sammlungen enthält eine HeaderedItemsControl Geben Sie z. B. eine im Menü oder eine TreeView, ist die HierarchicalDataTemplate. Eine andere Funktion für Datenvorlagen ist die DataTemplateSelector, können Sie wählen eine DataTemplate auf Grundlage benutzerdefinierten Logik zu verwenden. Weitere Informationen finden Sie unter Übersicht über Datenvorlagen, stellt eine ausführlichere Erläuterung der verschiedenen Templating-Features.

In Entity with relative path '../Token/TLA2%23tla_winclient_md.md' can not be found, for source topic '{"project_id":"3fedad16-eaf1-41a6-8f96-0c1949c68f32","entity_id":"481765e5-5467-4a75-9f7b-e10e2ac410d9","entity_type":"Article","locale":"de-DE"}'., ControlTemplate eines Steuerelements definiert die Darstellung des Steuerelements. Sie können die Struktur und die Darstellung eines Steuerelements ändern, indem Definieren einer neuen ControlTemplate für das Steuerelement. In vielen Fällen die dadurch ausreichende Flexibilität, damit Sie keine eigene benutzerdefinierte Steuerelemente schreiben. Weitere Informationen finden Sie unter Anpassen der Darstellung eines vorhandenen Steuerelements durch Erstellen einer ControlTemplate.

Trigger werden Eigenschaften festgelegt oder Aktionen, z. B. eine Animation beginnt, wenn ein Eigenschaftswert ändert oder wenn ein Ereignis ausgelöst wird. Stil, ControlTemplate, und DataTemplate verfügen alle über eine Triggers -Eigenschaft, die eine Reihe von Triggern enthalten kann. Es gibt verschiedene Typen von Triggern.

Eigenschaftstrigger

Ein Trigger , dass die Eigenschaftswerte festlegt oder Aktionen basierend auf dem Wert einer Eigenschaft gestartet wird als Eigenschaftentrigger bezeichnet.

Um Eigenschaftstrigger veranschaulichen, stellen Sie jede ListBoxItem teilweise transparent, es sei denn, diese Option ausgewählt ist. Im folgenden Format wird der Deckkraft Wert einer ListBoxItem zu 0.5. Wenn die IsSelected Eigenschaft ist true, jedoch die Deckkraft auf festgelegt ist 1.0:

    <Style TargetType="ListBoxItem">
      <Setter Property="Opacity" Value="0.5" />
      <Setter Property="MaxHeight" Value="75" />
      <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Opacity" Value="1.0" />
        </Trigger>

      </Style.Triggers>
    </Style>

Dieses Beispiel verwendet eine Trigger Wert einer Eigenschaft festlegen, aber beachten, dass die Trigger -Klasse verfügt auch über die Eigenschaftsauslösern und "ExitActions" Eigenschaften, die einen Trigger zum Ausführen von Aktionen zu ermöglichen.

Beachten Sie, dass die MaxHeight Eigenschaft der ListBoxItem Wert 75. In der folgenden Abbildung ist das dritte Element des ausgewählten Elements:

ListView formatiert

EventTrigger und Storyboards

Ein weiterer Trigger ist die EventTrigger, die eine Reihe von Aktionen, die auf Basis des Vorkommens eines Ereignisses startet. Z. B. die folgenden EventTrigger Objekte angeben, wenn der Mauszeiger bewegt wird die ListBoxItem, MaxHeight Eigenschaft animiert, auf den Wert 90 über eine 0.2 Sekunden-Zeitraums. Wenn die Maus von dem Element weg bewegt, gibt die Eigenschaft auf den ursprünglichen Wert über einen Zeitraum von 1 zweiten. Beachten Sie, wie es nicht notwendig, anzugeben ist eine auf -Wert für die MouseLeave Animation. Dies ist darin, dass die Animation zum Nachverfolgen den ursprünglichen Wert kann.

        <EventTrigger RoutedEvent="Mouse.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Duration="0:0:0.2"
                  Storyboard.TargetProperty="MaxHeight"
                  To="90"  />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Duration="0:0:1"
                  Storyboard.TargetProperty="MaxHeight"  />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>

Weitere Informationen finden Sie unter der Storyboards Overview.

In der folgenden Abbildung zeigt die Maus auf das dritte Element:

Stil-Beispiel-Screenshot

MultiTrigger, DataTrigger und MultiDataTrigger

Zusätzlich zu Trigger und EventTrigger, es gibt weitere Typen von Triggern. MultiTrigger können Sie die Eigenschaftswerte, die auf mehreren Kriterien basierenden festlegen. Verwenden Sie DataTrigger und MultiDataTrigger Wenn die Eigenschaft der Bedingung datengebunden ist.

Ein herkömmliches Windows Presentation Foundation (WPF) Anwendung möglicherweise mehrere Benutzer-Benutzeroberfläche (UI)-Ressourcen, die in der gesamten Anwendung angewendet werden. Zusammen kann diese Gruppe von Ressourcen als das Design für die Anwendung betrachtet werden. Windows Presentation Foundation (WPF)bietet Unterstützung zum Verpacken die Ressourcen der Benutzeroberfläche (UI) als ein Design mit einem Ressourcenwörterbuch, das als gekapselt ist die ResourceDictionary Klasse.

Windows Presentation Foundation (WPF)Designs mithilfe des Mechanismus von Formaten und Vorlagen definiert sind, Windows Presentation Foundation (WPF) zum Anpassen der Darstellung eines Elements verfügbar macht.

Windows Presentation Foundation (WPF)Designressourcen werden in eingebetteten Ressourcenwörterbüchern gespeichert. Diese Ressourcenwörterbücher müssen in einer signierten Assembly eingebettet werden, und können werden entweder in der gleichen Assembly wie der Code selbst oder in einer Seite-an-Seite-Assembly eingebettet. Im Fall von PresentationFramework.dll, der Assembly enthält Windows Presentation Foundation (WPF) Steuerelemente Designressourcen in einer Reihe von Side-by-Side Assemblies sind.

Das Design ist das Ziel, um für das Format eines Elements gesucht. In der Regel die Suche beginnt ermöglicht die Suche nach einer geeigneten Ressource Elementstruktur und suchen Sie in der Anwendung Ressourcensammlung und schließlich Abfragen des Systems. Diese Weise können Anwendungsentwickler das Format für alle Objekte auf der Struktur oder Anwendungsebene neu definieren, bevor das Design erreicht wird.

Sie können als einzelne Dateien Ressourcenverzeichnisse definieren, mit denen Sie ein Design anwendungsübergreifend wiederzuverwenden. Sie können auch umschaltbare Designs erstellen, definieren Sie mehrere Ressourcenverzeichnisse, die die gleichen Typen von Ressourcen, jedoch mit unterschiedlichen Werten bereitstellen. Diese Formate oder andere Ressourcen auf Anwendungsebene neu zu definieren ist die empfohlene Vorgehensweise für eine Anwendung skinning.

Eine Reihe von Ressourcen, wie Formate und Vorlagen, anwendungsübergreifend gemeinsam nutzen können eine XAML Datei, und definieren Sie eine ResourceDictionary. Beispielsweise sehen Sie sich die folgende Abbildung, das Teil zeigt die Styling with ControlTemplates Sample:

Beispiele für Steuerelementvorlagen steuern

Beim Betrachten der XAML -Dateien in diesem Beispiel werden Sie feststellen, dass alle Dateien über Folgendes verfügen:

  <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Shared.xaml" />
  </ResourceDictionary.MergedDictionaries>

Es ist die gemeinsame Nutzung von shared.xaml, definiert ein ResourceDictionary , enthält eine Reihe von Stil und einem Pinsel Ressourcen die Steuerelemente in der Stichprobe, ein einheitliches Erscheinungsbild.

Weitere Informationen finden Sie unter zusammengeführte Ressourcenwörterbücher.

Wenn Sie ein Design für Sie ein benutzerdefiniertes Steuerelement erstellen, finden Sie im Abschnitt externe Steuerelementbibliothek der Übersicht über das Erstellen.

Paket-URIs in WPF
Gewusst wie: Suchen von Elementen einer ControlTemplate generiert wurden
Suchen von Elementen einer DataTemplate generiert wurden

Anzeigen: