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

Question

我有一个$("#anchor-from").change(function(){ if($("#anchor-from").(is)(':checked')){ if($('#period-daily').(is)(':checked')) { console.log(final1); } else if($('#period-weekly').is(':checked')) { console.log(final2); } } }); ，我试图将其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我希望边框渐变为左侧0-10像素的C1-C2颜色，右侧部分0-10像素的C2-C3颜色（或BorderThickness = 10, 0, 10, 0 - border.Width像素）。我不关心上下边框，我很好地将它们作为纯色。

无论如何我能实现我所描述的目标吗？

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

我还有其他任何建议 - 请分享

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>