Dynamic Controls for PhoneApplicationPage - wpf

Question

i want to show a detail page of a model. depending on the type of the model (defined as a string property) i want to display certain controls (image, text, media .. )
in pseudo code i image it would look like:
<phone:PhoneApplicationPage
x:Class="TestApp.FullscreenArtifactPage"
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"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False"
xmlns:testapp="clr-namespace:TestApp"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
>
<!-- if(model.type == TEXT) -->
<StackPanel>
<TextBlock Name="MimeText" Text="{Binding Mime}"/>
</StackPanel>
<!-- else if(model.type == IMAGE) -->
<StackPanel>
<Image Name="Image" Source="{Binding PayloadUri}"/>
</StackPanel>
</phone:PhoneApplicationPage>
I know that I can use a DataTemplateSelector in ListBoxes, but since i don't have a ListBox here, there is no onChangeContent Method called.
Any Suggestions?
Thanks

Answer 1

Your even can discard ContentControl in your XAML and instead of ControlTemplate you need to use DataTemplate
<testapp:FullscreenTypeSelector CurrentItem="{Binding YourItem}">
<testapp:FullscreenTypeSelector.ImageTemplate>
<DataTemplate>
<StackPanel>
<Image Name="Image" Source="{Binding PayloadUri}"/>
</StackPanel>
</DataTemplate>
</testapp:FullscreenTypeSelector.ImageTemplate>
<testapp:FullscreenTypeSelector.TextTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Name="MimeText" Text="{Binding Mime}"/>
</StackPanel>
</DataTemplate>
</testapp:FullscreenTypeSelector.ImageTemplate>
</testapp:FullscreenTypeSelector>
And define your selector in this way
public class FullscreenTypeSelector : ContentControl
{
public static readonly DependencyProperty CurrentItemProperty =
DependencyProperty.Register("CurrentItem", typeof (object), typeof (FullscreenTypeSelector), new PropertyMetadata(default(object)));
public object CurrentItem
{
get
{
return (object) GetValue(CurrentItemProperty);
}
set
{
SetValue(CurrentItemProperty, value);
}
}
public bool IsNote
{
get;
set;
}
public DataTemplate ImageTemplate
{
get;
set;
}
public DataTemplate TextTemplate
{
get;
set;
}
public override void OnApplyTemplate()
{
//your condition goes here
if (CurrentItem != null)
{
ContentTemplate = TextTemplate;
}
else
{
ContentTemplate = ImageTemplate;
}
}
}