WPF'de Kontrol Şablonu ve DataTemplate arasındaki fark


Yanıtlar:


267

Tipik olarak bir kontrol kendi uğruna yapılır ve temeldeki verileri yansıtmaz. Örneğin, bir Buttoniş nesnesine bağlı olmaz - sadece orada tıklanabilir. Bununla birlikte, a ContentControlveya ListBoxgenellikle, kullanıcıya veri sunabilecekleri şekilde görünür.

Bu DataTemplatenedenle, temel alınan veriler için görsel yapı sağlamak için kullanılırken, temel verilerle ControlTemplateilgisi yoktur ve kontrolün kendisi için görsel düzen sağlar.

A ControlTemplategenellikle yalnızca TemplateBindingdenetimin kendisinin özelliklerine bağlanan ifadeler içerirken, a DataTemplate, kendi özelliklerine DataContext(iş / etki alanı nesnesi veya görünüm modeli) bağlanan standart Bağlama ifadeleri içerir .


21
Bu mantıklı geldi mi? Sanırım teknik olanlardan ziyade felsefi farklılıkları açıklamaya çalışıyorum.
Matt Hamilton

110

Çok temel olarak bir ControlTemplate, bir Kontrolün nasıl görüntüleneceğini açıklarken, bir DataTemplateVerilerin nasıl görüntüleneceğini açıklar.

Örneğin:

A Labelbir kontroldür ve bir içerik (a veya başka bir Kontrol) etrafında görüntülenmesi gerektiğini ControlTemplatesöyleyen bir kontrol içerir .LabelBorderDataTemplate

Bir Customersınıf Veri'dir ve türün adı ve diğeri telefon numarasını gösteren bir tanesini içerdiğini DataTemplatesöyleyebilen bir kullanılarak görüntülenir. Tüm sınıflar yardımıyla gösterilen unutmayın yararlı olabilir , sadece genellikle varsayılan şablonu kullanacak olan Nesnenin sonucuna özellik seti yöntemiyle.CustomerStackPanelTextBlocksDataTemplatesTextBlockTextToString


Açıklamanın basitliği için seçildi. Çok takdir etmek.
Pete Magsig

31

Troels Larsen , MSDN forumunda iyi bir açıklamaya sahip

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

(Şablonlar http://msdn.microsoft.com/en-us/library/system.windows.controls.controltemplate.aspx ve http://msdn.microsoft.com/en-us/library/system.windows adresinden yavaşça çalındı .controls.contentcontrol.contenttemplate sırasıyla % 28VS.95% 29.aspx )

Her neyse, ControlTemplate, Button öğesinin nasıl görüneceğine karar verirken ContentTemplate, düğmenin İçeriğinin nasıl görüneceğine karar verir. Böylece içeriği veri sınıflarınızdan birine bağlayabilir ve istediğiniz gibi sunmasını sağlayabilirsiniz.


19

ControlTemplate: Kontrol stilini temsil eder.

DataTemplate: Veri stilini temsil eder (Verilerinizi nasıl göstermek istersiniz).

Tüm denetimler, template özelliği üzerinden geçersiz kılabileceğiniz varsayılan kontrol şablonu kullanıyor.

Örneğin
Button şablon bir kontrol şablonudur. Buttoniçerik şablonu bir veri şablonudur

<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- Elemanın görünümünü değiştirme. Örneğin Buttongörüntü ve metin içerebilir

DataTemplate - Elemanları kullanarak temel verilerin temsil edilmesi.


1

ControlTemplateGörsel görünümü DataTemplatetanımlar, bir veri öğesinin görsel görünümünü değiştirir.

Örnek: Dikdörtgenden daire formuna => Denetim Şablonu'na bir düğme göstermek istiyorum.

Eğer kontrole karmaşık nesneler varsa, sadece çağırır ve gösterir ToString(), DataTemplateçeşitli üyeler alabilir ve veri nesnesinin değerlerini görüntüleyebilir ve değiştirebilirsiniz.


0

Yukarıdaki yanıtların hepsi harika ama kaçırılan önemli bir fark var. Bu, ne zaman kullanılacağı konusunda daha iyi kararlar alınmasına yardımcı olur. Öyle ItemTemplateözelliği:

  • DataTemplate, önceden verdiğiniz bir seçici aracılığıyla bağlı verilere göre tanımladığınız öğeleri kullanarak öğelerinin içeriğini değiştirmenize olanak sağlayan ItemTemplate özelliği sağlayan öğeler için kullanılır DataTemplate.

  • Ancak kontrolünüz bu lüksü sizin için sağlamıyorsaContentView , içeriğini önceden tanımlanmış olarak görüntüleyebilecek bir tane kullanabilirsiniz ControlTemplate. İlginçtir ki, çalışma zamanınızın ControlTemplateözelliğini değiştirebilirsiniz ContentView. Özellikli denetimlerin aksine ItemTemplate, TemplateSelectorbu (ContentView) denetimine sahip olamayacağınızı not etmek için bir şey daha var . Ancak, ControlTemplateçalışma zamanında değiştirmek için yine de tetikleyiciler oluşturabilirsiniz .

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.