wpf - WPF中如何精确设置左右边框渐变

Question

我有一个 Border，我正在尝试将其 BorderBrush 设置为具有从 #D3D3D3 到 BFBFBF< 的左边框渐变 和从 #BFBFBF 到 #717171 的右边框渐变。问题是如果我这样做:

<Setter Property="BorderBrush">
    <Setter.Value>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="#D3D3D3"/>
            <GradientStop Offset="0.1" Color="#BFBFBF"/>
            <GradientStop Offset="0.9" Color="#BFBFBF"/>
            <GradientStop Offset="1" Color="#717171"/>
        </LinearGradientBrush>
    </Setter.Value>
</Setter>

我需要正确选择Offset，这很难。此外，对于不同的边框大小，我需要不同的偏移量。通常，如果我有 BorderThickness = 10, 0, 10, 0，我希望边框渐变在左侧为 0-10 像素的 C1-C2 颜色，在左侧为 0-10 像素的 C2-C3 颜色右侧部分(或 border.Width - border.Width + 10 像素)。我不关心上下边框，我可以将它们设为纯色。

无论如何我可以实现我所描述的吗？

我希望边框看起来像这样(这张图片是我尝试做的面板的底部裁剪图):

我还有其他建议 - 请分享

Answer 1

在 WPF 中，您不能在边框元素的不同侧使用不同的渐变。

您应该改为使用两个嵌套的 Border 元素，一个仅包含左侧，第二个包含边框的右侧:

<Border BorderThickness="2,0,0,0">
    <Border.BorderBrush>
        <!-- Left side gradient -->
    </Border.BorderBrush>
    <Border BorderThickness="0,0,2,0">
        <Border.BorderBrush>
            <!-- Right side gradient -->
        </Border.BorderBrush>

        <!-- Content here -->
    </Border>
</Border>

通过这种方式，您可以在侧面使用简单的渐变。

使用 MappingMode.Absolute 编写这些渐变应该很容易。

编辑

看来用MappingMode.Absolute设置右边框渐变是不行的。

更简单的解决方案是使用简单的 StackPanel/Grid 控件，并将渐变填充的 Rectangle 作为边框部分:

<StackPanel Orientation="Horizontal">
    <Rectangle Width="10">
        <Rectangle.Fill>
              <!-- Left side gradient -->
        </Rectangle.Fill>
    </Rectangle>

    <!-- Content here -->

    <Rectangle Width="10">
        <Rectangle.Fill>
              <!-- Right side gradient -->
        </Rectangle.Fill>
    </Rectangle>
</StackPanel>