Differenza tra modello di controllo e modello di dati in WPF


Risposte:


267

In genere un controllo viene reso per se stesso e non riflette i dati sottostanti. Ad esempio, a Buttonnon sarebbe vincolato a un oggetto business: è lì solo per poter essere cliccato. A ContentControlo ListBox, tuttavia, appaiono generalmente in modo che possano presentare dati per l'utente.

A DataTemplate, quindi, viene utilizzato per fornire una struttura visiva per i dati sottostanti, mentre a ControlTemplatenon ha nulla a che fare con i dati sottostanti e fornisce semplicemente un layout visivo per il controllo stesso.

A ControlTemplatecontiene generalmente solo TemplateBindingespressioni, che si ricollegano alle proprietà sul controllo stesso, mentre a DataTemplatecontiene espressioni di associazione standard, che si legano alle proprietà dei suoi DataContext(oggetto business / dominio o modello di visualizzazione).


21
Aveva senso? Immagino che sto cercando di spiegare le differenze filosofiche piuttosto che quelle tecniche.
Matt Hamilton,

110

Fondamentalmente a ControlTemplatedescrive come visualizzare un controllo mentre a DataTemplatedescrive come visualizzare i dati.

Per esempio:

A Labelè un controllo e includerà un ControlTemplateche dice che Labeldovrebbe essere visualizzato usando un Bordercontenuto intorno (un DataTemplatecontrollo o un altro).

Una Customerclasse è Dati e verrà visualizzata utilizzando una DataTemplateche potrebbe dire per visualizzare il Customertipo come StackPanelcontenente due che TextBlocksmostra il Nome e l'altro che mostra il numero di telefono. Potrebbe essere utile notare che tutte le classi vengono visualizzate usando DataTemplates, di solito userete semplicemente il modello predefinito che è a TextBlockcon la Textproprietà impostata sul risultato del ToStringmetodo dell'Oggetto .


Votato per la semplicità della descrizione. Molto apprezzato.
Pete Magsig,

31

Troels Larsen ha una buona spiegazione sul 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>

(Modelli rubati in modo palese da http://msdn.microsoft.com/en-us/library/system.windows.controls.controltemplate.aspx e http://msdn.microsoft.com/en-us/library/system.windows .controls.contentcontrol.contenttemplate% 28VS.95% 29.aspx rispettivamente)

Ad ogni modo, ControlTemplate decide l'aspetto del pulsante stesso, mentre ContentTemplate decide l'aspetto del contenuto del pulsante. Quindi potresti associare il contenuto a una delle tue classi di dati e presentarlo come desideri.


19

ControlTemplate: Rappresenta lo stile di controllo.

DataTemplate: Rappresenta lo stile dei dati (come desideri mostrare i tuoi dati).

Tutti i controlli utilizzano un modello di controllo predefinito che è possibile ignorare tramite la proprietà del modello.

Ad esempio il
Button modello è un modello di controllo. Buttonmodello di contenuto è un modello di dati

<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- Modifica dell'aspetto dell'elemento. Ad esempio Buttonpuò contenere immagini e testo

DataTemplate - Rappresentazione dei dati sottostanti utilizzando gli elementi.


1

ControlTemplateDEFINISCE l'aspetto visivo, DataTemplateSOSTITUISCE l'aspetto visivo di un elemento dati.

Esempio: voglio mostrare un pulsante da rettangolare a cerchio form => Modello di controllo.

E se hai oggetti complessi da controllare, chiama e mostra ToString(), con DataTemplatecui puoi ottenere vari membri, visualizzare e modificare i loro valori dell'oggetto dati.


0

Tutte le risposte di cui sopra sono ottime, ma c'è una differenza fondamentale che è stata persa. Questo aiuta a prendere decisioni migliori su quando usare cosa. È di ItemTemplateproprietà:

  • DataTemplate viene utilizzato per gli elementi che forniscono la proprietà ItemTemplate per sostituire il contenuto dei suoi articoli utilizzando DataTemplatei messaggi definiti in precedenza in base ai dati associati tramite un selettore fornito.

  • Ma se il tuo controllo non ti offre questo lusso, puoi comunque utilizzare un oggetto in ContentViewgrado di visualizzare i suoi contenuti da predefiniti ControlTemplate. È interessante notare che è possibile modificare la ControlTemplateproprietà del proprio ContentViewin fase di esecuzione. Un'altra cosa da notare che a differenza dei controlli con ItemTemplateproprietà, non è possibile avere un controllo TemplateSelectorper questo (ContentView). Tuttavia, è ancora possibile creare trigger per modificare il ControlTemplateruntime.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.