Skip to content

vs:Image ignores ZIndex / XAML declaration order when overlapping images #570

@sboulema

Description

@sboulema

Summary

When placing two vs:Image controls inside a Grid (or Canvas) to create an icon with an overlay badge, the layering order cannot be controlled. The overlay always renders behind the main icon regardless of what is tried.

Expected behavior

Two overlapping vs:Image controls should respect standard WPF layering rules — either via XAML declaration order (last declared = on top) or via Panel.ZIndex.

Actual behavior

The overlay image always renders behind the main image. None of the following had any effect:

  • Swapping XAML declaration order
  • Setting Panel.ZIndex explicitly on each vs:Image
  • Wrapping each vs:Image in a Grid with Panel.ZIndex
  • Wrapping each vs:Image in a Border with Panel.ZIndex
  • Using a Canvas with explicit Canvas.Left / Canvas.Top positioning and Panel.ZIndex

Note: the issue does not reproduce when using a KnownMonikers.Overlay* moniker for the overlay image — in that case layering works as expected. The problem only occurs when using a non-overlay moniker as the overlay image.

Repro

<Grid Width="17" Height="17">
    <vs:Image Source="{Binding Moniker}"
              Width="16" Height="16"
              HorizontalAlignment="Left" VerticalAlignment="Top"
              Panel.ZIndex="0" />
    <vs:Image Source="{Binding OverlayMoniker}"
              Width="10" Height="10"
              HorizontalAlignment="Right" VerticalAlignment="Bottom"
              Panel.ZIndex="1" />
</Grid>

The overlay (OverlayMoniker) always renders behind the main icon (Moniker) regardless of declaration order, ZIndex values, or container type.

Context

Overlaying a small badge icon on top of a main icon is a very common pattern in Visual Studio itself (e.g. error/warning overlays on file icons). There does not appear to be any supported way to achieve this with vs:Image in Remote UI XAML when using arbitrary monikers as overlays.

Question

Is there a supported way to layer two vs:Image controls using non-overlay monikers, or a dedicated overlay mechanism in the Remote UI XAML namespace? If not, could this be addressed or documented?

Environment

  • Visual Studio 2026
  • VisualStudio.Extensibility (Remote UI / out-of-proc extension model)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions