wpf - 以 Grid 为模板的 ItemsControl : add control to Grid

Question

Windows Phone 7.1 项目 (XAML)。
我有一个以网格为模板的 itemscontrol，绑定(bind)到数据元素的集合，一切正常。
但是，我必须向网格中添加一个额外的图像，它不会绑定(bind)到集合。某种标题图像。

我有这个代码:

<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) 中的图像，我会收到以下错误:无法显式修改用作 ItemsControl 的 ItemsPanel 的 Panel 的 Children 集合。 ItemsControl 为 Panel 生成子元素。

我已经尝试了几件事，但我无法让它工作。当然，我可以将它添加到 itemtemplate 中，并且只让它在第一个 item 中可见，但这非常非常难看。

Answer 1

只是堆叠 Image 怎么样？在您的 ItemsControl 上通过将两者放在允许重叠控件的父面板中，例如 Grid或 Canvas ?

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

在代码示例中，我只是为顶部和左侧边距设置了 5 的边距，但您可能需要稍微弄乱一下，以便将图像与您的第一个 Grid 单元格对齐。

此外，如果您需要动态设置图像的高度/宽度以使其与网格单元格大小相同，您可以绑定(bind) Height和 Width将 Image 的属性转换为 ItemsControl 的 ActualHeight/ActualWidth 并使用转换器计算出该大小的 1/10(我有一个 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 的顶部。