Question

I am stuck to a data-binding issue in WPF. Following is the scenario.

I have a Telerik’s RadTileView which is bind to an ObservableCollection of type MyItem.

public class MyItem : UserControl
    {
        public string Title { get; set; }
        public string Content { get; set; }
    }

ObservableCollection is being populated like,

        private ObservableCollection<MyItem> items_ = null;
        public ObservableCollection<MyItem> TileItems
        {
            get 
            {
                if (items_ == null)
                {
                    items_ = new ObservableCollection<MyItem>();
                    items_.Add(new MyItem() { Title = "ABC", Content = "Test Content" });
                    items_.Add(new MyItem() { Title = "DEF", Content = "Test Content1" });
                    items_.Add(new MyItem() { Title = "GHI", Content = "Test Content2" });
                }

                return items_;
            }
            set 
            {
                items_= value;
                OnPropertyChanged("TileItems");
            }
        }

and the XAML is

<DataTemplate x:Key="headerTemplate">
                        <TextBlock Text="{Binding Title, Converter={StaticResource debugconv}}"></TextBlock>
                    </DataTemplate>

<telerik:RadTileView x:Name="WidgetTileView"
                                      ItemsSource="{Binding TileItems}" ColumnWidth="Auto"
                              ItemTemplate="{StaticResource headerTemplate}">
                </telerik:RadTileView>

When I run the above code, it shows three empty RadTileView but they are empty, as in figure

If I change the MyItem as

    public class MyItem
    {
        public string Title { get; set; }
        public string Content { get; set; }
    }

Then it starts working as expected, as shown

I am unable to figure out what is the problem with data binding when I inherit MyItem from UserControl?

Edit:
My requirement is to show the Custom UserControl in content area of RadTileView and Title text in the header area of RadTileView, how it can be achieved?

Answer 1

The controls will not use the data templates if the items are not data, plain and simple. Do not inherit from UserControl if the class is supposed to be data (you are also breaking the model-view-separation if you do).

The item is only evaluated as one entity by the RadTileView so if the item as a whole is considered displayable the data templates are ignored. If you must do this then move the UserControl to a property and use that in the ContentTemplate (which just contains a ContentPresenter binding the Content to that property containing the UserControl).

If you want to adhere to the model-view separation you should not inherit from any UI-related class and your Content should contain data, this can then be templated in the ContentTemplate with the UserControls you want.