wpf – 使用Grid作为模板的ItemsControl：将控件添加到Grid

Windows Phone 7.1项目(XAML).
我有一个带有网格作为模板的itemscontrol,绑定到数据元素的集合,一切正常.
但是,我必须向Grid添加一个额外的Image,它不会绑定到集合.某种标题图片.

我有这个代码：

<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>

如果我取消注释ItemsPanelTemplate(x：Name SuperImage)中的Image,我会收到以下错误：无法显式修改用作ItemsControl的ItemsPanel的Panel的Children集合. ItemsControl为Panel生成子元素.

我尝试了几件事,但我无法让它发挥作用.当然我可以将它添加到itemtemplate中,只在第一项中显示它,但这非常非常难看.

解决方法

通过将两者放在允许重叠控件(例如网格或画布)的父面板中,将图像堆叠在ItemsControl的顶部怎么样？

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

在代码示例中,我只为顶部和左侧边距设置了5的边距,但是您可能需要将这一点弄乱,以便将Image与第一个Grid单元格对齐.

此外,如果您需要动态设置图像的高度/宽度以使其与网格单元格大小相同,则可以将图像的高度和宽度属性绑定到ItemsControl的ActualHeight / ActualWidth并使用转换器来计算出1这个尺寸的十分之一(我有一个MathConverter on my blog,这将使这很容易)

我能想到的唯一另一种选择是在项目生成后将其添加到代码隐藏中

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
    }
}

这不是很理想,我会尽量简单地将Image放在ItemsControl的顶部.