Question

我有一个WPF'监视器小部件'，它将CPU，RAM和磁盘性能显示为小百分比条。我使用以下渐变作为资源将条形分为4个部分（即0％ - 25％，25％ - 50％等）

<LinearGradientBrush x:Key="Quarters" StartPoint="0,0" EndPoint="0,15" MappingMode="Absolute">
    <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>

最初，条形图的0％位置位于顶部（bar.Height = 0），100％位于底部（bar.Height = 15）。只需调整其高度属性即可更改条形大小。一切都运行良好，但我更喜欢酒吧的0％位置，而不是，即。酒吧将“向上”增长。

使条形向上生长没有问题，但我遇到的问题是渐变现在随着矩形移动，因此矩形的顶部始终是绿色的，无论它有多小。我明白这是因为我现在使用Canvas.SetTop来移动矩形（条形）的顶部以及改变它们的高度。无论矩形的位置如何，如何将渐变强制移动到绝对位置？

MonitorWidget alt text （背景不透明度）

抱歉，我知道图像很小，但您应该能够确定中间条从顶部开始（绿色）并向下增长，以橙色结束（50％-75％值）。左边的条形从底部开始（这就是我想要的），但是这个条形图中的渐变随着高度移动......这就是问题所在。请注意，当我可以解决此问题时，我将反转渐变，以便红色代表前25％。在这个例子中，底部的四分之一应该是红色，下一个季度是橙色，其余部分是黄色。

我无法相信没有简单的解决方案......来到脑盒。 :)如何用矩形移动渐变的绝对位置......这可能吗???

（相关帖子：Determining a computer's maximum hard drive data transfer rate programmatically with C#）

Answer 1

我使用剪辑解决了类似的问题。创建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>

Answer 2

更新

使用在运行时设置的值剪辑矩形。

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

原始解决方案

每个栏使用2个矩形。

一个100％高度的矩形和彩色渐变。然后在第一个矩形上覆盖黑色矩形。调整黑色矩形高度（如前所述）以暴露下面的渐变。

例如，如果值为25％，则将覆盖高度设置为75％

Answer 3

是的，0,0点渐变填充的StartPoint / EndPoint似乎总是在对象的左上角。因此，一种方法是使用RenderTransform将对象旋转180度。然后你可以设置矩形的高度，但渐变填充将保持锚定在底部。

固定渐变与移动矩形？

3 个答案:

更新

原始解决方案