Wpf 固定渐变和移动矩形？

我有一个WPF“监视器小部件”，它将CPU、RAM和磁盘性能显示为小百分比条。我使用以下梯度作为资源，将钢筋分为4个部分（即0%-25%、25%-50%等）

最初，钢筋的0%位置位于顶部（钢筋高度=0），100%位于底部（钢筋高度=15）。通过简单地调整其“高度”属性，可以更改条的大小。一切都很好，但我更喜欢酒吧的0%的位置，而不是在底部，即酒吧将'成长'向上

使这些条向上生长没有问题，但我的问题是梯度现在随着矩形移动，所以矩形的顶部总是绿色的，不管它有多小。我理解这是因为我现在使用Canvas.SetTop来移动矩形（条）的顶部以及更改其高度。如何强制渐变到绝对位置，而不考虑矩形的位置

（背景不透明度）

很抱歉，我知道图像很小，但您应该能够分辨出中间条从顶部（绿色）开始向下延伸，以橙色（50%-75%值）结束。左栏从底部开始（这是我想要的），但是这个栏中的渐变随着高度移动。。。这就是问题所在。请注意，当我可以解决这个问题时，我将反转渐变，这样红色将表示顶部的25%。在本例中，底部四分之一应为红色，下一个四分之一为橙色，其余为黄色

我不敢相信没有简单的解决办法。。。来吧，大脑盒子。：）用矩形移动渐变的绝对位置怎么样。。。这可能吗

---

（相关帖子：）

我用剪辑解决了一个类似的问题。创建100%的矩形并用画笔填充。然后使用剪切仅显示矩形的一部分，请参见下面显示两个矩形的示例代码：

<Window x:Class="GradientTest.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">

    <Window.Resources>

        <LinearGradientBrush x:Key="Quarters" StartPoint="0,1" EndPoint="0,0">
            <GradientStop Color="LightGreen" Offset="0.0" />
            <GradientStop Color="Yellow" Offset="0.25" />
            <GradientStop Color="Orange" Offset="0.5" />
            <GradientStop Color="Red" Offset="0.75" />
        </LinearGradientBrush>

    </Window.Resources>

    <Canvas Height="100">

        <!--21%-->
        <Rectangle Fill="{StaticResource Quarters}" Width="30" Height="100" Canvas.Bottom="0" Canvas.Left="0">
            <Rectangle.Clip>
                <RectangleGeometry Rect="0, 79, 30, 100" />
            </Rectangle.Clip>
        </Rectangle>

        <!--68%-->
        <Rectangle Fill="{StaticResource Quarters}" Width="30" Height="100" Canvas.Bottom="0" Canvas.Left="40">
            <Rectangle.Clip>
                <RectangleGeometry Rect="0, 32, 30, 100" />
            </Rectangle.Clip>
        </Rectangle>

    </Canvas>

</Window>

更新 使用运行时设置的值剪裁矩形

    <Window.Resources>    
        <LinearGradientBrush x:Key="Quarters" StartPoint="0,0" EndPoint="0,1" >
            <GradientStop Color="LightGreen" Offset="0.0" />
            <GradientStop Color="LightGreen" Offset="0.24" />
            <GradientStop Color="Yellow" Offset="0.25" />
            <GradientStop Color="Yellow" Offset="0.49" />
            <GradientStop Color="Orange" Offset="0.5" />
            <GradientStop Color="Orange" Offset="0.74" />
            <GradientStop Color="Red" Offset="0.75" />
            <GradientStop Color="Red" Offset="1.0" />
        </LinearGradientBrush> 
    </Window.Resources>

    <Canvas Height="100">    
        <Rectangle Fill="{StaticResource Quarters}" Width="30" Height="100" Canvas.Bottom="0" Canvas.Left="0">
            <Rectangle.Clip>
                <RectangleGeometry x:Name="ClipRect" Rect="0, 100, 30, 100" />
            </Rectangle.Clip>
        </Rectangle>    
     </Canvas>

原液 每个条使用2个矩形

一个具有100%高度和彩色渐变的矩形。然后在第一个矩形上覆盖一个黑色矩形。调整黑色矩形的高度（与之前一样）以显示下面的渐变

---

例如，如果该值为25%，则将叠加高度设置为75%

是，渐变填充的起点/终点的0,0点似乎始终位于对象的左上角。 一种方法是使用RenderTransform将对象旋转180度。

---

然后，您可以设置矩形的高度，但渐变填充将固定在底部。

我尝试了此操作，但它似乎根本不会影响渐变。示例不影响渐变，但它只显示其一部分，例如示例中的21%矩形为浅绿色，没有红色。谢谢，但我不确定我是否完全理解这一点。您是否建议我为渐变中四个不同颜色的25%部分各创建一个矩形？如果是这样的话，移动百分比级别的矩形是如何进入它的？参见上面的代码。矩形应从底部开始，一直延伸到画布的顶部。然后使用剪切矩形的顶部进行剪切。例如，您希望显示与68%对应的列。这意味着您必须剪切32%（100-68=32）的矩形。在上面的代码中，我在第二列中这样做。您可能需要使用值转换器来执行减法。谢谢您的解释。很遗憾，我不能给你们两个打勾，因为@geoff在解决方案中使用了你的剪辑想法。通常，这正是我想要的，但用户可以控制不透明度。如果叠加的黑色矩形与不透明度匹配，则彩色渐变将显示出来，如果不匹配，则必须与背景具有不同的不透明度。不过，我会在将来的项目中记住这项技术，所以谢谢。@Sheridan-好的，我看到了我的解决方案中的这个问题。更新了我的答案，改为使用剪辑矩形（改编自@Wallstreet Programmers answer），这正是我想要的，非常感谢。。。我知道一定有一个简单的方法。唯一的区别是clipRect的高度以及位置也必须调整：cpuClip.Rect=new Rect（0,15-barSize，5,barSize）；

    <Window.Resources>    
        <LinearGradientBrush x:Key="Quarters" StartPoint="0,0" EndPoint="0,1" >
            <GradientStop Color="LightGreen" Offset="0.0" />
            <GradientStop Color="LightGreen" Offset="0.24" />
            <GradientStop Color="Yellow" Offset="0.25" />
            <GradientStop Color="Yellow" Offset="0.49" />
            <GradientStop Color="Orange" Offset="0.5" />
            <GradientStop Color="Orange" Offset="0.74" />
            <GradientStop Color="Red" Offset="0.75" />
            <GradientStop Color="Red" Offset="1.0" />
        </LinearGradientBrush> 
    </Window.Resources>

    <Canvas Height="100">    
        <Rectangle Fill="{StaticResource Quarters}" Width="30" Height="100" Canvas.Bottom="0" Canvas.Left="0">
            <Rectangle.Clip>
                <RectangleGeometry x:Name="ClipRect" Rect="0, 100, 30, 100" />
            </Rectangle.Clip>
        </Rectangle>    
     </Canvas>

ClipRect.Rect = new Rect(0, 20, 30, 100); //80%
ClipRect.Rect = new Rect(0, 70, 30, 100); //30%