Question

我的Windows手机应用视图中有<Rectangle />显示相机Feed，我正在尝试找出XAML代码，以便在Feed上放置部分透明的图像。

我有工作代码：

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

WP - XAML在矩形上叠加网格

1 个答案: