Как изменить ZIndex внутри связанного элемента ItemsControl?

Question

я просто создал 3 границы в StackPanel, как это:

<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?

Answer 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> 

Надеюсь, что это поможет. Приветствия.