Rectangle color data binding in Silverlight

Rectangle color data binding in Silverlight

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.

Answers & Comments...

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.

So that means you have to use your own written converter from Color to Fill like:

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

Or you can extend your markup:

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

Answer by Oleg for Rectangle color data binding in Silverlight

---