如何在绑定的 ItemsControl 中更改 ZIndex？答案

【问题标题】：How to change ZIndex inside a bound ItemsControl?如何在绑定的 ItemsControl 中更改 ZIndex？
【发布时间】：2015-12-09 11:40:06
【问题描述】：

我只是像这样在 StackPanel 中创建了 3 个边框：

<StackPanel Orientation="Horizontal" >
        <Border Width="100" Height="30" Background="Red" BorderBrush="DarkRed" BorderThickness="4" Margin="0" >
            <Border.Style>
                <Style TargetType="Border">
                    <Setter Property="Panel.ZIndex" Value="0"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
        <Border Width="100" Height="30" Background="Blue" BorderBrush="DarkBlue" BorderThickness="4" Margin="-10,0,0,0" >
            <Border.Style>
                <Style TargetType="Border">
                    <Setter Property="Panel.ZIndex" Value="0"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
        <Border Width="100" Height="30" Background="Green" BorderBrush="DarkGreen" BorderThickness="4" Margin="-10,0,0,0" >
            <Border.Style>
                <Style TargetType="Border">
                    <Setter Property="Panel.ZIndex" Value="0"/>
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </StackPanel>

xaml 将布局 3 种不同颜色的边框：

当我将鼠标悬停在蓝色的上面时，它会在其他上面：

但是当我将所有这些移动到 ItemsControl 中时，蓝色边框上的鼠标不再位于其他边框的顶部，它只是保持原来的 ZIndex。

 <DataTemplate x:Key="BorderTemplate">
        <Border Width="100" Height="30" >
            <Border.Style>
                <Style TargetType="Border">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="BorderBrush" Value="DarkRed"/>
                    <Setter Property="BorderThickness" Value="4"/>
                    <Setter Property="Panel.ZIndex" Value="0"/>
                    <Setter Property="Margin" Value="0,0,0,0"/>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Type}" Value="2">
                            <Setter Property="Background" Value="Blue"/>
                            <Setter Property="BorderBrush" Value="DarkBlue"/>
                            <Setter Property="BorderThickness" Value="4"/>
                            <Setter Property="Panel.ZIndex" Value="0"/>
                            <Setter Property="Margin" Value="-10,0,0,0"/>
                        </DataTrigger>
                        <DataTrigger Binding="{Binding Type}" Value="3">
                            <Setter Property="Background" Value="Green"/>
                            <Setter Property="BorderBrush" Value="DarkGreen"/>
                            <Setter Property="BorderThickness" Value="4"/>
                            <Setter Property="Panel.ZIndex" Value="0"/>
                            <Setter Property="Margin" Value="-10,0,0,0"/>
                        </DataTrigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Panel.ZIndex" Value="1"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Border.Style>
        </Border>
    </DataTemplate>

<ItemsControl ItemsSource="{Binding Borders}" ItemTemplate="{StaticResource BorderTemplate}" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate >
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

那么为什么 Panel.ZIndex 在 StackPanel 中有效，但在 ItemsControl->StackPanel 中无效？

【问题讨论】：

ZIndex 旨在用于 Canvas。这么多代码，效果却不大。

标签： c# wpf xaml

【解决方案1】：

ZIndex 绝不限于画布，所以我们不要把这个想法强加给其他读者 Maximus。但是，由于您现在将您的东西作为ItemTemplate 加载，只使用ContentPresenter，所以您基本上是在与整个DOM 无关的面板中对您的对象进行沙箱处理。尝试将您的影响力放在ContentPresenter 作为您的容器的对象，而不是单独嵌套在其中的不相关的子对象。像这样的东西（当然，在你从每个边框上拉出相同的触发器之后）。

<ItemsControl.ItemContainerStyle>
   <Style TargetType="{x:Type ContentPresenter}">
      <Style.Triggers>
         <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Panel.ZIndex" Value="100" />
         </Trigger>
      </Style.Triggers>
   </Style>
</ItemsControl.ItemContainerStyle>

希望这会有所帮助。干杯。

【讨论】：