Question

我可以使用渐变背景创建矩形。如何通过给出路径在其上方插入图片？

<Rectangle StrokeThickness="2" Height="77" Canvas.Left="184" Canvas.Top="477" Width="119">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="White" Offset="0.5" />
            <GradientStop Color="Black" Offset="1" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

我想要的是什么：

Image above background

Answer 1

Border会保留一条内容，所以如果这就是你所拥有的，那么下面的内容就可以了：

<Border>
  <Border.Background>
    <LinearGradientBrush StartPoint="0,0.5"
                         EndPoint="1,0.5">
      <GradientStop Color="Black"
                    Offset="0" />
      <GradientStop Color="White"
                    Offset="0.5" />
      <GradientStop Color="Black"
                    Offset="1" />
    </LinearGradientBrush>
  </Border.Background>
  <Image HorizontalAlignment="Center"
         VerticalAlignment="Center" />
</Border>

如果您需要对更多形状/路径/图像进行分层，那么您可以使用支持多个子项的Grid对象：

<Grid>
  <!--Object 1-->
  <Ellipse StrokeThickness="2"
           Height="77"
           Width="119"
           HorizontalAlignment="Center"
           VerticalAlignment="Center">
    <Ellipse.Fill>
      <LinearGradientBrush StartPoint="0,0.5"
                           EndPoint="1,0.5">
        <GradientStop Color="Black"
                      Offset="0" />
        <GradientStop Color="White"
                      Offset="0.5" />
        <GradientStop Color="Black"
                      Offset="1" />
      </LinearGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
  <!--Object 2-->
  <Image HorizontalAlignment="Center"
         VerticalAlignment="Center" />
</Grid>

请记住，WPF从XAML的开头开始绘制控件，因此XAML列表中定义的最后一个控件是在顶部绘制的控件。

Answer 2

由于Rectangle不支持直接内容，因此您可以将图像放置在与矩形相关的位置，并为其提供更高的Canvas.ZIndex属性，以便在矩形的顶部进行渲染。

例如：

<Rectangle StrokeThickness="2"
           Height="77"
           Canvas.Left="184"
           Canvas.Top="477"
           Width="119"
           Canvas.ZIndex="1">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5"
                         EndPoint="1,0.5">
      <GradientStop Color="Black"
                    Offset="0" />
      <GradientStop Color="White"
                    Offset="0.5" />
      <GradientStop Color="Black"
                    Offset="1" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>
<Image Height="50"
       Canvas.Left="184"
       Canvas.Top="477"
       Width="50"
       Canvas.ZIndex="2" />

修改

将图像居中放置在矩形中始终是一个不同的问题。您可以在代码后面有一个属性，表示矩形的计算中心坐标，当您移动矩形（通过事件）时，它会发生变化。然后，您可以将图像位置绑定到该属性。

如何在背景上方插入图像

2 个答案: