I’ve added a new feature to my Windows Phone Assets project at CodePlex.
This feature provides you an option to have an Implicit DataTemplate in both ContentControl and ItemsControl like with WPF.
Implicit data-template is a well-known and must-have feature added to WPF, and later to Silverlight 5, providing an option to locate data-template implicitly in terms of Content Model (ContentControl and ItemsControl controls).
Using this feature, one can set a ContentControl.Content property with a data, non-visual object, or populate an ItemsControl control with such objects via binding, then let WPF/SL render it using the implicit data-template best match to this type. This implicit data-template is searched up in the resources hierarchy till found.
Usage
Code Snippet
- <Application
- x:Class="ImplicitDataTemplateTester.App"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
- xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone">
-
- <!--Application Resources-->
- <Application.Resources>
- <DataTemplate x:Key="ImplicitDataTemplateTester.Circle">
- <Grid Height="120" Width="120">
- <Ellipse StrokeThickness="4">
- <Ellipse.Stroke>
- <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
- <GradientStop Color="#FF5680FF" Offset="0"/>
- <GradientStop Color="#FF00175F" Offset="0.992"/>
- </LinearGradientBrush>
- </Ellipse.Stroke>
- <Ellipse.Fill>
- <RadialGradientBrush GradientOrigin="0.671,0.221">
- <GradientStop Color="White"/>
- <GradientStop Color="#FF0035FF" Offset="0.989"/>
- </RadialGradientBrush>
- </Ellipse.Fill>
- </Ellipse>
- <TextBlock Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" />
- </Grid>
- </DataTemplate>
- </Application.Resources>
The markup-snippet above contains a DataTemplate placed in the Application level resource, for implicit use with the ImplicitDataTemplate.Circle data type.
You can also add/override data-templates in other UI elements in the logical tree.
Code Snippet
- <ContentControl Grid.Column="1"
- VerticalAlignment="Center" HorizontalAlignment="Center"
- Content="{Binding SelectedShape, Mode=OneWay}">
- <i:Interaction.Behaviors>
- <ts:ImplicitContentTemplateBehavior />
- </i:Interaction.Behaviors>
- </ContentControl>
The markup-snippet above demonstrates how to bind a Content of a ContentControl element with a data-type, then use the ImplicitContentTemplateBehavior to implicitly locate and set the correct DataTemplate for the specific content type.
Code Snippet
- <ListBox Grid.Column="0"
- VerticalAlignment="Center" HorizontalAlignment="Center"
- ItemsSource="{Binding Shapes}"
- SelectedItem="{Binding SelectedShape, Mode=TwoWay}">
- <i:Interaction.Behaviors>
- <ts:ImplicitItemTemplateBehavior/>
- </i:Interaction.Behaviors>
- </ListBox>
The markup-snippet above demonstrates how to bind an ItemsControl with collection of data-types, then use the ImplicitItemTemplateBehavior to implicitly locate and set the correct DataTemplate for each element provided in the bound collection.
Here is the result running such code on the Phone:
Each data-element is perfectly rendered using the correct data-template implictly.
Download the Windows Phone Assets library with this code sample from here.