如何在WPF中精确设置左右边框渐变答案

【问题标题】：How to set left and right border gradient precisely in WPF如何在WPF中精确设置左右边框渐变
【发布时间】：2016-04-15 15:20:44
【问题描述】：

我有一个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像素)。我不关心上下边框，我可以将它们设置为纯色。

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

我希望边框看起来像这样（这张图片是我正在尝试做的面板的底部裁剪）：

我还有其他建议-请分享

【问题讨论】：

您可能只需将“导体”添加到监视控件更改的控件（您可能可以为此使用附加的行为/属性）。它可以检查边框粗细属性，并在粗细变化时创建具有正确尺寸的渐变。你可以为这个组件提供一个基础颜色，它可以用来生成渐变
@Charleh 我可以这样做，但听起来很老套......我试图模仿的这些面板在旧 QT 程序和后期 Win 98 设计中到处都是，我不敢相信 WPF 可以'不要以更简单的方式做到这一点。无论如何，感谢您的提示 - 如果我找不到更好的解决方案，我将不得不这样做

标签： wpf

【解决方案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 控件，将渐变填充的Rectangles 作为边框部分：

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

【讨论】：

我觉得你的回答应该让我得到我正在寻找的结果，但我仍然错过了一点。我可以通过 MappingMode=Absolute 对左边框进行绝对定位，但是我该如何做正确的呢？我希望正确的渐变从元素宽度开始到（宽度+边框宽度）
@Archeg 看来设置右边框毕竟不是那么容易。查看我的编辑。
我会将其标记为答案，但由于解决方案的复杂性，我会避免使用它（所以我不会破坏我的 xaml，因为我有很多这样的面板），除非我是要求严格按照设计，因为客户还不确定我是否可以偏离。谢谢。