WP - XAML для наложения сетки на прямоугольник

Question

У меня есть <Rectangle /> в моем представлении приложения для телефона Windows, в котором отображается канал камеры, и я пытаюсь выяснить код XAML, чтобы разместить частично прозрачное изображение по каналу.

У меня есть рабочий код:

<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> 

который отображает фид камеры отлично (большая часть этого кода в коде, конечно).

Но теперь я хотел бы добавить изображение в качестве наложения. Я попытался добавить:

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

как выше и ниже <Rectangle /> элемента, но не такой удачи.

Кто-нибудь знает, как я могу это сделать? Это не кажется ужасно трудным, но я только начинаю учиться XAML.

Спасибо!

Answer 1

Если вы хотите, чтобы изображение накладывалось на прямоугольник видеопотока, вы должны сделать его отдельным элементом управления в сетке layoutRoot. Просто поместите его непосредственно над верхней частью прямоугольника и придать ему более высокую Canvas.ZIndex значения:

<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>