QA@IT

xamlでレイヤーになっている要素をリストのように表示したい。

6942 PV

お世話になります。

イメージの上にinkCanvasを重ねて絵の上にペイントできるようなアプリを作りっています。
複数枚配置したいので、DataGridのDataTemplateを使って、同じようにしてみたところ
エラーが出てしまいます。⇒ プロパティ"visual Treeは一回しか設定できません。"
回避策として Docpanel or StaticPanelを用いて、コントロールを二つ置きました
ただ、実行したところpanelの仕様なのか、横にならんでしまいました。。

1枚の場合と同じようなことが複数の場合でもできるようにするにはどのようにしたらよいのでしょうか?

■ 1枚の場合

<Image Width="200">
            <Image.Source>
                <BitmapImage DecodePixelWidth="200"
                    UriSource="./img/1920-1200.png"/>
            </Image.Source>
        </Image>
        <!-- インクのキャンバス -->
        <InkCanvas x:Name="inkCanvas" Grid.Column="0" Gesture="inkCanvas_Gesture" Margin="108,82,74,117" Background="Transparent"/>

■ 複数枚

<DataGrid 
       ItemsSource="{Binding DisplayData}" Width="424">
            <DataGrid.Columns>
                <DataGridTemplateColumn>
                    <!--  表示時のセル テンプレートの指定  -->
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Background="LightBlue" >
                                <Image x:Name="i2" />
                                <Image x:Name="i1" Width="200">
                                    <Image.Source>
                                        <BitmapImage DecodePixelWidth="200" UriSource="C:\1.jpg"/>
                                    </Image.Source>
                                </Image>
                                <InkCanvas x:Name="inkCanvas" Background="Transparent" />
                                <!--  <TextBox Text="{Binding Str}"></TextBox>  -->
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>

ご教授お願いいたします。

  • 他の質問でも指摘しましたが、解決マークを設定してください(+1ではなくて)。修正の提案も処理してください。 -

回答

重ねたいのかリストのようにしたいのかよくわかりませんが、

重ねたいのであれば

    <Grid>
        <Image Width="200">
            <Image.Source>
                <BitmapImage DecodePixelWidth="200" UriSource="./img/1920-1200.png"/>
            </Image.Source>
        </Image>
        <InkCanvas x:Name="inkCanvas" Grid.Column="0" Margin="0" Background="Transparent" />
        <InkCanvas x:Name="inkCanvas2" Grid.Column="0" Margin="0" Background="Transparent" />
    </Grid>

リストのようにしたいのであれば

    <Grid>
        <StackPanel Width="200">
            <Image Width="200" Margin="0">
                <Image.Source>
                    <BitmapImage DecodePixelWidth="200" UriSource="./img/1920-1200.png"/>
                </Image.Source>
            </Image>
            <InkCanvas Margin="0" Width="200" Height="100" x:Name="inkCanvas" Background="Transparent" />
            <InkCanvas Margin="0" Width="200" Height="100" x:Name="inkCanvas2" Background="Transparent" />
        </StackPanel>
    </Grid>

というようなのではだめなんでしょうか?


追記

<DataGrid ItemsSource="{Binding DisplayData}" Width="424">
  <DataGrid.Columns>
    <DataGridTemplateColumn>
      <!--  表示時のセル テンプレートの指定  -->
      <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
          <Grid Background="LightBlue" >
            <Image x:Name="i2" />
            <Image x:Name="i1" Width="200">
              <Image.Source>
                <BitmapImage DecodePixelWidth="200" UriSource="C:\1.jpg"/>
              </Image.Source>

            </Image>
            <InkCanvas x:Name="inkCanvas" Background="Transparent" />

            <!--  <TextBox Text="{Binding Str}"></TextBox>  -->

          </Grid>
        </DataTemplate>
      </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
  </DataGrid.Columns>
</DataGrid>

提示した重ねて表示の例と同様に Gridに変更して上記の様にするのではだめでしょうか?

編集 履歴 (2)
  • flied_onionさん
    レスありがとうございます。

    なるほど。。。うまくいきました。
    大変助かりました。
    -

flied_onionさん
レスありがとうございます。

DataGridimageSorceにイメージのリストをバインドしています。
ObservableCollection<ImageModel> たとえば2個のイメージListとした場合
そこで以下のように表示したいのですが、
読み込む画像が任意なので、リストは固定でなく動的を想定しています。。

=がDataGrid
+がinkCanvas
*がimage
■理想

============ Row 1
 +++++++++
 +*******+
 +*     *+
 +*     *+
 +*******+
 +++++++++
============ Row 2
 +++++++++
 +*******+
 +*     *+
 +*     *+
 +*******+
 +++++++++
============

以下同じ

下記のようになってしまうのです・・
■現実

============
        +++++++++
 *******+       +
 *     *+       +
 *     *+       +
 *******+       +
        +++++++++
============
        +++++++++
 *******+       +
 *     *+       +
 *     *+       +
 *******+       +
        +++++++++
============

panelがよくないかもしれないのですが、パネルがないとうまく配置できず
どのようにしたら、理想のようにできるのでしょうか?

編集 履歴 (1)
  • 質問のxamlにimageは二つありますがi1とi2はそれぞれなんですか?図の上でなんですか?

    バインドしている部分のコードはありますか?(ImageModelってクラスありますっけ?)または参考にしたサイトでも構いません。
    -
  • 回答に追記しました。修正の提案も投げてますので取り込むか拒否するかして下さい。 -
ウォッチ

この質問への回答やコメントをメールでお知らせします。