I've declared the following types:
public interface ITest { }
public class ClassOne : ITest { }
public class ClassTwo : ITest { }
In my viewmodel I'm declaring and initializing the following collection:
public class ViewModel
{
public ObservableCollection<ITest> Coll { get; set; } = new ObservableCollection<ITest>
{
new ClassOne(),
new ClassTwo()
};
}
In my view I'm declaring the following ItemsControl
<ItemsControl ItemsSource="{Binding Coll}">
<ItemsControl.Resources>
<DataTemplate DataType="local:ClassOne">
<Rectangle Width="50" Height="50" Fill="Red" />
</DataTemplate>
<DataTemplate DataType="local:ClassTwo">
<Rectangle Width="50" Height="50" Fill="Blue" />
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
What I expect to see is a red square followed by a blue square, instead what I see is the following:
What am I doing wrong?
Your issue might be caused by finnicky workings of XAML. Specifically, you need to pass Type
to DataType
, but you were passing a string with the name of the type.
Use x:Type
to decorate the value of DataType
, like so:
<ItemsControl ItemsSource="{Binding Coll}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type local:ClassOne}">
<Rectangle Width="50" Height="50" Fill="Red" />
</DataTemplate>
<DataTemplate DataType="{x:Type local:ClassTwo}">
<Rectangle Width="50" Height="50" Fill="Blue" />
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>