Windows手机页面上的透明前景提示？

Question

我有一个带有stackpanel的windows手机页面，网格包含设计页面的元素。 我还有一个透明的图像，我想放在stackpanel和网格上，但它仍然应该显示，我该怎么做？

Answer 1

如果我理解正确你想要一个普通控件上的图像，部分透明的背景，我会这样做只需将图像最后添加到网格中，边框元素控制背景颜色和透明度，这样做导致像这样的XAML页面：

<phone:PhoneApplicationPage
    x:Class="PhoneApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY AWESOME APP" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="a page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel>
                <TextBlock Text="Donec tristique leo eu dapibus volutpat. Pellentesque posuere, mauris nec suscipit mollis, purus ante dignissim dolor, a rhoncus tellus diam eu ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus eget enim velit. Sed ut tincidunt nisi, at dictum velit. Donec in dapibus turpis. Ut dictum, leo sed accumsan sodales, purus nulla mollis odio, ac molestie elit ante sed lectus." Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" />
                <Button Content="A button" />
            </StackPanel>
        </Grid>

        <Grid Grid.RowSpan="2" IsHitTestVisible="False">
            <Border Background="Black" Opacity="0.75" />
            <Image Source="/Assets/my-overlay-image.png" />
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

请注意，通过设置IsHitTestVisible="False"，图像背后的控件仍然可以点击。

并给出以下结果：