如何创建多选颜色列表

时间:2012-05-31 01:10:18

标签: c# windows-phone-7 xaml

我一直在尝试使用WP7.1中支持的颜色填充多选列表,但是我遇到了在代码后面生成这些颜色列表的问题。到目前为止,我的解决方案如下:

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>

我正在尝试数据绑定到矩形和文本块属性,以便矩形将填充solidcolorbrush值,文本块将包含相应solidcolorbrush的名称。这是我被卡住的地方,因为我无法弄清楚如何实现这一目标?具体来说,我不是要调用强调色,而是所有可用的颜色选项(例如,在设置矩形明显的填充时可以看到有大量选项)。

1 个答案:

答案 0 :(得分:1)

您想要MultiSelectList还是ListPicker?您希望用户能够选择多种颜色吗?以下是使用ListPicker的示例。要获得颜色,您必须自己创建颜色。以下是使用强调色的示例

ListPicker的xaml:

        <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>

生成颜色集合的代码:

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; }
}

您还可以使用反射来获取颜色集合。

        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))
            });
        }