WPF ItemsControl 中的重叠项答案

【问题标题】：Overlapping Items in WPF ItemsControlWPF ItemsControl 中的重叠项
【发布时间】：2017-08-29 02:13:44
【问题描述】：

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

这是一个说明问题的简单示例。我想要看到的是在示例中使用 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>

【问题讨论】：

标签： c# wpf xaml user-interface datatemplate

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：