4

Windows Phone 7.1 プロジェクト (XAML)。データ要素のコレクションにバインドされたテンプレートとしてグリッドを持つアイテム コントロールがあり、すべて正常に動作します。ただし、コレクションにバインドされない 1 つの余分なイメージをグリッドに追加する必要があります。ある種のヘッダー画像。

私はこのコードを持っています:

<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 に追加して最初の項目だけに表示することもできますが、それは非常に見苦しいものです。

4

1 に答える 1

3

やなどのコントロールを重ねることができる親パネルに両方を配置して、Imageを上に積み重ねるのはどうですか?ItemsControlGridCanvas

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

コード サンプルでは、​​上と左の両方の余白に 5 の余白を設定しましたが、最初のグリッド セルに画像を合わせるには、おそらく少し手を加える必要があります。

また、画像の高さ/幅を動的に設定してグリッド セルと同じサイズにする必要がある場合は、画像のHeightおよびWidthプロパティを ItemsControl の ActualHeight/ActualWidth にバインドし、コンバーターを使用して 1/10 を計算できます。そのサイズの (私はこれを簡単にする私のブログに MathConverterを持っています)

私が考えることができる唯一の他の選択肢は、アイテムが生成された後にコードビハインドに追加することです

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 の上に Image を単純に配置するよう最善を尽くします。

于 2013-03-13T14:42:47.973 に答える