WPF ItemsControl 中的重叠项

Question

我在使用 WPF ItemsControl 中的 DataTemplates 时遇到问题。我希望能够 "bring forward" 列表中的任何项目，以便它们位于列表中其他所有项目之上，但没有任何运气。

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

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

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

根据我对 ZIndex 属性的理解，我假设我需要在可视化树中将 ZIndex 设置得比 DataTemplate 内部的 Border 更高，但不知道如何或在哪里设置这样做。

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

我在这里找到了适合我的情况的答案：

事实证明，设置 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>

WPF ItemsControl 中的重叠项

Overlapping Items in WPF ItemsControl

c#

wpf

user-interface

xaml

datatemplate