Perbedaan antara Templat Kontrol dan DataTemplate di WPF


Jawaban:


267

Biasanya kontrol diberikan untuk kepentingannya sendiri, dan tidak mencerminkan data yang mendasarinya. Misalnya, sebuah Buttontidak akan terikat pada objek bisnis - itu ada di sana murni sehingga dapat diklik. A ContentControlatau ListBox, bagaimanapun, umumnya muncul sehingga mereka dapat menyajikan data untuk pengguna.

DataTemplateOleh karena itu, A digunakan untuk menyediakan struktur visual untuk data yang mendasarinya, sementara a ControlTemplatetidak ada hubungannya dengan data yang mendasarinya dan hanya menyediakan tata letak visual untuk kontrol itu sendiri.

A ControlTemplateumumnya hanya akan berisi TemplateBindingekspresi, mengikat kembali ke properti pada kontrol itu sendiri, sementara a DataTemplateakan berisi ekspresi Binding standar, mengikat ke properti-nya DataContext(objek bisnis / domain atau model tampilan).


21
Apakah itu masuk akal? Saya kira saya mencoba menjelaskan perbedaan filosofis daripada perbedaan teknis.
Matt Hamilton

110

Pada dasarnya a ControlTemplatemenjelaskan cara menampilkan Kontrol sementara a DataTemplatemenjelaskan cara menampilkan Data.

Sebagai contoh:

A Labeladalah kontrol dan akan menyertakan ControlTemplatekata yang Labelharus ditampilkan menggunakan Bordersekitar beberapa Konten ( DataTemplateKontrol atau lainnya).

Sebuah Customerkelas Data dan akan ditampilkan menggunakan DataTemplateyang bisa mengatakan untuk menampilkan Customerjenis sebagai StackPaneldua yang berisi TextBlockssatu menunjukkan Nama dan yang lainnya menampilkan nomor telepon. Mungkin berguna untuk mencatat bahwa semua kelas ditampilkan menggunakan DataTemplates, Anda hanya akan biasanya menggunakan templat default yang adalah TextBlockdengan Textproperti yang disetel ke hasil metode Object ToString.


Dipilih untuk kesederhanaan deskripsi. Sangat dihargai.
Pete Magsig

31

Troels Larsen memiliki penjelasan yang bagus di forum MSDN

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

(Templat dicuri secara terang-terangan dari http://msdn.microsoft.com/en-us/library/system.windows.controls.controltemplate.aspx dan http://msdn.microsoft.com/en-us/library/system.windows .controls.contentcontrol.contenttemplate masing-masing % 28VS.95% 29.aspx )

Bagaimanapun, ControlTemplate memutuskan bagaimana penampilan Tombol itu sendiri, sedangkan ContentTemplate menentukan bagaimana tampilan Konten tombol. Jadi Anda dapat mengikat konten ke salah satu dari Anda kelas data dan membuatnya hadir sendiri seperti yang Anda inginkan.


19

ControlTemplate: Merupakan gaya kontrol.

DataTemplate: Merupakan gaya data (Bagaimana Anda ingin menampilkan data Anda).

Semua kontrol menggunakan templat kontrol default yang dapat Anda timpa melalui properti templat.

Contohnya
Button template adalah template kontrol. Buttontemplat konten adalah templat data

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

7

ControlTemplate- Mengubah tampilan elemen. Misalnya Buttonbisa berisi gambar dan teks

DataTemplate - Mewakili data yang mendasarinya menggunakan elemen.


1

ControlTemplateDEFINISI tampilan visual, DataTemplateMENGGANTI penampilan visual dari item data.

Contoh: Saya ingin menunjukkan tombol dari rectangular ke circle form => Control Template.

Dan jika Anda memiliki objek kompleks untuk kontrol, itu hanya panggilan dan pertunjukan ToString(), dengan DataTemplateAnda bisa mendapatkan berbagai anggota dan menampilkan dan mengubah nilai-nilai mereka dari objek data.


0

Semua jawaban di atas bagus tetapi ada perbedaan utama yang terlewatkan. Itu membantu membuat keputusan yang lebih baik tentang kapan menggunakan apa. Ini adalah ItemTemplateproperti:

  • DataTemplate digunakan untuk elemen yang menyediakan properti ItemTemplate bagi Anda untuk mengganti konten itemnya menggunakan DataTemplateyang Anda tentukan sebelumnya sesuai dengan data terikat melalui pemilih yang Anda berikan.

  • Tetapi jika kendali Anda tidak memberikan kemewahan ini untuk Anda, maka Anda masih dapat menggunakan ContentViewyang dapat menampilkan kontennya dari yang telah ditentukan ControlTemplate. Menariknya, Anda dapat mengubah ControlTemplateproperti ContentViewsaat runtime. Satu hal lagi yang perlu diperhatikan yaitu kontrol berbeda denganItemTemplate properti, Anda tidak dapat memiliki TemplateSelectorkontrol untuk ini (ContentView). Namun, Anda masih dapat membuat pemicu untuk mengubah ControlTemplatesaat runtime.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.