0

ユーザーがキャンバス上の画像およびテキスト要素を追加、操作、および削除できるようにする、Silverlightの画像エディターがあります。新しい要素を追加すると、奇妙な動作をするように見えることがあります。たとえば、既存の要素の後ろに配置されます。以下は、画像要素を追加するためのコードと、それが呼び出すorderelementsメソッドです。私はこのコードを他の誰かから継承したので、時々彼の意図を理解することができません。ただし、コードは想定どおりに機能していないようです。

追加する要素にZ-Index値を割り当てるためのより良い方法を誰かが提案できますか？

ワークスペースキャンバスのXAML-

<Canvas x:Name="pnlCanvas" HorizontalAlignment="Center" VerticalAlignment="Center" Height="{Binding Path=CanvasHeight, Mode=OneWay,UpdateSourceTrigger=Default}"
                        Width="{Binding Path=CanvasWidth, Mode=OneWay, UpdateSourceTrigger=Default}" >
                    <ItemsControl ItemsSource="{Binding Path=Elements, Mode=OneWay}"  >
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <Canvas Background="{Binding Path=CanvasBackground, Mode=OneWay}"
                                    Height="{Binding Path=CanvasHeight, Mode=OneWay,UpdateSourceTrigger=Default}"
                                    Width="{Binding Path=CanvasWidth, Mode=OneWay, UpdateSourceTrigger=Default}" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ItemsControl>
                </Canvas>

画像要素の追加-

private void AddImageElement(object param)
    {
        bool? gotImage;
        string fileName;
        BitmapImage imageSource = GetImageFromLocalMachine(out gotImage, out fileName);
        OrderElements();

        if (gotImage == true)
        {
            Image image = new Image();
            image.Name = fileName;
            image.Source = imageSource;
            image.Height = imageSource.PixelHeight;
            image.Width = imageSource.PixelWidth;
            image.MaxHeight = imageSource.PixelHeight;
            image.MaxWidth = imageSource.PixelWidth;
            image.Cursor = Cursors.Hand;
            image.Tag = null;



            AddDraggingBehavior(image);
            image.MouseLeftButtonUp += element_MouseLeftButtonUp;

            this.Elements.Add(image);
            numberOfElements++;

            this.SelectedElement = image;
            this.SelectedImageElement = image;
        }
    }

注文要素-

private void OrderElements()
    {
        var elList = (from element in this.Elements
                      orderby element.GetValue(Canvas.ZIndexProperty)
                      select element).ToList<FrameworkElement>();

        for (int i = 0; i < elList.Count; i++)
        {
            FrameworkElement fe = elList[i];
            fe.SetValue(Canvas.ZIndexProperty, i);

        }

        this.Elements = new ObservableCollection<FrameworkElement>(elList);

    }

これを整理したら、Photoshopなどのレイヤーコンテナを含めて、要素を並べ替えることができます。うまくいけば、誰かが私をその方向に動かすのを手伝ってくれるでしょう。基本的に、Z-Indexが正しく設定されているとは思わないので、正しく設定するにはどうすればよいですか。

4

1 に答える 1

2

ItemsControlは各要素をタグでラップするため、ZIndexは要素に設定されていますが、上が重要である<ContentPresenter>ため適用されません。ZIndexContentPresenter

実際にレンダリングされるものは次のようになります。

<Canvas>
    <ContentPresenter>
        <Image Canvas.ZIndex="0" />
    </ContentPresenter>
    <ContentPresenter>
        <Image Canvas.ZIndex="1" />
    </ContentPresenter>
    ...
</Canvas>

この問題を修正するには、UI要素の代わりに適用されるようにを設定ZIndexしますItemContainerStyleContentPresenter

<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Canvas.ZIndex" Value="{Binding Canvas.ZIndex}" />
    </Style>
</ItemsControl.ItemContainerStyle>

詳細については、WPFのItemsControlに関するブログ投稿の下部を参照してください。

編集：

ItemsContainerStyleどうやらSilverlightにはのがありませんItemsControl。

ContentPresenterその場合は、のCanvas.ZIndex値を設定する暗黙のスタイルを設定するだけです。ItemsControl.Resources

<ItemsControl.Resources>
    <Style TargetType="ContentPresenter">
        <Setter Property="Canvas.ZIndex" Value="{Binding Canvas.ZIndex}" />
    </Style>
</ItemsControl.Resources>
于 2012-09-20T15:42:28.620 に答える