WPF ItemsControl中的重叠项目

Question

我遇到了WPF ItemsControl中使用的DataTemplates的问题。我希望能够“提前”＃34;列表中的任何项目，以便它们位于列表中的其他所有项目之上，但没有任何运气。

这是一个说明问题的简单示例。我希望看到的内容是在使用WrapPanel和一堆彩色块的示例中实现的：

第一个块与第二个块重叠。好。当我尝试使用ItemsControl做同样的事情时，第一个块落在下面第二个，尽管它的ZIndex：

如何使第一个块与ItemsControl中的所有其他块重叠？

根据我对ZIndex属性的理解，我假设我需要在Visual Tree中将ZIndex设置为高于DataTemplate中的Border，但不知道如何或在何处执行。< / p>

XAML：

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApplication1"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>
    <local:MainViewModel x:Key="mainViewModel" />
    <DataTemplate DataType="{x:Type local:FireFighter}">
        <Border Background="Pink" Padding="8" Panel.ZIndex="10" Margin="4">
            <Border.RenderTransform>
                <TranslateTransform X="18" Y="4"/>
            </Border.RenderTransform>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding FirstName}"/>
            </StackPanel>
        </Border>
    </DataTemplate>
    <DataTemplate DataType="{x:Type local:PoliceOfficer}">
        <Border Background="Orange" Padding="8" Margin="4">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding FirstName}"/>
            </StackPanel>
        </Border>
    </DataTemplate>
</Window.Resources>
<StackPanel>
    <ItemsControl DataContext="{StaticResource mainViewModel}" 
              ItemsSource="{Binding People}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
    <WrapPanel Margin="0,10,0,0">
        <Border Background="Blue" Width="30" Height="30" Margin="4" Panel.ZIndex="10">
            <Border.RenderTransform>
                <TranslateTransform X="18" Y="4"/>
            </Border.RenderTransform>
        </Border>
        <Border Background="Green" Width="30" Height="30" Margin="4"/>
        <Border Background="Green" Width="30" Height="30" Margin="4"/>
    </WrapPanel>
</StackPanel>

Answer 1

我找到了一个适用于我的情况的答案：

https://stackoverflow.com/a/9687758/4912801

事实证明，设置Panel.ZIndex属性并不起作用，因为WPF会为ItemsControl中的每个项插入一个ContentPresenter元素。在我的应用程序中，我试图获得鼠标悬停在其上的任何元素来到前面，因此将一个样式应用于ItemsControl中的所有ContentPresenters允许我在鼠标悬停时将它们带到前面。

Answer 2

我正在寻找类似的东西，这就是为我做的事情。使用UniformGrid作为ItemsPanelTemplate，然后将DataTemplate上的边距更改为您想要的重叠。

    <Grid Grid.Row="1"
           Grid.ColumnSpan="2">
        <Grid.Resources>
            <local:PointsToPathConverter x:Key="pointsToPathConverter"/>
        </Grid.Resources>
        <Image 
           Source="{Binding Bmp}"
           Stretch="Fill"
           VerticalAlignment="Stretch"
           HorizontalAlignment="Stretch" />
        <ItemsControl ItemsSource="{Binding AllTraceLines}" 
                      VerticalAlignment="Stretch" 
                      >
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="1"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Path Margin="0,-20,0,-20"  Data="{Binding Converter={StaticResource pointsToPathConverter}}" Stroke="Red" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Stretch="Fill"/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>