Rectangle color data binding in Silverlight

Question

I want the listpicker to be in fullscreen mode. But that is not my issue. I want the listpicker with data binding, exactly similar to the "theme Color" selection list picker in Settings page in Windows Phone. The listpicker should have a square with a color fill, and the color name . I know how to use the binding to have the list of color names, but the <Rectangle> tag inside the <DataTemplate> is not working.

This is the XAML of the Listpicker

       <toolkit:ListPicker x:Name="lpkColor" Grid.Column="1" ExpansionMode="FullScreenOnly"  Margin="8,12,-8,20" FullModeHeader="Select Color" Header="Color">
            <toolkit:ListPicker.FullModeItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Rectangle Height="50" Width="50" VerticalAlignment="Center" Fill="{Binding color}" Margin="5,30,20,20"></Rectangle>
                        <TextBlock Text="{Binding ColorName}" VerticalAlignment="Center" FontSize="40"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </toolkit:ListPicker.FullModeItemTemplate>
        </toolkit:ListPicker>

Code behind looks like this:

   public class PickerObject
    {


        public string ColorName { get; set; }
        public Color color{get;set;}
        public PickerObject(string cn, Color c)
        {
            ColorName = cn;
            color = c;
        }



    }

and inside my MainPage class

List<PickerObject> MyColors = new List<PickerObject>();

inside my constructor I have:

        MyColors = new List<PickerObject>();
        MyColors.Add(new PickerObject("white",Colors.White));
        MyColors.Add(new PickerObject("black", Colors.Black));
        MyColors.Add(new PickerObject("blue", Colors.Blue));
        MyColors.Add(new PickerObject("yellow", Colors.Yellow));
        MyColors.Add(new PickerObject("red", Colors.Red));
        lpkColor.ItemsSource = MyColors ;

But there is no Rectangle shown in the Listpicker, and no color being displayed. I would like to know what I am doing wrong, and how to do it correctly.

Answer 1

You mean this doesn't work?

<ListPicker.FullModeItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <Rectangle Margin="0,0,24,0
                       Width="50"
                       Height="50"
                       Fill="Red"/>
            <TextBlock Text="Red"/>
        </StackPanel>
    </DataTemplate>
</ListPicker.FullModeItemTemplate>

or you have another markup?

Update : now a solution

One doesn't simply bind rectangle's Fill property to Color type.
Because Fill property is of type Brush as being said here .

You can extend your markup:

<Rectangle Width="50"
           Height="50">
    <Rectangle.Fill>
        <SolidColorBrush Color="{Binding color}"/>
    </Rectangle.Fill>
</Rectangle>

Or you can implement your Color-To-Brush converter. Like this:

In your code-behind include this:

using System.Windows.Data;
using System.Globalization;

public class ColorToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
                          object parameter, CultureInfo culture)
    {
        if (value is Color)
            return new SolidColorBrush((Color)value);
        return value;
    }

    public object ConvertBack(object value, Type targetType,
                              object parameter, CultureInfo culture)
    {
        return null;
    }
}

Then in your XAML you include namespace of this code-behind. Something like:

xmlns:local="clr-namespace:YourNamespaceForConverterClass"

Also include local resources dictionary in your markup with reference to your Converter class and named x:Key property:

<phone:PhoneApplicationPage.Resources>
    <local:ColorToBrushConverter x:Key="convertColorToBrush"/>
</phone:PhoneApplicationPage.Resources>

Finally you can use converter in your Rectangle addressing to it with it's x:Key name:

<Rectangle Width="50"
           Height="50"
           Fill="{Binding color,
                  Converter={StaticResource convertColorToBrush}}"/>

If you're planning to use conversion often, placing Converter class in Application Resources Dictionary ( App.xaml file) can save your time avoiding repetitive extending markup.

But better if you just use Brush directly instead of Color I think.