代码之家 › 专栏 › 技术社区 › Sheridan

固定渐变和移动矩形?

gradient wpf

Sheridan · 技术社区 · 14 年前

我有一个WPF‘monitor widget’,它以小百分比显示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 (背景不透明度)

我不敢相信没有简单的解决办法。。。来吧,大脑盒子。:)用矩形移动梯度的绝对位置怎么样。。。这可能吗???

3 回复 | 直到 7 年前

Geoff Appleford 14 年前

更新

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

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

Wallstreet Programmer 14 年前

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

max 12 年前

是的,渐变填充的起点/终点的0,0点似乎总是对象的左上角。一种方法是使用RenderTransform将对象旋转180度。然后您可以只设置矩形的高度,但是渐变填充将固定在底部。