ListBox中的C＃XAML多重綁定

Question

我仍然很難正確理解Windows Phone 8.1上XAML中的綁定，而MSDN上的論文似乎並沒有真正幫助我。

我有兩個結構。 一種是填充已經很好用的ListBox內的數據，另一種是應該設置顏色的，我對此並不十分了解。

到目前為止，我的代碼如下所示：

<ListBox x:Name="ListBox1" Margin="5" Width="Auto" Height="300" HorizontalAlignment="Left" ItemsSource="{Binding}" >
  <ListBox.ItemTemplate>
     <DataTemplate>
        <Border x:Name="BorderTap" BorderThickness="2" CornerRadius="15" Margin="0" Height="80" Width="Auto" VerticalAlignment="Top">
          <Border.BorderBrush>
             <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientStop Color="{Binding borderStart}" Offset="0"/>
              <GradientStop Color="{Binding borderStart}" Offset="0.7"/>
              <GradientStop Color="{Binding borderEnd}" Offset="1"/>
             </LinearGradientBrush>
           </Border.BorderBrush>
           <Border.Background>
              <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Color="{Binding boxStart}" Offset="0"/>
                  <GradientStop Color="{Binding boxStart}" Offset="0.7"/>
                  <GradientStop Color="{Binding boxEnd}" Offset="1"/>
              </LinearGradientBrush>
            </Border.Background>
            <Grid>
               <Image HorizontalAlignment="Left" Margin="2,0,0,0" Height="120" Width="120" VerticalAlignment="Top" Source="Assets/due.png" Stretch="Fill" Grid.Row="1" Opacity="0.4" />
            <Grid>
               <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0,0,0,0" Grid.RowSpan="2">
               <StackPanel Width="30" HorizontalAlignment="Left" VerticalAlignment="Top" />
               <StackPanel HorizontalAlignment="Left" Height="Auto" Margin="0,0,0,0" VerticalAlignment="Center" Width="Auto">
                  <Image HorizontalAlignment="Left" Height="51" Margin="0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
               </StackPanel>
               <StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
                <StackPanel HorizontalAlignment="Left" Height="80" Width="Auto" Margin="0" Orientation="Vertical">
                   <TextBlock HorizontalAlignment="Left" Height="Auto" Margin="0,20,0,0" TextWrapping="Wrap" Text="{Binding Name}" Width="Auto" VerticalAlignment="Top" FontSize="19" Foreground="Black" FontWeight="Bold"/>
                    <TextBlock HorizontalAlignment="Left" Height="Auto" Margin="0" TextWrapping="Wrap" Text="{Binding URL}" Width="Auto" VerticalAlignment="Top" Foreground="#FF0097FF"/>
                 </StackPanel>
               </StackPanel>
              </Grid>
            </Grid>
         </Border>
      </DataTemplate>
    </ListBox.ItemTemplate>
 </ListBox>

和這樣的structures ：

public class ComboboxItem
{
  public string Text { get; set; }
  public object Value { get; set; }

  public override string ToString()
  {
    return Text;
  }
}

public class ColorContainer
{
  public string boxStart { get; set; }
  public string boxEnd { get; set; }
  public string borderStart { get; set; }
  public string borderEnd { get; set; }
  public string firstEntry { get; set; }
  public string secondEntry { get; set; }
}

如何設置顏色？ 還是在哪里定義它們並更新它們？ 第二個問題：在那之后，我該如何選擇一個值，然后從第三個結構中添加另一個信息？

非常感謝advande

Answer 1

GradientStop.Color的類型是Color ，因此您需要將ColorContainer.boxStart定義為Color，或者需要Converter才能將字符串轉換為Color，但為了簡單起見，我將不使用Converter，因為這會增加代碼的復雜性。

public class ColorContainer
{
    public Color boxStart { get; set; }
    public Color boxEnd { get; set; }
}

然后將ColorContainer屬性添加到ComboboxItem 。

public class ComboboxItem
{
    public string Name { get; set; }
    public object URL { get; set; }
    public ColorContainer CContainer { get; set; }

    public override string ToString()
    {
        return Name;
    }
}

我定義了一個MyDataContext類，其中包含要綁定的ComboboxItem的列表

public class MyDataContext
{
    public MyDataContext()
    {
        ColorContainer _cContainer = new ColorContainer(); ;
        _cContainer.boxStart = Colors.Orange;
        _cContainer.boxEnd = Colors.Green;

        //note that all items use this _cContainer instance
        _items = new ObservableCollection<ComboboxItem>();
        _items.Add(new ComboboxItem() { Name = "name1", URL = "url1", CContainer = _cContainer });
        _items.Add(new ComboboxItem() { Name = "name2", URL = "url2", CContainer = _cContainer });
    }

    ObservableCollection<ComboboxItem> _items;
    public ObservableCollection<ComboboxItem> Items
    {
        get { return _items; }
    }
}

最后，綁定代碼：

<Border.Background>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="{Binding CContainer.boxStart}" Offset="0"/>
        <GradientStop  Color="{Binding CContainer.boxStart}" Offset="0.7"/>
        <GradientStop  Color="{Binding CContainer.boxend}" Offset="1.0"/>
    </LinearGradientBrush>
</Border.Background>    

就像您已經做過的那樣，不要忘記設置頁面的DataContext。

// Constructor
public MainPage()
{
    InitializeComponent();

    this.DataContext = new MyDataContext();
    // Sample code to localize the ApplicationBar
    //BuildLocalizedApplicationBar();
}

更新

要解決您評論中關於listboxitem寬度的問題，請添加此內容

<ListBox x:Name="ListBox1" Margin="5" Height="300" HorizontalAlignment="Stretch" ItemsSource="{Binding Items}" >
    <!--add this-->
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        </Style>
    </ListBox.ItemContainerStyle>
    <!--end-->
    <ListBox.ItemTemplate>
        <DataTemplate>
        ....