Question

Can anyone help me to create an ItemsSource property in my custom Silverlight UserControl?

Here is my a quite simple ViewModel:

public class MyVM
{
    public ObservableCollection<int> Values { set; get; }

    public MyVM()
    {
        this.Values = new ObservableCollection<int>();
    }
}

This is my (inner) UserControl which I past into main UserContorl (MainPage):

<UserControl x:Class="SilverlightApplication1.SilverlightControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White" >
    <Border BorderBrush="Black" BorderThickness="2">
        <ListBox Margin="5" Name="lst" />
    </Border>
</Grid>
</UserControl>

public partial class SilverlightControl1 : UserControl
{
    public IEnumerable MyItemsSource
    {
        get
        {
            return (IEnumerable)GetValue(MyItemsSourceProperty);
        }
        set
        {
            SetValue(MyItemsSourceProperty, value);
        }
    }
    public static readonly DependencyProperty MyItemsSourceProperty =
        DependencyProperty.Register("MyItemsSource", typeof(IEnumerable), typeof(SilverlightControl1), new PropertyMetadata(null));


    public SilverlightControl1()
    {
        InitializeComponent();
    }
}

This is a small Container which hosts my UserControl:

<UserControl x:Class="SilverlightApplication1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:SilverlightApplication1"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
    <local:SilverlightControl1 Name="qqq" MyItemsSource="{Binding Path=Values}"/>

</Grid>
</UserControl>

public partial class MainPage : UserControl
{
    public MainPage()
    {
        InitializeComponent();
        MyVM vm = new MyVM();
        vm.Values.Add(1);
        vm.Values.Add(2);
        vm.Values.Add(3);
        vm.Values.Add(4);

        this.DataContext = vm;
    }
}

How can I bind data to my inner ListBox?

Answer 1

I have stopped using UserControl completely, partly because of this. I use CustomControls instead. The usability and complaxity is exactly the same. You have possibiliity for codebehind and a separate model (although I mostly use the control’s code as the model itself setting this.DataContext = this;). My code also gets more structured (at least I think so) and I have more possibilities to change the UI for the control.

The only disadvantage with using CustomControls is that I don’t have the design surface like you have in UserControls and Windows. The UI is put in the Generic.xaml file instead (be default) and built by writing XAML in the editor, opposed to using your mouse. That’s a bummer to start with, but I got used to it surprisingly fast.

So my answer is that if you use CustomControls, you can do the exact same. The Bindings are written like this:

MyItemsSource="{Binding RelativeSource="{RelativeSource Mode=TemplatedParent}" Path=Values}"

…or simply:

MyItemsSource="{TemplateBinding Values}"

…if you don’t have to add any Converters or anything else to the Binding.