Silverlight - Changing button text color created dynamically

Question

I am trying to change a button text color of dynamically created buttons on a Silverlight form using ViewModel. The problem I face is, when I change the color of a button text, all the buttons will get effected. Since, the buttons are dynamically created, I can't have a control on it.

I was suggested to write a ForegroundColor property into Model and then attach to the button, I tried as you see in code, but couldn't do much about it.

Could you see as what I am doing and help me with your suggestions as I am not sure, I am doing it right way.

Thanks

Model

namespace Web.Models
{
  [DataContract(IsReference = true)]
  public class Sales
  {
    [DataMember]
    public int SalesId { get; set; }
    [DataMember]
    public int ShowOrder { get; set; }
    [DataMember]
    public bool Active { get; set; }
    [DataMember]
    public bool Regurgitate { get; set; }

    [DataMember]
    public int ForegroundColor { get; set; }

    public Sales(Salese result)
    {
        SalesId = result.SalesId;
        ShowOrder = result.ShowOrder;
        Active = result.Active;
        Regurgitate = result.Regurgitate;            

        if (SalesId == 12)
        {
            var bytes = System.BitConverter.GetBytes(ForegroundColor);
            Color btnColor = Color.FromArgb(bytes[3], bytes[2], bytes[1], bytes[0]);

            SolidColorBrush myBrush = new SolidColorBrush(btnColor);
        }
   }
}

}

ViewModel

private Brush _foregroundColor = new SolidColorBrush(Colors.Black); 

public override void Loaded()
{
    OnMainOutcome();
}


public Brush ForegroundColor
{
   get { return _foregroundColor; }
   set
   {
       if (_foregroundColor == value) return;
       _foregroundColor = value;                

       OnPropertyChanged("ForegroundColor");
    }
 }

 private void OnMainOutcome()
 {
    var selectedSalesId = (int)OutcomeCommand.CommandParameter;
    CurrentSubOutcomes = GetCurrentSubOutcomes(selectedSalesId);

    foreach (var index in CurrentOutcomes)
    {
       if (index.OutcomeId == 12)        
          ForegroundColor = new SolidColorBrush(Colors.Red);
       else
          ForegroundColor = new SolidColorBrush(Colors.Black);
    }
 }

XAML Edited

 <controls:ChildWindow.Resources>
    <converters:NumericToColorConverter x:Key="NumericToColorConverter"/>
</controls:ChildWindow.Resources>

 <ListBox Grid.Row="1" Height="Auto" MinHeight="200" Width="160" Margin="2,2,2,2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Path=CurrentOutcomes}" Background="{x:Null}" BorderBrush="{x:Null}">
      <ListBox.ItemTemplate>
          <DataTemplate>
               <Button Height="30" Width="150" HorizontalAlignment="Center" Content="{Binding Outcome}" CommandParameter="{Binding SalesOutcomeId }" Command="{Binding Source={StaticResource ViewModel}, Path=OutcomeCommand}" Foreground="{Binding Source={StaticResource ViewModel}, Converter={StaticResource NumericToColorConverter}, Path=ForegroundColor}" />
          </DataTemplate>
      </ListBox.ItemTemplate>
 </ListBox>

Converter Class NEW

  using System;
  using System.Windows.Data;
  using System.Windows.Media;
  using System.Windows;

  namespace Converters
  {
      public class NumericToColorConverter : IValueConverter
      {
        static readonly SolidColorBrush RED_BRUSH = new SolidColorBrush(Colors.Red);
        static readonly SolidColorBrush BLUE_BRUSH = new SolidColorBrush(Colors.Blue);

        public object Convert(object value, Type targetType,
        object parameter, System.Globalization.CultureInfo culture)
        {
           //Int32 id = System.Convert.ToInt32(value);

           //LinearGradientBrush brush = new LinearGradientBrush();
           //brush.StartPoint = new Point(0, 1);
           //brush.EndPoint = new Point(0, 0);
           //brush.GradientStops.Add(new GradientStop()
           //{
           //    Color = Colors.White,
           //    Offset = 0
           //});
           //brush.GradientStops.Add(new GradientStop()
           //{            
           //    Color = Color.FromArgb(
           //        200,
           //        System.Convert.ToByte((id * 103) % 256),
           //        System.Convert.ToByte((id * 157) % 256),
           //        System.Convert.ToByte((id * 233) % 256)
           //    ),
           //    Offset = 1
           //});

           //return brush;
           var OutcomeId = (int)value;

           if (OutcomeId == 12)
           {
              return RED_BRUSH;
           }
           else
           {
              return BLUE_BRUSH;
           }
    }

    public object ConvertBack(object value, Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

}

Answer 1

Your listbox displays a list of Sales , but each item is templated to bind button foreground to single property in the VM. Create MyBrush property in your Sales class and bind to it.

namespace Web.Models
{
  [DataContract(IsReference = true)]
  public class Sales
  {
    [DataMember]
    public int SalesId { get; set; }
    [DataMember]
    public int ShowOrder { get; set; }
    [DataMember]
    public bool Active { get; set; }
    [DataMember]
    public bool Regurgitate { get; set; }

    [DataMember]
    public int ForegroundColor { get; set; }

    [DataMember]
    public SolidColorBrush MyBrush { get; set; }

    public Sales(Salese result)
    {
        SalesId = result.SalesId;
        ShowOrder = result.ShowOrder;
        Active = result.Active;
        Regurgitate = result.Regurgitate;            

        if (SalesId == 12)
        {
            var bytes = System.BitConverter.GetBytes(ForegroundColor);
            Color btnColor = Color.FromArgb(bytes[3], bytes[2], bytes[1], bytes[0]);

            MyBrush = new SolidColorBrush(btnColor);

        }
   }
}

---

<ListBox Grid.Row="1" Height="Auto" MinHeight="200" Width="160" Margin="2,2,2,2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Path=CurrentOutcomes}" Background="{x:Null}" BorderBrush="{x:Null}">
      <ListBox.ItemTemplate>
          <DataTemplate>
               <Button Height="30" Width="150" HorizontalAlignment="Center" Content="{Binding Outcome}" CommandParameter="{Binding SalesOutcomeId }" Command="{Binding Source={StaticResource ViewModel}, Path=OutcomeCommand}" Foreground="{Binding MyBrush}"  />
          </DataTemplate>
      </ListBox.ItemTemplate>
 </ListBox>

Answer 2

You bind the Foreground to a value on a StaticResource so all buttons will bind to this same value.

You can either create a specific "ButtonForegroundConverter" or you can add the Brush property to the item level viewmodel that also has the Outcome property which you already bind to the Content of the button. Then the button xaml will look something like this:

<Button ...
        Content="{Binding Outcome}" 
        Foreground="{Binding OutcomeForegroundBrush}" 
        ...
        />

If you are binding directly to an entity, then adding properties like that would not be a good idea, so the example above assumes you have a intermediate viewmodel or controller on which you could add properties like that.

If you choose to use a converter it would look something like this:

<Button ...
        Content="{Binding Outcome}" 
        Foreground="{Binding OutcomeId, Converter={StaticResource OutcomeToForegroundConverter}}" 
        ...
        />

And the converter:

namespace MyConverters {

    public sealed class OutcomeToColorConverter : IValueConverter {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {

            // We must have a valid integer value, double check bindings
            if (value == null) {
                throw new ArgumentNullException("value", 
                    "Please make sure the value is not null.");
            }

            var OutcomeId = (int)value;

            if (OutcomeId == XXX) { 
                return RED_BRUSH; 
            }
            else {
                return BLUE_BRUSH;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
            throw new NotImplementedException();
        }

        static readonly SolidColorBrush RED_BRUSH = new SolidColorBrush(Colors.Red);

        static readonly SolidColorBrush BLUE_BRUSH = new SolidColorBrush(Colors.Blue);
    }
}

Remember to declare the resource:

<myconverters:OutcomeToForegroundConverter x:Key="OutcomeToForegroundConverter" />