Silverlight中的矩形颜色数据绑定

Question

我希望列表选择器处于全屏模式。 但这不是我的问题。 我希望具有数据绑定的listpicker，与Windows Phone的“设置”页面中的“主题颜色”选择列表选择器完全相似。 列表选择器应具有一个带有颜色填充的正方形和颜色名称。 我知道如何使用绑定来获取颜色名称列表，但是<DataTemplate>的<Rectangle>标签不起作用。

这是Listpicker的XAML

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

后面的代码如下所示：

   public class PickerObject
    {


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



    }

在我的MainPage类中

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

在我的构造函数中，我有：

        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 ;

但是列表选择器中没有显示矩形，也没有显示颜色。 我想知道我在做错什么，以及如何正确做。

Answer 1

你的意思是这行不通吗？

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

或者您还有其他标记？

更新 ：现在是一个解决方案

不只是将矩形的Fill属性绑定到Color类型。
因为Fill属性的类型为Brush正如这里所说的。

您可以扩展标记：

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

或者，您可以实现“颜色到画笔”转换器。 像这样：

在您的隐藏代码中包括以下内容：

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

然后在您的XAML ，在此代码后面包含名称空间。 就像是：

xmlns:local="clr-namespace:YourNamespaceForConverterClass"

还应在您的标记中包含本地资源字典，以引用您的Converter类并命名为x:Key属性：

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

最后，您可以在您的Rectangle使用带有x:Key名称的转换器：

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

如果您打算经常使用转换，则将Converter类放在应用程序资源字典（ App.xaml文件）中可以节省您的时间，避免重复扩展标记。

但是，如果您直接使用“ Brush而不是“ Color更好。