Binding usercontrol property to custom class

Question

In my application I'm using a usercontrol called "ChannelControls" which I instance 6 times, on the mainwindow.

public partial class ChannelControls : UserControl
{
    CMiXData cmixdata = CMiXData.Instance;
    public ChannelControls()
    {
        InitializeComponent();
        this.DataContext = this;
    }

    public static readonly DependencyProperty ChannelSpriteCountProperty =
    DependencyProperty.Register("ChannelSpriteCount", typeof(string), typeof(ChannelControls), new PropertyMetadata("1"));
    [Bindable(true)]
    public string ChannelSpriteCount
    {
        get { return (string)this.GetValue(ChannelSpriteCountProperty); }
        set { this.SetValue(ChannelSpriteCountProperty, value); }
    }

I'm making using a custom class called cmixdata to hold all the data for my application (it will contains different properties with List of string, double etc...). The ChannelControls will contains many sliders, button and other usercontrols but at the moment I'm trying to bind just one of them.

Here is one part of this custom class that will hold the data, it has a private constructor as I need to access it from anywhere :

[Serializable]
public class CMiXData : INotifyPropertyChanged
{
    private static CMiXData _instance = null;
    public static CMiXData Instance
    {
        get
        {
            if (_instance == null)
            {
                _instance = new CMiXData();
            }
            return _instance;
        }
    }
    private CMiXData() { } //prevent instantiation from outside the class


    public event PropertyChangedEventHandler PropertyChanged;
    private void RaisePropertyChanged(string propertyName)
    {
        var handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
        MessageBox.Show(propertyName);
    }


    private List<string> _SpriteCount = new List<string>(new string[] {"1", "1", "1", "1", "1", "1"});
    public List<string> SpriteCount
    {
        get { return _SpriteCount; }
        set
        {
            if(_SpriteCount != value)
            {
                _SpriteCount = value;
                RaisePropertyChanged("SpriteCount");
            }
        }
    }

And here is how I'm trying to bind the channelcontrol property ChannelSpriteCount to my singleton class : cmixdata.

<CMiX:ChannelControls x:Name="Layer0" Tag="0" Visibility="Visible" ChannelSpriteCount="{Binding SpriteCount[0], Mode=TwoWay}"/>

On the main usercontrol, which ChannelControls is instanced, the datacontext is set this way :

public partial class CMiX_UI : UserControl
{
    BeatSystem beatsystem = new BeatSystem();
    CMiXData cmixdata = CMiXData.Instance;

    public CMiX_UI()
    {
        InitializeComponent();
        this.DataContext = cmixdata;
    }

And on the xaml side :

<UserControl
        x:Class="CMiX.CMiX_UI"
        DataContext="{x:Static CMiX:CMiXData.Instance}"

But for some reason the property in cmixdata is not updated and always has the default value...

Answer 1

A UserControl should never have an "own" instance of a view model. Instead, it should have dependency properties that are bound to properties of an "external" view model.

Your ChannelsControl would declare a property like this (where I suppose that string is not an appropriate type for a count):

public partial class ChannelsControl : UserControl
{
    public static readonly DependencyProperty SpriteCountProperty =
        DependencyProperty.Register(
            nameof(SpriteCount), typeof(string), typeof(ChannelsControl));

    public string SpriteCount
    {
        get { return (string)GetValue(SpriteCountProperty); }
        set { SetValue(SpriteCountProperty, value); }
    }

    ...
}

In ChannelsControl's XAML, you would bind it like this:

<CMiX:Counter Count="{Binding SpriteCount,
                      RelativeSource={RelativeSource AncestorType=UserControl}}"/>

You would now use your UserControl like shown below, where you bind the Count property to a view model in the DataContext like this:

<Window.DataContext>
    <local:CMiXData />
</Window.DataContext>
...

<local:ChannelsControl SpriteCount="{Binding SpriteCount[0]}" ... />

---

You may now also use ChannelsControl in the ItemTemplate of an ItemsControl like this:

<ItemsControl ItemsSource="{Binding SpriteCount}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <local:ChannelsControl SpriteCount="{Binding}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

---

EDIT: Set the Window's DataContext to your view model singleton instance like this:

<Window ... DataContext="{x:Static local:CMiXData.Instance}" >

Or in code behind, in the MainWindow constructor:

DataContext = CMiXData.Instance;