Silverlight 中的矩形颜色数据绑定

Question

我希望列表选择器处于全屏模式。但这不是我的问题。我想要具有数据绑定的列表选择器，与 Windows Phone 设置页面中的“主题颜色”选择列表选择器完全相同。 listpicker 应该有一个带有颜色填充的正方形和颜色名称。 我知道如何使用绑定来获得颜色名称列表，但<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 ;

但是 Listpicker 中没有显示 Rectangle，也没有显示颜色。 我想知道我做错了什么，以及如何正确地做。

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，正如here 所说。

您可以扩展您的标记：

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