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

Question

我有一个窗口的手机页面，一个堆叠面板和网格包含元素来设计页面。 我也有一个透明的图像，我想放在堆叠面板和网格上，但它仍然应该显示，我该怎么做？

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"图像背后的控制仍是点击。

并给出了以下结果：