如何使用图像和文本创建用户控件

Question

基本上，我是在尝试使用不透明的 TextBlock 覆盖来模仿与下面一张图片相同的外观

我现在在我的 UserControl 中拥有的是

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Image Grid.Row="0" Margin="0" Source="{Binding Bitmap}" Stretch="UniformToFill"/>

    <TextBlock Grid.Row="1" Text="{Binding Text}" Margin="0"
               HorizontalAlignment="Center" VerticalAlignment="Center"
               Foreground="Black"
               TextWrapping="Wrap"/>
</Grid>

所以我尝试过使用布局，但似乎无法正确匹配。我尝试将两者都放在 Grid.Row="0" 中，但也没有效果。

Answer 1

所以如果你想模仿图片，你可以这样做；

<Grid x:Name="LayoutRoot" Background="White">
   <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="Auto"/>
   </Grid.RowDefinitions>

   <Image Grid.RowSpan="2" Source="{Binding Bitmap}" 
          Stretch="UniformToFill"/>

   <Border Grid.Row="1" 
           Background="#80000000" Padding="5">

          <TextBlock Text="Blah" 
                     Foreground="White"
                     TextWrapping="Wrap"/>
   </Border>
</Grid>

或者可以将您的图像设置为网格背景，或者将边框与矩形交换，然后将其与 TextBlock 放在同一行中，有几种方法可以实现。希望这会有所帮助，干杯。