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

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放在同一行中，有几种方法可以实现它。希望这会有所帮助，欢呼。