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)
Summary
When placing two
vs:Imagecontrols inside aGrid(orCanvas) 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:Imagecontrols should respect standard WPF layering rules — either via XAML declaration order (last declared = on top) or viaPanel.ZIndex.Actual behavior
The overlay image always renders behind the main image. None of the following had any effect:
Panel.ZIndexexplicitly on eachvs:Imagevs:Imagein aGridwithPanel.ZIndexvs:Imagein aBorderwithPanel.ZIndexCanvaswith explicitCanvas.Left/Canvas.Toppositioning andPanel.ZIndexNote: 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
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:Imagein Remote UI XAML when using arbitrary monikers as overlays.Question
Is there a supported way to layer two
vs:Imagecontrols using non-overlay monikers, or a dedicated overlay mechanism in the Remote UI XAML namespace? If not, could this be addressed or documented?Environment