Xaml code explanation

Question

I am working on c# xaml using silverlight and i am bit confused about the hierarchy of this xaml code:

<UserControl.Resources>
    <this:MyValueConverter x:Key="TabConverter"/>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="Green">
    <ItemsControl ItemsSource="{Binding Path=TabList, Mode=OneWay}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas></Canvas>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Width="150" Background="red" Height="100"  Canvas.Left="{Binding TabList, Mode=TwoWay, Converter={StaticResource TabConverter}}"  Canvas.Top="100" />          
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

When i run it gives a big green color window(sorry if technical names are not correct), whereas it should also show red color somewhere in same window as it has Border Width="150" Background="red" .Could some one please explain me what this code is doing ?

Answer 1

ItemsControl really just binds to a list and applies a datatemplate (border with background red) for each item in the list. As for the reason you're only seeing green, well there's probably nothing in the TabList property on your viewmodel. That way, nothing in the items template renders, and all you see is green.

You'll need to make sure that TabList is bound correctly (it exists on your datacontext, whether that's a view model or not) and that it has items in it.

Here's a simpler version of what you may want to accomplish:

<Grid x:Name="LayoutRoot" Background="Green">
    <ItemsControl ItemsSource="{Binding Path=TabList, Mode=OneWay}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Width="150" Background="red" Height="100" />          
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>