how to create multiselectlist of colors

Question

I have been attempting to populate a multiselectlist with the colors supported in WP7.1, but I am having issues generating a list of these colors in code behind. So far, my solution is as follows:

ColorListPage.xaml

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <toolkit:MultiselectList x:Name="ColorList" ItemsSource="{Binding}" Height="88" HorizontalAlignment="Left" VerticalAlignment="Top" >                
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="16,21,0,20">
                    <Rectangle Fill="{Binding}" Width="50" Height="50"/>
                    <TextBlock Text="{Binding}" Margin="12,10,0,0"/>
                </StackPanel>
            </DataTemplate>                
        </toolkit:MultiselectList>

and I am attempting to databind to the rectangle and textblock properties such that the rectangle will be filled with a solidcolorbrush value and the textblock will contain the name of the respective solidcolorbrush. This is where I am stuck, as I cannot figure out how to accomplish this? Specifically, I am not trying to call the accent colors, but all of the color options available (for instance seen when setting the fill of the rectangle explicity there is a huge list of options).

Answer 1

Do you want a MultiSelectList or a ListPicker? Do you want the user to be able to choose more than one color? Here is an example that uses a ListPicker. To get the colors, you will have to create the colors yourself. Here is a sample using accent colors

The xaml for the ListPicker:

        <toolkit:ListPicker x:Name="ColorPicker" ExpansionMode="FullScreenOnly"
                            FullModeHeader="COLOR"
                            Visibility="Collapsed"
                            ItemsSource="{Binding Brushes}"
                            SelectedItem="{Binding SelectedBrush, Mode=TwoWay}">
            <toolkit:ListPicker.FullModeItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0 20" Orientation="Horizontal">
                        <Rectangle Width="42" Height="42" Fill="{Binding Brush}"
                               Stroke="{StaticResource PhoneForegroundBrush}"
                               HorizontalAlignment="Left"/>
                        <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextExtraLargeStyle}"
                                   HorizontalAlignment="Center" Margin="5,0"/>
                    </StackPanel>
                </DataTemplate>
            </toolkit:ListPicker.FullModeItemTemplate>
        </toolkit:ListPicker>

And the code to generate the collection of colors:

private IList<ColorItem> CreateBrushes()
    {
        var brushes = new List<ColorItem>
        {
            new ColorItem { Brush = new SolidColorBrush(Color.FromArgb(255,27,161,226)), Name = "blue" },    
            new ColorItem { Brush = new SolidColorBrush(Color.FromArgb(255,160,80,0)), Name = "brown" },     
            new ColorItem { Brush = new SolidColorBrush(Color.FromArgb(255, 51,153,51)), Name = "green" },   
            new ColorItem { Brush = new SolidColorBrush(Color.FromArgb(255,162,193,57)), Name = "lime" },   
            new ColorItem { Brush = new SolidColorBrush(Color.FromArgb(255,216,0,115)), Name = "magenta" }, 
            new ColorItem { Brush = new SolidColorBrush(Color.FromArgb(255,240,150,9)), Name = "mango" },   
            new ColorItem { Brush = new SolidColorBrush(Color.FromArgb(255,230,113,184)), Name = "pink" },  
            new ColorItem { Brush = new SolidColorBrush(Color.FromArgb(255,162,0,255)), Name = "purple" },  
            new ColorItem { Brush = new SolidColorBrush(Color.FromArgb(255,229,20,0)), Name = "red" },      
            new ColorItem { Brush = new SolidColorBrush(Color.FromArgb(255,0,171,169)), Name = "teal" },    
        };
        return brushes;
    }



public class ColorItem
{
    public SolidColorBrush Brush { get; set; }
    public string Name { get; set; }
}

You could also use reflection to get the collection of colors.

        Type t = typeof(Colors);
        var properties = t.GetProperties();
        List<ColorItem> items = new List<ColorItem>();

        for (int i = 0; i < properties.Length; i++)
        {
            var property = properties[i];
            items.Add(new ColorItem
            {
                Name = property.Name,
                Color = new SolidColorBrush((Color)property.GetValue(null, null))
            });
        }