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我認爲更好。