Silverlight: How do I update properties dynamically in accordance with a current settings class?

Question

Below is the complete code for the example. I have a user control called ColorPicker that contains 3 buttons each displaying a color. When a button is clicked the Color property in the CurrentSettings class is set. What I want to happen is the color of the rectangle on MainPage to change to match the new CurrentSettings.Color and the color of the rectangles (added in the code behind) in the listbox in the second user control to also change color to match the new CurrentSettings.Color.

I have been trying to accomplish this unsuccessfully using Dependency Properties and INotifyPropertyChanged and have now decided to start again with a clean slate.

// Current Sttings class:

public static class CurrentSettings
{
    public static Color Color { get; set; }
}

// MainPage XAML

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="33*"/>
        <ColumnDefinition Width="33*"/>
        <ColumnDefinition Width="33*"/>
    </Grid.ColumnDefinitions>
    <local:ColorPicker/>
    <Rectangle Grid.Column="1" Name="rec" Width="160" Height="80" Fill="Yellow"/>
    <local:PenSelector Grid.Column="2"/>
</Grid>

// ColorPicker User Control XAML:

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
    <Button x:Name="Red" Width="40" Height="40" Click="Red_Click">
        <Button.Content>
            <Rectangle Width="30" Height="30" Fill="Red"/>
        </Button.Content>
    </Button>
    <Button x:Name="Green" Width="40" Height="40" Click="Green_Click">
        <Button.Content>
            <Rectangle Width="30" Height="30" Fill="Green"/>
        </Button.Content>
    </Button>
    <Button x:Name="Blue" Width="40" Height="40" Click="Blue_Click">
        <Button.Content>
            <Rectangle Width="30" Height="30" Fill="Blue"/>
        </Button.Content>
    </Button>
</StackPanel>

// ColorPicker User Control Code Behind:

public partial class ColorPicker : UserControl
{
    public ColorPicker()
    {
        InitializeComponent();
    }

    private void Red_Click(object sender, RoutedEventArgs e)
    {
        CurrentSettings.Color = Colors.Red;
    }

    private void Green_Click(object sender, RoutedEventArgs e)
    {
        CurrentSettings.Color = Colors.Green;
    }

    private void Blue_Click(object sender, RoutedEventArgs e)
    {
        CurrentSettings.Color = Colors.Blue;
    }
}

// Pen Selector User Control XAML:

<ListBox x:Name="LayoutRoot"/>

// Pen Selector User Control XAML Code Behind:

public partial class PenSelector : UserControl
{
    public PenSelector()
    {
        InitializeComponent();

        LayoutRoot.Items.Add(new Rectangle() { Width = 160, Height = 80, Fill = new SolidColorBrush(Colors.Yellow) });
        LayoutRoot.Items.Add(new Rectangle() { Width = 160, Height = 80, Fill = new SolidColorBrush(Colors.Yellow) });
    }
}

Answer 1

You were on the right track with INotifyPropertyChanged . Start with the settings class but make the Color setting an instance property on a class that implements INotifyPropertyChanged .

 public class CurrentSettings : INotifyPropertyChanged
 {
     private Color _Color;
     public Color Color
     {
        get { return _Color; }
        set { _Color = value; NotifyPropertyChanged("Color"); }
     }
     private void NotifyPropertyChanged(string name)
     {
         if (PropertyChanged != null)
             PropertyChanged(this, new PropertyChangedEventArgs(name);
     }
     public event PropertyChangedEventHandler PropertyChanged;
 }

Now place an instance of this in the Resources your App.Xaml :-

 <Application.Resources>
     <local:CurrentSettings x:Key="CurrentSettings" />
 </Application.Resources>

Now add a CurrentSettings private property to your color picker:-

private CurrentSettings CurrentSettings
{
   get
   {
        return (CurrentSettings)Application.Current.Resources["CurrentSettings"];
   }
}

Finally use binding on the rectangle Fill property like this:-

<Rectangle Grid.Column="1" Name="rec">
    <Rectangle.Fill>
         <SolidColorBrush Color="{Binding Color, Source={StaticResource CurrentSettings}}"/>
    </Rectangle.Fill>
</Rectangle>

Answer 2

You have quite a few moving parts here - a colorPicker usercontrol that changes a POCO on the main form which in turn updates items added within another usercontrol a PenSelector - if I understand you correctly. If you add DPs to your usercontrols and add INotifyPropertyChanged to your POCO then in turn bind the DPs to the POCO public property you should be able to have the interaction you want with some decoupling between the parts:

The Poco:

public class CurrentSelected:INotifyPropertyChanged
{

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    protected void Notify(string propName)
    {
        if (this.PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }
    #endregion


    private SolidColorBrush color;

    public SolidColorBrush Color
    {
        get { return color; }
        set { 
            if (this.color==value) return;
            this.color = value;
            Notify("Color");
        }
    }

    public CurrentSelected() { 
        this.color = new  SolidColorBrush(Colors.Orange);
    }

}

The Mainwindow:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="33*"/>
        <ColumnDefinition Width="33*"/>
        <ColumnDefinition Width="33*"/>
    </Grid.ColumnDefinitions>
    <local:ColorPicker CurrentColor="{Binding Path=Color, Mode=TwoWay}" Grid.Column="0"/>
    <Rectangle Fill="{Binding Path=Color}" Grid.Column="1" Width="160" Height="80" />
    <local:PenSelector ColorSelected="{Binding Path=Color, Mode=TwoWay}" Grid.Column="2"/>
</Grid>

Code behind:

CurrentSelected Settings = new CurrentSelected();

    public MainPage()
    {
        InitializeComponent();
        this.DataContext = this.Settings;
    }

User Controls - ColorPicker

<StackPanel x:Name="LayoutRoot" Orientation="Horizontal">
    <Button Click="Button_Click">
        <Button.Content>
            <Rectangle Fill="Red"/>
        </Button.Content>
    </Button>

    <Button Click="Button_Click">
        <Button.Content>
            <Rectangle Fill="Green"/>
        </Button.Content>
    </Button>
    <Button Click="Button_Click">
        <Button.Content>
            <Rectangle Fill="Blue" />
        </Button.Content>
    </Button>
</StackPanel>

Its code:

public static readonly DependencyProperty CurrentColorProperty=
        DependencyProperty.Register("CurrentColor",
            typeof(SolidColorBrush), typeof(ColorPicker),
            new PropertyMetadata(new SolidColorBrush(Colors.Gray)));

    public SolidColorBrush CurrentColor
    {
        get
        {
            return (SolidColorBrush)GetValue(CurrentColorProperty);
        }
        private set
        {
            SetValue(CurrentColorProperty, value);
        }
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Button b = (Button)sender;
        Shape r = (b.Content) as Shape;
        SolidColorBrush sb = new SolidColorBrush(Colors.Yellow);
        sb = (SolidColorBrush)r.Fill;
        this.CurrentColor = sb;
    }

User Control PenSelector

The xaml is as you had it just a ListBox all the work is in the code behind

public static readonly DependencyProperty ColorSelectedProperty =
        DependencyProperty.Register(
            "ColorSelected", 
            typeof(SolidColorBrush),
            typeof(PenSelector), 
            new PropertyMetadata(new SolidColorBrush(Colors.Yellow)));

    public SolidColorBrush ColorSelected
    {
        get
        {
            return (SolidColorBrush)GetValue(ColorSelectedProperty);
        }
        set
        {
            SetValue(ColorSelectedProperty, value);
        }
    }

    public PenSelector()
    {
        InitializeComponent();

        LayoutRoot.Items.Add(addRectangle());
        LayoutRoot.Items.Add(addRectangle());
    }

    private Rectangle addRectangle()
    {
        Rectangle r = new Rectangle() { Width = 160, Height = 80 };
        Binding b = new Binding();
        b.Source=this;
        b.Path=new PropertyPath("ColorSelected");
        b.Mode=BindingMode.OneWay;
        r.SetBinding(Rectangle.FillProperty, b);
        return r;
    }

I have defined the POCO and DPs each as SolidColorBrushes although you would probably want to use a Color and a converter to convert to a Brush. The CurrentSelected class instance Settings is assigned to the mainWindows datacontext. On the ColorPicker I have just put the code in a single Button click handler and this gets the colour based on the Fill color specified in the xaml. This updates the CurrentColor DP on the Picker. The PenSelector sets up Rectangles with bindings to its own DP then all that remains is to set up the databinding in the MainWindow on the Color property exposed by CurrentSelected. The DPs define default values. There are other ways to do all this but it depends on your requirements (as always)!