Add support for Canvas.ZIndex in any Panel

[jeromelaban]

I'm submitting a...

• Feature request

Current behavior

Setting the Canvas.ZIndex property on an item of any panel (except Canvas) has no effect on the rendering order.

Expected behavior

Setting the the Canvas.ZIndex property on an item of any panel (except Canvas) changes the rendering order.

Related issues

• #5644

Minimal reproduction of the problem with instructions

The NavigationView control uses this feature to overlay navigation button and pane toggle buttons.

A workaround is to change the index of the control inside the Children property of the panel.

Nuget Package: 1.41 and below.

Affected platform(s):

• [X] iOS
• [X] Android
• [X] WebAssembly
• [ ] Windows
• [ ] Build tasks

Visual Studio

• [X] 2017 (version: )
• [ ] 2017 Preview (version: )
• [ ] for Mac (version: )

[carldebilly]

@jeromelaban I thought it was supported on iOS and Android...

[jeromelaban]

It's only implemented for Canvas, at the moment.

[TrevorDArcyEvans]

Broken on Linux aka Skia.Gtk

Test code at: https://github.com/TrevorDArcyEvans/Uno-Canvas-Dragging-Shape-Example.git

GitHub

TrevorDArcyEvans/Uno-Canvas-Dragging-Shape-Example

Dragging a shape on a Uno canvas. Contribute to TrevorDArcyEvans/Uno-Canvas-Dragging-Shape-Example development by creating an account on GitHub.

[HavenDV]

Not sure if this is related to this issue or not, but: There is a code like this:

<Grid>
  <rxuno:RoutedViewHost/>
  <Grid Canvas.ZIndex="100">
     <UserControl Width="600" Height="450"/>
  </Grid>
</Grid>

The problem is, for WebAssembly, all content (that appears inside the RoutedViewHost) that is not overridden by the UserControl is not available for interaction (Buttons, etc.)

[jeromelaban]

@HavenDV it may not be. In effect, setting the ZIndex with the current order of items should have no effect, even on Windows, unless we've missed something pretty deep. Can you create an additional issue with repro steps ?

[HavenDV]

In fact, the example above works fine without Canvas.ZIndex:

<Grid>
  <rxuno:RoutedViewHost/>
  <UserControl/>
</Grid>

Canvas.ZIndex is only needed if you swap elements:

<Grid>
  <UserControl Canvas.ZIndex="100"/>
  <rxuno:RoutedViewHost/>
</Grid>

UserControl is implemented like this (for scale animation to full screen):

<Grid RenderTransformOrigin="1,0">
  <Grid.RenderTransform>
    <ScaleTransform x:Name="ScaleTransform"/>
  </Grid.RenderTransform>

  <HeaderedContentControl Width="600" Height="450"/>
</Grid>

This has been tested on UWP 19041.

[HavenDV]

For now, I have a workaround to control the Visibility property of the UserControl:

<views:ChatView
    x:Name="ChatView"
    d:DataContext="{d:DesignInstance 
        viewModels:DesignTimeChatViewModel,
        IsDesignTimeCreatable=True}"
    >
    <interactivity:Interaction.Behaviors>
        <interactions:DataTriggerBehavior
            Binding="{Binding IsExpanded, ElementName=ChatView}"
            Value="true"
            >
            <interactions:ChangePropertyAction 
                TargetObject="{Binding ElementName=ChatView}"
                PropertyName="Visibility"
                Value="Visible"
                />
        </interactions:DataTriggerBehavior>
        <interactions:DataTriggerBehavior
            Binding="{Binding IsExpanded, ElementName=ChatView}"
            Value="false"
            >
            <interactions:CallMethodAction 
                TargetObject="{Binding ElementName=RootElement}"
                MethodName="SetChatViewVisibilityToCollapsedAfter200ms"
                />
        </interactions:DataTriggerBehavior>
    </interactivity:Interaction.Behaviors>
</views:ChatView>

This allows the animation to be fully rendered, and control the element behind the UserControl after the UserControl has been collapsed. But there is still no way to manage elements under UserControl for WebAssembly. UWP: WebAssembly:

[dotMorten]

ugh this just blocked me as well :(

[jeromelaban]

@dotMorten on which panel did you use it ?

[dotMorten]

@jeromelaban Grid.

[jeromelaban]

Thanks. https://github.com/unoplatform/uno/pull/7868 should have added support for this (on skia targets), but there may be something else that's not working properly.