Qfyilyi

Hello everyone and welcome to yet another nested DataTemplate question!

In this one, I'd like to have a DataTemplate like this, written on a ResourceDictionary:

<DataTemplate x:Key="Vector3Template">

    <StackPanel Orientation="Horizontal">

        <StackPanel Orientation="Horizontal">

            <xctk:DoubleUpDown Tag="X" Style="{StaticResource DoubleUpDownStyle}" Value="{Binding X}"/>

        </StackPanel>

        <StackPanel Orientation="Horizontal">

            <xctk:DoubleUpDown Tag="Y" Style="{StaticResource DoubleUpDownStyle}" Value="{Binding Y}"/>

        </StackPanel>

        <StackPanel Orientation="Horizontal">

            <xctk:DoubleUpDown Tag="Z" Style="{StaticResource DoubleUpDownStyle}" Value="{Binding Z}"/>

        </StackPanel>

    </StackPanel>

</DataTemplate>

Being surrounded by a DataTemplate with a border, like the following, also written on a ResourceDictionary (in the future it's gonna have a couple more elements to it):

<DataTemplate x:Key="ComponentTemplate">

    <Border Margin="5" BorderThickness="2" BorderBrush="Gray"/>

</DataTemplate>

Why would I want this, you ask? Well, I'm trying to display an ObservableCollection of IComponent named _components and I want all instances to share the same Borders, but with its core being specific to every class type that inherits from IComponent.

In order to display the list with its differents type, I'm using the following code on a UserControl:

<Grid x:Name="LayoutRoot" Background="White">        

<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">

    <StackPanel>

        <ListView x:Name="_componentsList" 

                 ItemsSource="{Binding Components}" 

                 HorizontalContentAlignment="Stretch">

            <ListView.Resources>

                <DataTemplate DataType="{x:Type models:Transform}">

                    <ContentControl Content="{StaticResource ComponentTemplate}" ContentTemplate="{StaticResource TransformTemplate}"/>

                </DataTemplate>

                <DataTemplate DataType="{x:Type models:Vector3}">

                    <ContentPresenter ContentTemplate="{StaticResource Vector3Template}"/>

                </DataTemplate>

            </ListView.Resources>

        </ListView>

    </StackPanel>

</ScrollViewer>

Trying to build this system with Prism 6.3 and with almost no code-behind, every c# code that I have is just for models, so no real logic here so far.

Is this possible? How so? I've started playing with WPF a few days ago and still have a lot to learn.

I believe what you're looking for is to simply use a DataTemplateSelector in which the DataTemplate used is determined by the data. You can find a full tutorial here. Once you've setup your DataTemplateSelector you simply would pass it in as the DataTemplate to your control.

public class PropertyDataTemplateSelector : DataTemplateSelector

{

    public DataTemplate DefaultnDataTemplate { get; set; }

    public DataTemplate BooleanDataTemplate { get; set; }

    public DataTemplate EnumDataTemplate { get; set; }



    public override DataTemplate SelectTemplate(object item, 

            DependencyObject container)

    {

        DependencyPropertyInfo dpi = item as DependencyPropertyInfo;

        if (dpi.PropertyType == typeof(bool))

        {

            return BooleanDataTemplate;

        }

        if (dpi.PropertyType.IsEnum)

        {

            return EnumDataTemplate;

        }



        return DefaultnDataTemplate;

    }

}