How to bind a Canvas element in XAML to a Canvas property in code behind?

Go To StackoverFlow.com

0

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>
2012-04-05 23:29
by Telaclavo


0

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.

2012-04-05 23:37
by KodeKreachor
KodeKreachor, each item in listBoxOfItemsA may be mapped to MORE THAN ONE color - Telaclavo 2012-04-05 23:40
Cool, so it seems like you'd just be able change the brush color value of the background color property on the view model of your list item and then the view would reflect that updated color - KodeKreachor 2012-04-05 23:46
I mean more than one color at the same time - Telaclavo 2012-04-06 00:02
Ads