ItemsControl with Grid as a template: add a control to the Grid

Question

Windows Phone 7.1 Project (XAML). I have a control with a grid as a template associated with a set of data items, everything works fine. However, I have to add one additional image to the grid that does not snap to the collection. Some header image.

I have this code:

<ItemsControl ...> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Grid ShowGridLines="True" x:Name="ShipsGrid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.1*"></ColumnDefinition> <ColumnDefinition Width="0.1*"></ColumnDefinition> <ColumnDefinition Width="0.1*"></ColumnDefinition> <ColumnDefinition Width="0.1*"></ColumnDefinition> <ColumnDefinition Width="0.1*"></ColumnDefinition> <ColumnDefinition Width="0.1*"></ColumnDefinition> <ColumnDefinition Width="0.1*"></ColumnDefinition> <ColumnDefinition Width="0.1*"></ColumnDefinition> <ColumnDefinition Width="0.1*"></ColumnDefinition> <ColumnDefinition Width="0.1*"></ColumnDefinition> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="0.1*"></RowDefinition> <RowDefinition Height="0.1*"></RowDefinition> <RowDefinition Height="0.1*"></RowDefinition> <RowDefinition Height="0.1*"></RowDefinition> <RowDefinition Height="0.1*"></RowDefinition> <RowDefinition Height="0.1*"></RowDefinition> <RowDefinition Height="0.1*"></RowDefinition> <RowDefinition Height="0.1*"></RowDefinition> <RowDefinition Height="0.1*"></RowDefinition> <RowDefinition Height="0.1*"></RowDefinition> </Grid.RowDefinitions> <!--<Image Source="/images/image.png" x:Name="SuperImage"/>--> </Grid> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Image x:Name="ElementImage" Source="{Binding ImageUri, Mode=OneWay}" /> </DataTemplate> </ItemsControl.ItemTemplate> </controls:ShipItemsGridControl> 

If I uncomment the image in ItemsPanelTemplate (x: Name SuperImage), I get the following error: Unable to explicitly change the Children Panel collection used as the ItemsPanel for ItemsControl. ItemsControl generates children for the panel.

I tried a few things, but I am not able to get it to work. Of course, I can add it to the itemtemplate and make it visible only in the first element, but it is very, very ugly.

Answer 1

How about simply stacking the Image on top of the ItemsControl , placing it in a parent panel that allows you to overlap controls like Grid or Canvas ?

 <Grid> <ItemsControl ... /> <Image Source="/images/image.png" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="5,5,0,0" /> </Grid> 

In the code sample, I just set marker 5 for the top and left margin fields, but you probably need to associate this a bit in order to associate the image with the first Grid cell.

Also, if you need to dynamically set the height / width of the image to make it the same size as the Grid cell, you can bind the Height and Width properties of the image to the ItemsControl ActualHeight / ActualWidth and use the converter to find out 1 / 10th of that size (for I have a MathConverter on my blog that will make this easy)

The only alternative I could think of would be to add it to the code after the elements were generated

 void MyItemsControl_Loaded(object sender, EventArgs e) { MyItemsControl.ItemContainerGenerator.StatusChanged += ItemContainerGenerator_StatusChanged; } void ItemContainerGenerator_StatusChanged(object sender, EventArgs e) { if (MyItemsControl.ItemContainerGenerator.Status == System.Windows.Controls.Primitives.GeneratorStatus.ContainersGenerated) { // Remove ItemContainerGenerator event MyItemsControl.ItemContainerGenerator.StatusChanged -= ItemContainerGenerator_StatusChanged; // Add Image to ItemsControl here } } 

This is not exactly ideal, and I would do my best to simply place the image on top of the ItemsControl element first.