Question

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中，只在第一项中显示它，但这非常非常难看。

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单元格的大小相同，则可以将Image的Height和Width属性绑定到ItemsControl的ActualHeight / ActualWidth并使用转换器计算出该大小的十分之一（我有一个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
    }
}

虽然这不是很理想，但我会尽量将图像放在ItemsControl的顶部。

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

1 个答案: