动态切换控件类型以显示不同的内容类型

Question

In my app (windows 8.1) I use the split Visual Studio template. It is working and I can show text content if I choose an item.

The content is mixed with text, images, pdfs.

So how can I dynamically switch the control type (eg TextBlock, Image, UserControl) based an the content data?

If I get text it should displayed in an TextBlock, but if I get an Image (Link) it should displayed in a image control. (Maybe the way to switch the control type is wrong, I don't know!?)

Can I solve this in XAML or should I do it in code behind?

I don't know how can I do this. Can anyone please give me a hint?

<Grid x:Name="itemDetailGrid" Margin="0,60,0,50">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Image Source="{Binding ImagePath}" Grid.Row="1" Margin="0,0,20,0" Width="180" Height="180" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
            <StackPanel x:Name="itemDetailTitlePanel" Grid.Row="1" Grid.Column="1">
                <TextBlock x:Name="itemTitle" Margin="0,-10,0,0" Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}"/>
                <TextBlock x:Name="itemSubtitle" Margin="0,0,0,20" Text="{Binding Subtitle}" Style="{StaticResource SubtitleTextBlockStyle}"/>
            </StackPanel>
          <!--  <TextBlock Grid.Row="2" Grid.ColumnSpan="2" Margin="0,20,0,0" Text="{Binding Content}" Style="{StaticResource BodyTextBlockStyle}"/> -->
            <Image Source="{Binding Content}" Grid.ColumnSpan="2" Grid.Row="2" Margin="0,20,0,0"  Stretch="UniformToFill" />

Answer 1

The answer to your question is for you to use DataTemplate s to define how each data type should be rendered in the UI. All you need to do is to declare a DataTemplate for each different data type:

<DataTemplate DataType="{x:Type System:String}">
    <TextBlock Text="{Binding}">
</DataTemplate>
...
<DataTemplate DataType="{x:Type Custom:DataObject}">
    <UserControl DataContext="{Binding}">
</DataTemplate>

If you omit the x:Key references (as in the example above), then the Framework will automatically render the content of the relevant DataTemplate whenever it comes across one of the specified data types. Please see the Data Templating Overview page on MSDN for further details.