圖像邊界ontop圖像在flipview

Question

如何在XAML中創建以下圖像示例？ （所以在圖像頂部覆蓋綠色） 當我添加一個圖像和一個邊框（在其內部有一個文本塊）時，邊框也總是將其自身拉伸至全高，而不是文本塊中文本所需的高度。

它包含在Flipview中。但是網格中的一個正常例子也可以。

Answer 1

查看VS2011/12網格應用程序模板。在Common \ StandardStyles.xaml中，您可以在集線器屏幕上找到GridView項目的所有樣式，並且它們中的很多都遵循這種模式。例如，「Standard250x250ItemTemplate」風格定義如下...

<DataTemplate x:Key="Standard250x250ItemTemplate"> 
    <Grid HorizontalAlignment="Left" Width="250" Height="250"> 
     <Border Background="{StaticResource ListViewItemPlaceholderRectBrush}"> 
      <Image Source="{Binding Image}" Stretch="UniformToFill"/> 
     </Border> 
     <StackPanel VerticalAlignment="Bottom" Background="{StaticResource ListViewItemOverlayBackgroundBrush}"> 
      <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayTextBrush}" Style="{StaticResource TitleTextStyle}" Height="60" Margin="15,0,15,0"/> 
      <TextBlock Text="{Binding Subtitle}" Foreground="{StaticResource ListViewItemOverlaySecondaryTextBrush}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/> 
     </StackPanel> 
    </Grid> 
</DataTemplate>