XAML如何在图像上浮动文本答案

【问题标题】：XAML how to float text over imageXAML如何在图像上浮动文本
【发布时间】：2011-07-07 05:05:43
【问题描述】：

我有一些想要显示带有水印的图像。

目前它们位于堆栈面板中，如下所示：

<StackPanel Orientation="Vertical"
                      Margin= "7,0,0,0" 
                      HorizontalAlignment="Center" >
            <Image Width="60"
                   Height="72"
                   VerticalAlignment="Top"
                   Margin="0 0 10 0"
                   Source="{Binding ImageToWatermark}" />

我将使用什么 xaml 将居中的文本浮动到图像上？

例如，用这种“Segoe Keycaps”字体在城市图片上显示伦敦。

【问题讨论】：

标签： silverlight image xaml text

【解决方案1】：

使用<Grid> 或<Canvas> 而不是<StackPanel>，项目将相互绘制。

【讨论】：

【解决方案2】：

我添加了一些示例代码以防万一。

<DataTemplate x:Key="ImageBackgroundBlackBorderedTextTemplate">
            <Grid Height="Auto" Margin="2,5,2,5">
                <Image Stretch="Fill" Source="{Binding ImageUrl}" />
                <Border Background="#80000000" VerticalAlignment="Bottom">
                    <TextBlock  Margin="5,2,5,2" TextWrapping="WrapWholeWords" Text="{Binding Title}"  Style="{StaticResource BaseTextBlockStyle}"/>
                </Border>
            </Grid>
        </DataTemplate>

【讨论】：

【解决方案3】：

对于 Xamarin 表单：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Image
        x:Name="ml"
        Source="btn_LineType.png">
    </Image>
    <Label 
        HorizontalOptions="CenterAndExpand" 
        VerticalOptions="EndAndExpand" 
        Text="SomeText">
    </Label>
</Grid>

【讨论】：