Silverlight中的矩形颜色数据绑定

Question

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

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

代码的XAML的背后是这样的：

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中没有显示矩形，并且没有显示颜色。 我想知道我做错了什么，以及如何正确地做到这一点。

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" 

还包括参照您的转换类的标记本地资源字典，并命名为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}}"/> 

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

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