Question

I’m trying to make an intertia touch scrolling list in a UserControl in Silverlight 4 using Expression Blend 4. I’ve already made the dependency properties in my UserControl which i want to work like the ListBox does. ItemSource is the list of objects i want to show in my list and datatemplate is the way it should be shown.

How do i deal with these properties inside my UserControl? I have a StackPanel where all the datatemplates should be added showing the data ofc.

How do i apply the data in my IEnumerable to the DataTemplate when looping through the ItemSource to add them to the list (StackPanel).

        public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(InertiaScrollBox), null); 
    public IEnumerable ItemsSource
    {
        get{ return (IEnumerable)GetValue(ItemsSourceProperty); }
        set{ SetValue(ItemsSourceProperty, value); }
    }

    public static readonly DependencyProperty ItemTemplateProperty = DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(InertiaScrollBox), null);
    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set { SetValue(ItemTemplateProperty, value); }
    }

This was kinda hard to explain but hope you understand otherwise please ask. Thanks in advance

Answer 1

Dependency properties are rather useless if to not handle their changes.
At first you should add PropertyChanged callbacks. In my example I add them inline and call the UpdateItems private method.

public static readonly DependencyProperty ItemsSourceProperty =
DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(InertiaScrollBox), 
    new PropertyMetadata((s, e) => ((InertiaScrollBox)s).UpdateItems()));

public static readonly DependencyProperty ItemTemplateProperty = 
DependencyProperty.Register("ItemTemplate", typeof(DataTemplate), typeof(InertiaScrollBox), 
    new PropertyMetadata((s, e) => ((InertiaScrollBox)s).UpdateItems()));

Then you can call the LoadContent method of the DataTemplate class and set an item from the ItemsSource as the DataContext to the returned visual element:

private void UpdateItems()
{
    //Actually it is possible to use only the ItemsSource property,
    //but I would rather wait until both properties are set
    if(this.ItemsSource == null || this.ItemTemplate == null)
        return;

    foreach (var item in this.ItemsSource)
    {
        var visualItem = this.ItemTemplate.LoadContent() as FrameworkElement;
        if(visualItem != null)
        {
            visualItem.DataContext = item;
            //Add the visualItem object to a list or StackPanel
            //...
        }
    }
}