在触发器中的父内容演示者上设置ZIndex

Question

I have an ItemsControl which has a Canvas as it's ItemsPanel, the items are simple Borders, the details of the Borders are databound from a view model, data like X,Y Width, Height, Colour etc. I soon realised that even though I could bind most data like the size and colour to the border item itself I had to bind the point data and ZIndex in the ItemsControl Container Style, I believe this is because these properties pertains only to that ItemContainer which is a ContentPresenter:

<ItemsControl.ItemContainerStyle>
      <Style>
             <Setter Property="Canvas.Left" Value="{Binding Metrics.Ordinate.X}"/>
             <Setter Property="Canvas.Top" Value="{Binding Metrics.Ordinate.Y}"/>
             <Setter Property="Canvas.ZIndex" Value="{Binding ZIndex}"/>
       </Style>
 </ItemsControl.ItemContainerStyle>

Everything has been working as needed up to now. When the user was hovering over the borders I was using a trigger on mouse over to change the background colour but because the UI is already so dependant upon colours we decided that for the hover we wanted the borders to increase in size. So I added a scale transform instead:

 <Trigger Property="IsMouseOver" Value="True">
     <!--<Setter Property="Background" Value="{Binding SelectedTemplate.StandardBrush}"></Setter>-->
         <Setter Property="LayoutTransform">
               <Setter.Value>
                    <ScaleTransform ScaleX="1.5" ScaleY="1.5"/>
                </Setter.Value>
          </Setter>
 </Trigger>

Now the problem is that I need to increase the ZIndex of that single border in the trigger as well so that as it grows it is not clipped by its nearby fellow items. I was searching on how to set the parent item (ContentPresenter) in XAML in a trigger and came across this . That looks perfect except that there is no Name on the content presenter to reference it with, it is a repeated control and I cannot fathom how I can reference it within XAML.

Is this possible within a trigger or am I best looking for a different approach, either one not relying solely upon XAML or maybe a change to my ItemsControl?

Many thanks in advance.

Paul

Edit

Adding the panel template:

 <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <local:AutoSizeCanvas/>
            </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>

AutoCanvas is a custom control the derives from Canvas which overrides the measure override so it plays ball living inside a scrollviewer, that is the only difference to a standard Canvas.

Edit

Just to add that I'm using data templates for the bound items as some borders need to contain slightly different items within them, David's current answer below does work, on mouse over the ZIndex is increased, the problem is that all items that are hovered over have their ZIndex increased so if the mouse goes over an item that is meant to be at the back then it is raised to the top, also this seems very slow. The solution does work but not quite in this scenario as it is doing a blanket setting on all items, not just the one type of border that needs the trigger. In essence I have a seating plan which I get the visual data from another application and have to use it as is. The plan has zones, blocks, rows and seats, It is only the seats that I want this trigger to occur for.

Hope that's clear.

Answer 1

are you sure that you need the ContentPresenter's ZIndex to be increased and not just the Border's ZIndex?

if so, you do not have many options there. The best I can see is to setup the trigger directly in the itemsPresenter's style. This way you don't have to try to find the border's parent (wich I think is impossible to do just in xaml anyway)

so you'd end up with something like this:

<ItemsControl.ItemContainerStyle>
    <Style>
        <Setter Property="Canvas.Left" Value="{Binding Metrics.Ordinate.X}"/>
        <Setter Property="Canvas.Top" Value="{Binding Metrics.Ordinate.Y}"/>
        <Setter Property="Canvas.ZIndex" Value="{Binding ZIndex}"/>
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Canvas.ZIndex" Value="1000"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</ItemsControl.ItemContainerStyle>

Answer 2

David's answer is correct for my original question before I provided additional detail and is a perfectly good answer, sadly it did not work in my peculiar scenario.

I managed to solve the problem with code behind for my datatemplate border:

The XAML for the template :

<DataTemplate DataType="{x:Type vm:Seat}">
    <Border CornerRadius="3" Width="{Binding Metrics.Size.Width}" Height="{Binding Metrics.Size.Height}" BorderThickness="2" MouseEnter="MouseEnter" MouseLeave="MouseLeave">
        <Border.RenderTransform>
            <ScaleTransform x:Name="ZoomTransform" ScaleX="1" ScaleY="1"/>
        </Border.RenderTransform>
        <Border.InputBindings>
            <MouseBinding Gesture="LeftClick" Command="{Binding LeftClickCommand}"/>
            <MouseBinding Gesture="RightClick" Command="{Binding RightClickCommand}"/>
        </Border.InputBindings>
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Setter Property="BorderBrush" Value="{Binding PriceBorderColour}"></Setter>
                <Setter Property="Background" Value="{Binding Template.StandardBrush}"></Setter>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsSelected}" Value="True">
                        <Setter Property="Background" Value="{Binding SelectedTemplate.StandardBrush}"/>
                    </DataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsMouseOver}" Value="True"/>
                            <Condition Binding="{Binding Plan.EditModel.EditEnabled}" Value="True"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Cursor" Value="Pen"/>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <Viewbox>
            <TextBlock Text="{Binding ObjectLabel.Text}" Foreground="{Binding ObjectLabel.FontColour}"/>
        </Viewbox>
    </Border>
</DataTemplate>

And the Code Behind:

public partial class VisualDataTemplates : ResourceDictionary
{
    private Int32 _originalZIndex;
    private const Double _scaleSize = 1.5;
    private const Double _standardScaleSize = 1;

    public VisualDataTemplates()
    {
        InitializeComponent();
    }

    protected void MouseEnter(Object sender, RoutedEventArgs e)
    {
        Border border = sender as Border;
        ContentPresenter presenter = border.TemplatedParent as ContentPresenter;

        _originalZIndex = Canvas.GetZIndex(presenter);
        Canvas.SetZIndex(presenter, DisplayOrders.FrontItem);

        SetTransform(border, _scaleSize);
    }

    protected void MouseLeave(Object sender, RoutedEventArgs e)
    {
        Border border = sender as Border;
        ContentPresenter presenter = border.TemplatedParent as ContentPresenter;
        Canvas.SetZIndex(presenter, _originalZIndex);

        SetTransform(border, _standardScaleSize);

    }

    private void SetTransform(Border border, Double value)
    {
        ScaleTransform transform = border.RenderTransform as ScaleTransform;
        transform.ScaleX = transform.ScaleY = value;
    }
}

The only problem I have now is that it is slow as hell so I may have to abandon this idea entirely and find another visual effect for the hover.

If anyone else has any better ideas then please provide.

Thanks

Paul