3

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

<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>

我想要的是：

背景上方的图像

4

2 回答 2

3

将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 列表中定义的最后一个控件是在顶部绘制的控件。

于 2012-11-29T18:51:18.240 回答
1

由于 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" />

编辑

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

于 2012-11-29T17:41:31.303 回答