Modify ZIndex of an Items in an ItemsControl

Nicolas picture Nicolas · Mar 13, 2012 · Viewed 7.6k times · Source

Here is the code of my ItemsControl that zooms on items when the mouse goes over.
I don't manage to increase the ZIndex of the current zoomed item to put it over the others.

<ItemsControl ItemsSource="{Binding Path=Value}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=Name}"
                       RenderTransformOrigin="0.5 0.5">
                <TextBlock.Style>
                    <Style TargetType="{x:Type TextBlock}">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="1.5"
                                                        ScaleY="1.5" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

I tried to change directly the ZIndex in the trigger, but it doesn't work.
It seems that I need to change the ZIndex in the ContentPresenter that is the Parent of the TextBlock in the VisualTree and not directly in the TextBlock.

<Setter Property="Panel.ZIndex" Value="99" />

So I tried to change the ZIndex in the ContentPresenter, but it still doesn't work

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

Does anyone know how it works ?

Answer

Kent Boogaart picture Kent Boogaart · Mar 13, 2012

I just tried exactly what you suggested in WPF 4 and it worked fine.

MainWindow.xaml:

<Window x:Class="SO9687674.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <ItemsControl ItemsSource="{Binding}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}">
                <TextBlock.Style>
                    <Style TargetType="{x:Type TextBlock}">
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="RenderTransform">
                                    <Setter.Value>
                                        <ScaleTransform ScaleX="2.5"
                                                        ScaleY="2.5" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
                </TextBlock>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="{x:Type ContentPresenter}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Panel.ZIndex" Value="99" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ItemsControl.ItemContainerStyle>
    </ItemsControl>
</Window>

MainWindow.xaml.cs:

using System.Collections.Generic;
using System.Windows;

namespace SO9687674
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = new List<string>
            {
                "One",
                "two",
                "three"
            };
        }
    }
}

What makes you think it's not working? Have you used Snoop to verify?