以 Grid 为模板的 ItemsControl:向 Grid 添加控件 [英] ItemsControl with Grid as template : add control to Grid

问题描述

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

Windows Phone 7.1 project (XAML). I have a itemscontrol with a grid as template, bound to collection of data-elements, everything works okay. However, I have to add one extra Image to the Grid, which does not bind to the collection. Some kind of header 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) 中的图像，则会收到以下错误:无法显式修改用作 ItemsControl 的 ItemsPanel 的 Panel 的 Children 集合.ItemsControl 为 Panel 生成子元素.

If I uncomment the Image in ItemsPanelTemplate (x:Name SuperImage), I get the following error: Cannot explicitly modify Children collection of Panel used as ItemsPanel for ItemsControl. ItemsControl generates child elements for Panel.

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

I have tried several things, but I can't manage to get it working. Of course I can add it to the itemtemplate and only make it visible in first item, but that is very, very ugly.

推荐答案

将 Image 堆叠在 ItemsControl 之上会怎样呢?允许重叠控件，例如 Grid 或 Canvas?

What about just stacking the Image on top of your ItemsControl by placing both in a parent panel that allows overlapping controls, such as a Grid or a Canvas?

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

在代码示例中，我只是为顶部和左侧边距设置了 5 边距，但您可能需要对此进行一些处理以将图像与您的第一个网格单元格对齐.

In the code sample I just set a margin of 5 for both the Top and the Left margins, but you will probably need to mess with that a bit to line the Image up with your first Grid cell.

另外，如果您需要动态设置图像的高度/宽度以使其与您的 Grid 单元格大小相同，您可以绑定 Height 和 Width 属性将图像转换为 ItemsControl 的 ActualHeight/ActualWidth 并使用转换器计算出该尺寸的 1/10(我有一个 我博客上的 MathConverter 这将使这变得简单)

Also if you need to dynamically set the height/width of the image to make it the same size as your Grid cell, you can bind the Height and Width properties of the Image to the ItemsControl's ActualHeight/ActualWidth and use a Converter to figure out 1/10th of that size (I have a MathConverter on my blog which would make this easy)

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

The only other alternative I could think of would be to add it in the code-behind after the items have been 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
    }
}

不过这并不是很理想，我会尽我最大的努力简单地先将 Image 放在 ItemsControl 之上.

This isn't really ideal though, and I would do my best to simply place the Image on top of the ItemsControl first.

这篇关于以 Grid 为模板的 ItemsControl:向 Grid 添加控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！