Home/ Questions/Q 9275067
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T16:30:07+00:00

I have a <Rectangle /> on my Windows phone app view which displays the

  • 0

I have a <Rectangle /> on my Windows phone app view which displays the camera feed, and I am trying to figure out the XAML code to place a partially transparent image over the feed.

I have the working code:

<Grid x:Name="LayoutRoot">

        <Rectangle x:Name="_previewRect" 
                   Margin="0" 
                   Height="800" 
                   Width="600" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center"
                   Tap="OnTapDown">

            <Rectangle.Fill>
                <VideoBrush x:Name="_previewVideo">
                    <VideoBrush.RelativeTransform>
                        <CompositeTransform  
                            x:Name="_previewTransform" CenterX=".5" CenterY=".5" />
                    </VideoBrush.RelativeTransform>
                </VideoBrush>
            </Rectangle.Fill>

       </Rectangle>

    </Grid>

Which displays my camera feed perfectly (most of that code is in codebehind of course).

But now I would like to add an image as an overlay. I tried adding:

<Grid.Background>
    <ImageBrush ImageSource="Images/Background/BackgroundBlurred.png" Stretch="UniformToFill" />
</Grid.Background>

both above and below the <Rectangle /> element, but no such luck.

Does anyone have any idea how I can do this? It doesn’t seem terribly difficult, but I’m just beginning to learn XAML.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want an Image to overlay over the video-feed Rectangle, you must make it a separate control within the “layoutRoot” Grid. Simply position it directly over the top of your rectangle and give it a higher Canvas.ZIndex value:

    <Grid x:Name="LayoutRoot">
    <Rectangle x:Name="_previewRect" 
               Margin="0" 
               Height="800" 
               Width="600" 
               HorizontalAlignment="Center" 
               VerticalAlignment="Center"
               Tap="OnTapDown"
               Canvas.ZIndex="1">
        <Rectangle.Fill>
            <VideoBrush x:Name="_previewVideo">
                <VideoBrush.RelativeTransform>
                    <CompositeTransform  
                        x:Name="_previewTransform" CenterX=".5" CenterY=".5" />
                </VideoBrush.RelativeTransform>
            </VideoBrush>
        </Rectangle.Fill>
    </Rectangle>

    <Image x:Name="myOverlayImage" Canvas.ZIndex="2">
        <!-- Your overlay is now a sibling of the video-feed Rectangle, but drawn on top of it -->
    </Image>
</Grid>
    • 0