Исправлен градиент с движущимся прямоугольником?

Question

У меня есть «виджет монитора» WPF, который отображает производительность процессора, оперативной памяти и диска в виде небольших процентных полос.Я использую следующий градиент в качестве ресурса для разделения баров на 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).Размер бара будет меняться, просто регулируя его свойство Height.Все работало нормально, но я бы предпочел, чтобы позиция 0% баров была внизу, т.е.столбики будут «расти» вверх.

Заставить столбики расти вверх не было проблемой, но у меня есть проблема в том, что теперь градиент перемещается вместе с прямоугольником, так что верх прямоугольника всегда зеленый,независимо от того, насколько он маленький.Я понимаю, что это потому, что я сейчас использую Canvas.SetTop для перемещения верха прямоугольников (баров), а также для изменения их высоты.Как я могу заставить градиент в абсолютную позицию, независимо от положения прямоугольника?

(непрозрачность фона)

Извините, я знаю, что изображение маленькое,но вы должны просто быть в состоянии различить, что средняя полоса начинается сверху (зеленый) и растет вниз, заканчиваясь оранжевым (значение 50% -75%).Левая полоса начинается снизу (это то, что я хочу), но градиент в этой полосе перемещается вместе с высотой ... это проблема.Обратите внимание, что я исправлю градиент, когда смогу решить эту проблему, так что красный будет представлять верхние 25%.В этом примере нижняя четверть должна быть красной, следующая четверть оранжевой, а оставшаяся желтой.

Я не могу поверить, что для этого нет простого решения ... давай рассуждаем.:) Как насчет перемещения абсолютного положения градиента с помощью прямоугольника ... это возможно ???

(Относящийся к сообщению: Определение максимальной скорости передачи данных жесткого диска компьютера программно с помощью C # )

Answer 1

Обновление

Обрезать прямоугольник значениями, установленными во время выполнения.

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

Я решил похожую проблему с помощью отсечения. Создайте прямоугольники на 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 3

Да, точка 0,0 градиентной заливки StartPoint / EndPoint всегда кажется верхней левой частью объекта. Таким образом, один из способов - повернуть объект на 180 градусов с помощью RenderTransform. Тогда вы можете просто установить высоту прямоугольника, но градиентная заливка останется привязанной к основанию.