WPF: Some terms defined for Rudy


I received a mail from Rudy, who asked me for some clarifications on several WPF definitions:


« The terms for which I would like to have some details, relations and usage are DataTemplate, ContentControl, ControlTemplate and Content »


A DataTemplate is a graphical representation of an object. For example if a DataTemplate is defined for a type, instances of that type can be represented on the screen by what is defined inside the DataTemplate.


A ContentControl is a Control containing a unique child (its « content »). That child is defined via the Content property of the ContentControl. Being of type object, this child can be anything : a graphical object, but also an instance of a business object.


Let’s combine these concepts in a simple example:


clip_image002


We declare :



  • a DataTemplate targeting the type String

  • two ContentControls with a Content of type String


<Page xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”


             xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”


             xmlns:system=”clr-namespace:System;assembly=mscorlib”>


            


       <Page.Resources>


             <!– We can define a default DataTemplate for all instances


                  of String. There’s a text, followed by the value of the


                  string and its length –>


             <DataTemplate DataType=”{x:Type system:String}”>


                    <StackPanel Orientation=”Horizontal”>


                           <TextBlock Text=”Valeur et longueur de la String : “/>


                           <TextBlock Text=”{Binding}” Background=”LightBlue”/>


                           <TextBlock Text=”{Binding Length}” Background=”Orange”/>


                    </StackPanel>


              </DataTemplate>


</Page.Resources>


            


       <StackPanel>


             <ContentControl>


                    <!– We can define the Content property explicitly   –>


                    <ContentControl.Content>


                           <system:String>Hello world</system:String>


                    </ContentControl.Content>


             </ContentControl>


      


             <ContentControl>


                    <!– Or we usually just benefit from the fact that Content


                         is the default property defined within the tags. So


                         this is equivalent to the previous example –>


                    <system:String>Hello world</system:String>


             </ContentControl>


       </StackPanel>


</Page>


The idea behind ControlTemplate is the same as the one behind the DataTemplate: redefine the way an object is represented graphically. There is a difference though; graphic objects deriving from Control are special in that they can be redefined graphically only via ControlTemplates and are not affected by DataTemplates. Below is the re-definition of a Button’s ControlTemplate:


clip_image002[4]



<Page xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”


             xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”


             xmlns:system=”clr-namespace:System;assembly=mscorlib”>


            


       <StackPanel>


             <!– A standard button –>


             <Button>Coucou</Button>


            


             <!– A button where the ControlTemplate is redefined


                  as an orange ellipse –>


             <Button>


                    <Button.Template>


                           <ControlTemplate TargetType=”Button”>


                                  <Grid>


                                        <Ellipse Fill=”Orange”/>


                                        <ContentPresenter HorizontalAlignment=”Center”/>


                                  </Grid>


                           </ControlTemplate>


                    </Button.Template>


             Coucou


             </Button>


       </StackPanel>


</Page>


Thanks to Rudy for proofreading the French version of this post!