c# - 更改 itemscontrol windows phone 中元素的 zindex

Question

这个问题有很多不同的答案，但还没有找到一个适用于 Windows Phone 的问题。
所以这里是:

我有一个显示用户控件的项目控件。
我像这样将 ObservableCollection 绑定(bind)到此 ItemsControl:

<Canvas Name="CanvasGrid" Grid.Column="1" Background="Transparent" Canvas.ZIndex="5">
    <ItemsControl ItemsSource="{Binding InGame}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Canvas>
                    <View:SInGame/>
                </Canvas>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Canvas>

当在 Itemscontrol 中添加一个元素时，该元素会被赋予一个独立于我赋予元素的 zindex 以及显示的用户控件。我想要做的是有按钮，我可以在 z 方向上下移动所选元素。

查看 SInGame

为了从以下 View 正确绑定(bind)位置，需要 itemscontrol 中的 Canvas:

<UserControl x:Class="MVVMTestApp.View.SInGame"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP8"
xmlns:View="clr-namespace:MVVMTestApp.View"
mc:Ignorable="d"
Canvas.Left="{Binding pos.x}" Canvas.Top="{Binding pos.y}">

<Path >
    <.....
    ....../>
</Path>
</UserControl>

然后可以争辩说， View 应该由具有位置绑定(bind)的 Canvas 组成。但这仍然会留下 zindex 的问题。

如评论中所述。 ItemsControl 看不到外部 Canvas ，因此无法使用 zindex 到达它。那么如何设置 zindex 呢？还是无法使用 ItemsControl 元素？

Answer 1

ItemsControl 获取每个项目，将其包装在容器 (ContentPresenter) 中，并将其添加到项目面板(默认情况下为 StackPanel)。因此，示意性地，您最终将得到这棵树:

<!-- the items panel (StackPanel by default) -->
<StackPanel>
    <!-- the first item wrapper -->
    <ContentPresenter>
        <!-- your item template -->
        <Canvas>
            <View:SInGame/>
        </Canvas>
    </ContentPresenter>

    <!-- more items ... -->
</StackPanel>

你会想做两件事:

• 设置 ItemsControl.ItemsPanel 为项目提供一个共享的 Canvas 容器。
• 确保您想要的 ZIndex 已应用于 ContentPresenter 包装器。

这两点会给你一个这样的模式，它应该允许你从前到后定位项目:

<!-- the items panel (change to a Canvas) -->
<Canvas>
    <!-- the first item wrapper (need to set Canvas.ZIndex to position) -->
    <ContentPresenter Canvas.ZIndex="1">
        <!-- your item template -->
        <Canvas>
            <View:SInGame/>
        </Canvas>
    </ContentPresenter>

    <!-- more items ... -->
</Canvas>

要实现第二点，我相信您需要子类化 ItemsControl，并覆盖 PrepareContainerForItemOverride。例如，以下修改每个项目容器，将其 ZIndex 属性绑定(bind)到项目本身的 ZIndex:

public class CanvasItemsControl : ItemsControl
{
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        var contentPresenter = (ContentPresenter)element;
        var binding = new Binding("ZIndex") { Source = contentPresenter.Content };
        contentPresenter.SetBinding(Canvas.ZIndexProperty, binding);
    }
}

现在您只需将 View:SInGame 项上的 Canvas.ZIndex 绑定(bind)到基础模型属性(“pos.x”？)。

综合起来:

<local:CanvasItemsControl ItemsSource="{Binding InGame}">
    <local:CanvasItemsControl.ItemTemplate>
        <DataTemplate>
            <Canvas Canvas.ZIndex="{Binding pos.x}" >
                <View:SInGame />
            </Canvas>
        </DataTemplate>
    </local:CanvasItemsControl.ItemTemplate>
    <local:CanvasItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    <local:CanvasItemsControl.ItemsPanel>
</local:CanvasItemsControl>

这样，每个 SInGame 实例都有一个 Z-index，并且每个实例都应该相对于其他实例定位。您可以通过修改“InGame”中每个 View 模型项目的“MyZIndex”属性来前后重新定位项目。

---

编辑

有一个比上述方法更简单的替代方法，它可能适合您。这种方法会给你一个像这样的扁平树:

<!-- the items panel (change to a Canvas) -->
<Canvas>
    <!-- the items -->
    <View:SInGame/>
    <View:SInGame/>
</Canvas>

为此，重写 GetContainerForItemOverride() 以返回 SInGame 对象:

public class CanvasItemsControl : ItemsControl
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        return new SInGame();
    }

    // Any setup of the `SInGame` items should be done here
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        base.PrepareContainerForItemOverride(element, item);
        var container = (SInGame)element;
    }
}

这允许您在没有任何 ItemTemplate 的情况下定义 ItemsControl:

<local:CanvasItemsControl ItemsSource="{Binding InGame}">
    <local:CanvasItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    <local:CanvasItemsControl.ItemsPanel>
</local:CanvasItemsControl>