与边界的图象在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>