Unterschied zwischen Control Template und DataTemplate in WPF

Was ist der Unterschied zwischen a ControlTemplateund a DataTemplatein WPF?

In der Regel wird ein Steuerelement für sich selbst gerendert und spiegelt nicht die zugrunde liegenden Daten wider. Zum Beispiel Buttonwäre a nicht an ein Geschäftsobjekt gebunden - es ist nur da, damit es angeklickt werden kann. Ein ContentControloder ListBoxwird jedoch im Allgemeinen angezeigt, damit sie dem Benutzer Daten präsentieren können.

A DataTemplatewird daher verwendet, um eine visuelle Struktur für zugrunde liegende Daten bereitzustellen, während a ControlTemplatenichts mit zugrunde liegenden Daten zu tun hat und lediglich ein visuelles Layout für das Steuerelement selbst bereitstellt.

A enthält ControlTemplateim Allgemeinen nur TemplateBindingAusdrücke, die an die Eigenschaften des Steuerelements selbst gebunden sind, während a DataTemplateStandardbindungsausdrücke enthält, die an die Eigenschaften seines Steuerelements DataContext(des Geschäfts- / Domänenobjekts oder des Ansichtsmodells) gebunden sind .

Grundsätzlich ControlTemplatebeschreibt a, wie ein Steuerelement angezeigt wird, während a DataTemplatebeschreibt, wie Daten angezeigt werden.

Beispielsweise:

A Labelist ein Steuerelement und enthält ein Steuerelement, ControlTemplatedas besagt, dass das Steuerelement Labelmit einem BorderInhalt (einem DataTemplateoder einem anderen Steuerelement) angezeigt werden soll .

Eine CustomerKlasse ist Daten und wird mit einem angezeigt, DataTemplatedas sagen könnte, dass der CustomerTyp StackPanelzwei enthält, wobei TextBlockseiner den Namen und der andere die Telefonnummer anzeigt. Es kann hilfreich sein zu beachten, dass alle Klassen mit angezeigt DataTemplateswerden. Normalerweise verwenden Sie nur die Standardvorlage, TextBlockbei der die TextEigenschaft auf das Ergebnis der Objektmethode festgelegt ist ToString.

Troels Larsen hat eine gute Erklärung im MSDN-Forum

<Window x:Class="WpfApplication7.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
  <Window.Resources>
    <DataTemplate x:Key="ButtonContentTemplate">
      <StackPanel Orientation="Horizontal">
        <Grid Height="8" Width="8">
          <Path HorizontalAlignment="Stretch" 
           Margin="0,0,1.8,1.8" 
           VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FF000000" 
           Data="M0.5,5.7 L0.5,0.5 L5.7,0.5"/>
          <Path HorizontalAlignment="Stretch" 
           Margin="2,3,0,0" 
           VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FFFFFFFF" 
           Data="M3.2,7.5 L7.5,7.5 L7.5,3.5"/>
          <Path HorizontalAlignment="Stretch" 
           Margin="1.2,1.4,0.7,0.7" 
           VerticalAlignment="Stretch" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" 
           Data="M2.5,2.5 L7.5,7.5"/>
          <Path HorizontalAlignment="Stretch" 
           Margin="1.7,2.0,1,1" 
           VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FF000000" 
           Data="M3,7.5 L7.5,7.5 L7.5,3.5"/>
          <Path HorizontalAlignment="Stretch" 
           Margin="1,1,1,1" 
           VerticalAlignment="Stretch" Stretch="Fill" Stroke="#FFFFFFFF" 
           Data="M1.5,6.5 L1.5,1 L6.5,1.5"/>
        </Grid>
        <ContentPresenter Content="{Binding}"/>
      </StackPanel>
    </DataTemplate>
    <ControlTemplate TargetType="Button" x:Key="ButtonControlTemplate">
      <Grid>
        <Ellipse Fill="{TemplateBinding Background}"/>
        <ContentPresenter HorizontalAlignment="Center"
              VerticalAlignment="Center"/>
      </Grid>
    </ControlTemplate>
  </Window.Resources>
  <StackPanel>
    <Button Template="{StaticResource ButtonControlTemplate}" ContentTemplate="{StaticResource ButtonContentTemplate}" Content="1"/>
    <Button Template="{StaticResource ButtonControlTemplate}" ContentTemplate="{StaticResource ButtonContentTemplate}" Content="2"/>
    <Button Template="{StaticResource ButtonControlTemplate}" ContentTemplate="{StaticResource ButtonContentTemplate}" Content="3"/>
  </StackPanel>
</Window>

(Vorlagen, die offensichtlich von http://msdn.microsoft.com/en-us/library/system.windows.controls.controltemplate.aspx und http://msdn.microsoft.com/en-us/library/system.windows gestohlen wurden .controls.contentcontrol.contenttemplate% 28VS.95% 29.aspx )

Auf jeden Fall entscheidet die ControlTemplate, wie die Schaltfläche selbst aussieht, während die ContentTemplate entscheidet, wie der Inhalt der Schaltfläche aussieht. Sie können den Inhalt also an eine Ihrer Datenklassen binden und ihn so präsentieren, wie Sie es möchten.

ControlTemplate: Repräsentiert den Steuerungsstil.

DataTemplate: Repräsentiert den Datenstil (Wie möchten Sie Ihre Daten anzeigen).

Alle Steuerelemente verwenden Standardsteuerelementvorlagen, die Sie über die Vorlageneigenschaft überschreiben können.

Die
Button Vorlage ist beispielsweise eine Steuerungsvorlage. ButtonInhaltsvorlage ist eine Datenvorlage

<Button   VerticalAlignment="Top" >
    <Button.Template>
        <ControlTemplate >
            <Grid>
                <Rectangle Fill="Blue" RadiusX="20" RadiusY="20"/>
                <Ellipse Fill="Red" />
                <ContentPresenter Content="{Binding}">
                    <ContentPresenter.ContentTemplate>
                        <DataTemplate>
                        <StackPanel Orientation="Horizontal" Height="50">
                            <TextBlock Text="Name" Margin="5"/>
                                <TextBox Text="{Binding UserName, Mode=TwoWay}" Margin="5" Width="100"/>
                            <Button Content="Show Name" Click="OnClickShowName" />
                        </StackPanel>
                    </DataTemplate>
                    </ContentPresenter.ContentTemplate>
                </ContentPresenter>
            </Grid>
        </ControlTemplate>
    </Button.Template>
</Button>

public String UserName
{
    get { return userName; }
    set
    {
        userName = value;
        this.NotifyPropertyChanged("UserName");
    }
}

ControlTemplate- Ändern des Erscheinungsbilds des Elements. Zum Beispiel Buttonkann Bild und Text enthalten

DataTemplate - Darstellung der zugrunde liegenden Daten anhand der Elemente.

ControlTemplateDEFINIERT das visuelle Erscheinungsbild, DataTemplateERSETZT das visuelle Erscheinungsbild eines Datenelements.

Beispiel: Ich möchte eine Schaltfläche von rechteckiger zu kreisförmiger Form anzeigen => Steuerungsvorlage.

Und wenn Sie komplexe Objekte an die Steuerung haben, ist es nur Anrufe und zeigt ToString(), mit DataTemplateIhnen ihre Werte des Datenobjekts verschiedenen Mitgliedern und anzeigen und ändern bekommen.

Alle oben genannten Antworten sind großartig, aber es gibt einen entscheidenden Unterschied, der übersehen wurde. Das hilft, bessere Entscheidungen darüber zu treffen, wann was verwendet werden soll. Es ist ItemTemplateEigentum:

• DataTemplate wird für Elemente verwendet, die die ItemTemplate-Eigenschaft bereitstellen, damit Sie den Inhalt der Elemente durch DataTemplates ersetzen können, die Sie zuvor anhand gebundener Daten über einen von Ihnen bereitgestellten Selektor definiert haben.

• Aber wenn Ihr Steuer diesen Luxus nicht zur Verfügung stellt für Sie dann noch können Sie ein verwenden ContentView, die ihren Inhalt anzeigen kann aus vorgegeben ControlTemplate. Interessanterweise können Sie die ControlTemplateEigenschaft Ihrer ContentViewzur Laufzeit ändern . Beachten Sie außerdem, dass Sie im Gegensatz zu Steuerelementen mit ItemTemplateEigenschaften TemplateSelectorfür dieses Steuerelement (ContentView) kein Steuerelement haben können. Sie können jedoch weiterhin Trigger erstellen, um die ControlTemplateLaufzeit zu ändern .