如何将 XAML 中的 Canvas 元素绑定到代码隐藏中的 Canvas 属性？

Question

I'm using C# and Silverlight for Windows Phone.

I have a ListBox listBoxOfItemsA whose ItemsSource property is bound to an ObservableCollection observableCollectionOfItemsA. Each TypeA item in the ListBox is drawn using a ListBox.ItemTemplate, as shown in the XAML. Notice the Canvas element. Without it, everything was fine. Now, I have associated each instance of TypeA with 0 or more instances of TypeB. Each instance of TypeB defines a HighlightColor. I need some way for each TypeA item in the ListBox to show the HighlightColor's of all TypeB items associated with it. I was thinking of adding a thin Canvas element to each ListBox item, to divide it horizontally in 0 or more regions (0 would just leave the black background), and to paint in that Canvas as many rectangles as instances of TypeB are associated with that ListBox item (so that the total width of all those rectangles is constant).

Question: What do I have to write at the "????" position, so that I can bind the Canvas property (in TypeA) with the Canvas element in the ListBox.ItemTemplate?

Thank you.

Edit 20120406_0202 : Each TypeA instance may be mapped to more than one TypeB instances at the same time . For example: Each TypeA is a movement of money (from one account to another account, on a certain date, and belonging to a certain category, etc), and each TypeB is a set of conditions that each TypeA may or may not satisfy (for instance, its date is inside a certain range, its destination account is equal to a certain one, etc). For each TypeA, I want to show, at a glance, which sets of conditions it satisfies. Each set satisfied will show up with an additional piece of color.

public class TypeA
{
    public int Id { get; set; }
    public string Name { get; set; }
    public Canvas CanvasForItemsB {...}  // I would like something like this, here, and to bind it to the Canvas element in the XAML.
}

public class TypeB
{
    public SolidColorBrush HighlightColor {...}
}

ObservableCollection<TypeA> observableCollectionOfItemsA;
listBoxOfItemsA.ItemsSource  =observableCollectionOfItemsA;

<ListBox x:Name="listBoxOfItemsA">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Id, Mode=OneWay}" />
                <TextBlock Text="{Binding Name, Mode=OneWay}" />
                <Canvas ????="{Binding CanvasForItemsB, Mode=OneWay}" Width="480" Height="10" Background="Black" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 1

If you're trying to highlight the element(s) in your listbox, it'd probably be simpler to just place a Border around the StackPanel in your ItemTemplate and then set up a binding on the Border's background property. Then you wouldn't have to worry about storing a bunch of Canvas objects in memory or having to inject them into your ListBox.