Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Modify ZIndex of an Items in an ItemsControl

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 ?

like image 405
Nicolas Avatar asked Mar 13 '12 16:03

Nicolas


1 Answers

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?

like image 97
Kent Boogaart Avatar answered Oct 25 '22 02:10

Kent Boogaart