将颜色绑定到ListPicker

Question

我正在尝试创建一个包含级别列表的ListPicker控件，每个级别旁边都有一个彩色方块。这就是我得到的：

<toolkit:ListPicker Grid.Row="1"
                    x:Name="LevelList"
                    Header="Level"
                    ItemCountThreshold="0"
                    FontFamily="Segoe WP Light">
  <toolkit:ListPicker.ItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal">
        <Rectangle Fill="{Binding}"
                   Width="43"
                   Height="43" />
        <TextBlock Text="{Binding}"
                   Margin="12 0 0 0" />
      </StackPanel>
    </DataTemplate>
  </toolkit:ListPicker.ItemTemplate>
  <toolkit:ListPicker.FullModeItemTemplate>
    <DataTemplate>
      <StackPanel Orientation="Horizontal"
                  Margin="16 21 0 20">
        <Rectangle Fill="{Binding}"
                   Width="43"
                   Height="43" />
        <TextBlock Text="{Binding}"
                   Margin="16 0 0 0"
                   FontSize="43"
                   FontFamily="{StaticResource PhoneFontFamilyLight}" />
      </StackPanel>
    </DataTemplate>
  </toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>

在c#部分，我有

    String[] Level= { "E1", "E2", "E3", "E4", "E5"};
    String[] colors = { "#FFE5AD1B", "#FF0050EF", "#FFE51400", "#FF008A00", "#FFAA00FF" };

    public TolonPk()
    {
        InitializeComponent(); 
        this.listaNivel.ItemsSource = Level;
        this.listaNivel.ItemsSource = colors;
    }

我的问题是，我不知道如何将Textblock严格绑定到级别字符串数组，并将矩形填充绑定到颜色……我可能错过了一些简单的东西，但我就是不能理解...

Answer 1

如果toolkit:ListPicker像其他ItemsControl子类一样使用它的ItemsSource，那么您需要将Level string和Color string放在同一个列表中。

创建一个小的struct/class，其中包含一个用于level的字符串和一个用于颜色的字符串。

public struct LevelAndColor
{
    public String Level { get; set; }
    public String Color { get; set; }
}

创建一些IEnumerable (列表、ObservableCollection等)并用您的色阶对实例填充它。

在绑定中，像这样绑定：

<StackPanel Orientation="Horizontal">
    <Rectangle Fill="{Binding Color}" Width="43" Height="43"/>
    <TextBlock Text="{Binding Level}" Margin="12 0 0 0"/>
</StackPanel>