none
WPF Progressbar und Gradient zum Value anzeigen RRS feed

  • Frage

  • Hi, ich stelle einen Progressbar dar, möchte aber das er bei ~50% erst mit Gelb anfängt. Wenn der Wert >85 ist soll er mit Rot anfangen. Jetzt skaliert er ja aktuell die Werte runter auf den aktuellen Wert. 

       <ProgressBar x:Name="f_oBar" Height="74" Canvas.Left="12" Canvas.Top="50" Width="12" Value="50"
                         VerticalAlignment="Center" Maximum="100" Orientation="Vertical">
                <ProgressBar.Foreground>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                        <GradientStop Color="Green" Offset="0.0" />
                        <GradientStop Color="LimeGreen" Offset="0.25" />
                        <GradientStop Color="Yellow" Offset="0.50" />
                        <GradientStop Color="red" Offset="0.85" />
                        <GradientStop Color="DarkRed" Offset="0.90" />
                    </LinearGradientBrush>
                </ProgressBar.Foreground>
                </ProgressBar>

    Anmerkung: Den Value vom Progressbar setze ich Code Behind

    Mittwoch, 29. Juli 2020 11:11

Antworten

  • Hi Thomas,
    dreh einfach die ProgressBar um, nutze den Farberverlauf als Hintergrund und verdecke mit dem Vordergrund, z.B. so:

    <Window x:Class="Window040"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApp1.WpfApp040"
            mc:Ignorable="d"
            Title="Window040" Height="450" Width="800">
      <Window.DataContext>
        <local:ViewModel/>
        </Window.DataContext>
      <Window.Resources>
        <local:IntConverter x:Key="conv"/>
      </Window.Resources>
        <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ProgressBar Orientation="Vertical" 
                     Margin="20" 
                     Value="{Binding Level, Converter={StaticResource conv}}" 
                     Width="20"
                     Foreground="White">
          <ProgressBar.LayoutTransform>
            <RotateTransform Angle="180"/>
          </ProgressBar.LayoutTransform>
          <ProgressBar.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
              <GradientStop Color="DarkRed" Offset="0.0" />
              <GradientStop Color="Red" Offset="0.10" />
              <GradientStop Color="Yellow" Offset="0.15" />
              <GradientStop Color="LimeGreen" Offset="0.50" />
              <GradientStop Color="Green" Offset="0.75" />
            </LinearGradientBrush>
          </ProgressBar.Background>
        </ProgressBar>
        <Slider Grid.Row="1" Minimum="0" Maximum="100" Value="{Binding Level}"/>
      </Grid>
    </Window>

    Und der ViewModel und Converter

    Imports System.ComponentModel
    Imports System.Globalization
    Imports System.Runtime.CompilerServices
    
    Namespace WpfApp040
      Public Class ViewModel
        Implements INotifyPropertyChanged
    
        Private _level As Integer
        Public Property Level As Integer
          Get
            Return Me._level
          End Get
          Set(value As Integer)
            Me._level = value
            OnPropChanged()
          End Set
        End Property
    
        Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
        Private Sub OnPropChanged(<CallerMemberName> Optional propName As String = "")
          RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propName))
        End Sub
    
      End Class
    
      Public Class IntConverter
        Implements IValueConverter
    
        Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object Implements IValueConverter.Convert
          Return 100 - CInt(value)
        End Function
    
        Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
          Throw New NotImplementedException()
        End Function
      End Class
    End Namespace

    --
    Best Regards / Viele Grüße
    Peter Fleischer (former MVP for Developer Technologies)
    Homepage, Tipps, Tricks



    Mittwoch, 29. Juli 2020 18:32

Alle Antworten

  • Hi Thomas,
    dreh einfach die ProgressBar um, nutze den Farberverlauf als Hintergrund und verdecke mit dem Vordergrund, z.B. so:

    <Window x:Class="Window040"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:WpfApp1.WpfApp040"
            mc:Ignorable="d"
            Title="Window040" Height="450" Width="800">
      <Window.DataContext>
        <local:ViewModel/>
        </Window.DataContext>
      <Window.Resources>
        <local:IntConverter x:Key="conv"/>
      </Window.Resources>
        <Grid>
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ProgressBar Orientation="Vertical" 
                     Margin="20" 
                     Value="{Binding Level, Converter={StaticResource conv}}" 
                     Width="20"
                     Foreground="White">
          <ProgressBar.LayoutTransform>
            <RotateTransform Angle="180"/>
          </ProgressBar.LayoutTransform>
          <ProgressBar.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
              <GradientStop Color="DarkRed" Offset="0.0" />
              <GradientStop Color="Red" Offset="0.10" />
              <GradientStop Color="Yellow" Offset="0.15" />
              <GradientStop Color="LimeGreen" Offset="0.50" />
              <GradientStop Color="Green" Offset="0.75" />
            </LinearGradientBrush>
          </ProgressBar.Background>
        </ProgressBar>
        <Slider Grid.Row="1" Minimum="0" Maximum="100" Value="{Binding Level}"/>
      </Grid>
    </Window>

    Und der ViewModel und Converter

    Imports System.ComponentModel
    Imports System.Globalization
    Imports System.Runtime.CompilerServices
    
    Namespace WpfApp040
      Public Class ViewModel
        Implements INotifyPropertyChanged
    
        Private _level As Integer
        Public Property Level As Integer
          Get
            Return Me._level
          End Get
          Set(value As Integer)
            Me._level = value
            OnPropChanged()
          End Set
        End Property
    
        Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
        Private Sub OnPropChanged(<CallerMemberName> Optional propName As String = "")
          RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propName))
        End Sub
    
      End Class
    
      Public Class IntConverter
        Implements IValueConverter
    
        Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object Implements IValueConverter.Convert
          Return 100 - CInt(value)
        End Function
    
        Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
          Throw New NotImplementedException()
        End Function
      End Class
    End Namespace

    --
    Best Regards / Viele Grüße
    Peter Fleischer (former MVP for Developer Technologies)
    Homepage, Tipps, Tricks



    Mittwoch, 29. Juli 2020 18:32
  • Danke Peter, hat geklappt.

    Donnerstag, 30. Juli 2020 07:40