c#XAML ListBox中的多重绑定

时间:2014-09-29 10:50:12

标签: c# xaml binding windows-phone-8.1

我仍然在Windows手机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

1 个答案:

答案 0 :(得分: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>
        ....