Różnica między szablonem kontrolnym a DataTemplate w WPF

Question

Czym różni się w przypadku WPF od ControlTemplate i DataTemplate?

Answer 1

Zazwyczaj kontrola jest renderowana dla niej samej i nie odzwierciedla podstawowych danych. Na przykład obiekt Button nie byłby powiązany z obiektem biznesowym - jest tam tylko po to, aby można go było kliknąć. Jednak generalnie wydaje się, że mogą one przedstawiać dane dla użytkownika.

W związku z tym A DataTemplate służy do zapewnienia struktury wizualnej dla danych bazowych, podczas gdy ControlTemplate nie ma nic wspólnego z danymi podstawowymi i po prostu zapewnia układ wizualny dla samej kontroli.

ControlTemplate będzie generalnie zawierać tylko TemplateBinding wyrażeń, wiązanie z powrotem do właściwości na samej kontroli, natomiast DataTemplate będzie zawierać standardowe wyrażenia wiążące, wiążące do właściwości jego DataContext (biznesu/obiektu domeny lub widoku modelu).

Answer 2

Zasadniczo ControlTemplate opisuje sposób wyświetlania kontrolki, podczas gdy DataTemplate opisuje sposób wyświetlania danych.

Na przykład:

Label jest kontrola i obejmie ControlTemplate który mówi Label powinny być wyświetlane przy użyciu Border wokół niektórych forów (a DataTemplate lub inny Control).

Customer klasa danych i będą wyświetlane przy użyciu DataTemplate których można powiedzieć, aby wyświetlić typ Customer jako StackPanel zawierający dwie TextBlocks jeden pokazujący nazwę i inne wyświetlając numer telefonu. Warto zauważyć, że wszystkie klasy są wyświetlane przy użyciu DataTemplates, zazwyczaj użyjesz domyślnego szablonu, który jest TextBlock z ustawieniem właściwości Text na wynik metody obiektu.

Answer 3

ControlTemplate - Zmiana wyglądu elementu. Na przykład: Button może zawierać obraz i tekst. Reprezentowanie podstawowych danych przy użyciu tych elementów.

Answer 4

ControlTemplate: Reprezentuje styl sterowania.

DataTemplate: Reprezentuje styl danych (w jaki sposób chcesz wyświetlać swoje dane).

Wszystkie elementy sterujące używają domyślnego szablonu kontrolnego, który można przesłonić za pomocą właściwości szablonu.

Na przykład
Button szablon jest szablonem kontrola. Button szablon jest szablonem zawartość danych

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

Answer 5

Troels Larsen ma dobre wyjaśnienie 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> 

Answer 6

ControlTemplate określa wygląd wizualny, DataTemplate zastępuje wygląd elementu danych.

Przykład: Chcę wyświetlić przycisk od prostokąta do postaci koła => Szablon kontrolny.

A jeśli do obiektu sterującego są złożone obiekty, po prostu wywołuje i pokazuje ToString(), z DataTemplate można uzyskać różne elementy i wyświetlić i zmienić ich wartości obiektu danych.