Slider als TimeLine?

Hallo Liebe Community und ein gesundes neues Jahr von meiner Seite,

gibt es einen relativ einfach Ansatz einen Slider so umzubauen das ich mir eine TimeLine daraus basteln kann? Bzw. hat das mal jemand versucht und Erfahrung sammeln können?

Ich möchte quasi einen Zeitraum von 00:00 bis 24:00 Uhr und dort mit dem Slider Von und Bis einstellen.

Grüße

Meinst du einen Slider mit 2 Thumbs? Dann wäre wohl Creating a Range Slider in WPF (and other cool tips and tricks for UserControls) etwas für dich.

Für die Umrechnung der Values (0 - 24*60) kannst du dann einen ValueConverter benutzen, s. WPF Slider and dates (anstatt volle Stunden, dann entsprechend abändern).

PS: Je nach Genauigkeit der Einstellung die Values entsprechend anpassen, d.h. bei 5 Minuten Genauigkeit, dann entsprechend obige 24*60 (=1440) durch 5 teilen, also 288.

Jap, auf der Seite war ich sogar schon, konnte leider nur nicht ganz so viel mit anfangen, deswegen hab ich nach Rat im Forum gesucht 😕

Kann mir vllt jemand auf die Sprünge helfen? Ich bekomme durch das Beispiel leider den RangeSlider nicht erstellt bzw. bei meinem Versuch kann die Instanz nicht erstellt werden.

Hab versucht das Beispiel in VB.NET umzuschreiben.

Grüße

Hab das Beispiel aus dem Link mal für VB.net umgesetzt.

Falls jemand nochmal darüber stolpert. > ERLEDIGT <

<UserControl x:Class="RangeSlider"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="20" d:DesignWidth="300"     
             x:Name="root">

    <UserControl.Resources>

        <LinearGradientBrush x:Key="SliderThumbGradient" StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="#f7f7f7"/>
            <GradientStop Offset="1" Color="#bcbcbc"/>
        </LinearGradientBrush>

        <Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
            <Setter Property="SnapsToDevicePixels" Value="true"/>
            <Setter Property="OverridesDefaultStyle" Value="true"/>
            <Setter Property="Height" Value="14"/>
            <Setter Property="Width" Value="14"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Ellipse 
      Name="Ellipse" 
      Fill="{DynamicResource SliderThumbGradient}"
      Stroke="#404040"
      StrokeThickness="1" />
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Ellipse" Property="Fill" Value="#808080"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="Ellipse" Property="Fill" Value="#EEEEEE"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="simpleSlider" TargetType="{x:Type Slider}">
            <Border SnapsToDevicePixels="true" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <Rectangle x:Name="PART_SelectionRange"/>

                    <Track x:Name="PART_Track" Grid.Row="1">
                        <Track.Thumb>
                            <Thumb x:Name="Thumb" Style="{StaticResource SliderThumbStyle}"/>
                        </Track.Thumb>
                    </Track>
                </Grid>
            </Border>
        </ControlTemplate>

    </UserControl.Resources>
    <Grid VerticalAlignment="Top">
        
            <Border BorderThickness="0,1,0,0" BorderBrush="Black" VerticalAlignment="Center" Height="1" 
                Margin="5,0,5,0" Grid.ColumnSpan="25"/>
        
                <Slider x:Name="LowerSlider"
                Minimum="{Binding ElementName=root, Path=Minimum}"
                Maximum="{Binding ElementName=root, Path=Maximum}"
                Value="{Binding ElementName=root, Path=LowerValue, Mode=TwoWay}"
                Template="{StaticResource simpleSlider}"
                Margin="0,0,10,0" ToolTip="Von" VerticalAlignment="Center"
                />

        <Slider x:Name="UpperSlider"
                Minimum="{Binding ElementName=root, Path=Minimum}"
                Maximum="{Binding ElementName=root, Path=Maximum}"
                Value="{Binding ElementName=root, Path=UpperValue, Mode=TwoWay}"
                Template="{StaticResource simpleSlider}"
                Margin="10,0,0,0" ToolTip="Bis" VerticalAlignment="Center"
                />
    </Grid>
</UserControl>

Partial Public Class RangeSlider
    Inherits UserControl

    Public Sub New()

        ' Dieser Aufruf ist für den Designer erforderlich.
        InitializeComponent()

        ' Fügen Sie Initialisierungen nach dem InitializeComponent()-Aufruf hinzu.

    End Sub

    Public Shared ReadOnly MinimumProperty As DependencyProperty = DependencyProperty.Register("Minimum", GetType(Double), GetType(RangeSlider), New UIPropertyMetadata(0.0))
    Public Shared ReadOnly LowerValueProperty As DependencyProperty = DependencyProperty.Register("LowerValue", GetType(Double), GetType(RangeSlider), New UIPropertyMetadata(0.0))
    Public Shared ReadOnly UpperValueProperty As DependencyProperty = DependencyProperty.Register("UpperValue", GetType(Double), GetType(RangeSlider), New UIPropertyMetadata(0.0))
    Public Shared ReadOnly MaximumProperty As DependencyProperty = DependencyProperty.Register("Maximum", GetType(Double), GetType(RangeSlider), New UIPropertyMetadata(1.0))

    Public Property Minimum As Double
        Get
            Return CDbl(GetValue(MinimumProperty))
        End Get
        Set(value As Double)
            SetValue(MinimumProperty, value)
        End Set
    End Property
    Public Property LowerValue As Double
        Get
            Return CDbl(GetValue(LowerValueProperty))
        End Get
        Set(value As Double)
            SetValue(LowerValueProperty, value)
        End Set
    End Property
    Public Property UpperValue As Double
        Get
            Return CDbl(GetValue(UpperValueProperty))
        End Get
        Set(value As Double)
            SetValue(UpperValueProperty, value)
        End Set
    End Property
    Public Property Maximum As Double
        Get
            Return CDbl(GetValue(MaximumProperty))
        End Get
        Set(value As Double)
            SetValue(MaximumProperty, value)
        End Set
    End Property

    Private Sub LowerSlider_ValueChanged(sender As System.Object, e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Double)) Handles LowerSlider.ValueChanged
        UpperSlider.Value = Math.Max(UpperSlider.Value, LowerSlider.Value)
    End Sub

    Private Sub UpperSlider_ValueChanged(sender As System.Object, e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Double)) Handles UpperSlider.ValueChanged
        LowerSlider.Value = Math.Min(UpperSlider.Value, LowerSlider.Value)
    End Sub
End Class

Hallo Liebe Community,

ich hab es jetzt geschafft einen funktionierenden RangeSlider auf die Beine zu stellen.

Meine Frage an dieser Stelle wie kann ich am besten das umsetzen was im Bild zu sehen ist.

Man kann Von und Bis einstellen sowie ein Intervall wie oft das ganze in diesem Zeitraum erfüllt werden soll.

Und dann soll dieses Intervall in dem Bereich Von und Bis dargestellt werden.

D.h. es soll automatisch z.B. solche Striche wie im Bild erstellt werden anhand der Zeitspanne die zwischen Von und Bis gegeben ist.

Diese Striche müssen gleichzeitig auch noch an die echten Uhrzeiten platziert werden die auf dem RangeSlider gegeben ist.

Hat jemand eine Idee? Mir fällt da leider garnichts zu ein 😕

Grüße

Hi _Cashisclay,

deine Anforderungen sind noch sehr wage formuliert. Was genau heißt denn "wie oft das ganze in diesem Zeitraum erfüllt werden soll" oder "an die echten Uhrzeiten platziert"? Eigentlich solltest du dir zuerst überlegen, an welchen Positionen die Markierungen gezeichnet werden sollen, und welchen Mindest- und Maximal-Abstand sie voneinander haben sollen. Dann brauchst du das Ganze nur noch in einer Schleife abarbeiten und alle Markierungen zeichnen.

Christian

Hallo MrSparkle,

also folgendes : Ich habe mir dieses Steuerelement gebaut den RangeSlider jetzt soll folgende funktionalität hinzukommen.

Wenn eine Zeitspanne gegeben ist (Von - Bis) und dazu ein Intervall wie oft dieser Dienst (Von - Bis) in diesem Zeitraum ausgeführt werden soll, soll ermittelt werden wie oft dieses Intervall in diese Zeitspanne hinein passt, um dann auf der TimeLine zwischen den Abständen (Von - Bis) das Intervall exakt auf der TimeLine zu platzieren

Beispiel : 5 Uhr - 6 Uhr (Intervall 5 Minuten) 5:05 Strich, 5:10 Strich, 5:15 Streich usw.

Hat jemand eine Idee wie ich vom Thumb des Sliders die exakte Position bekomme?

Hallo _Cashisclay,

würden dir

TickFrequency="..."

,

TickPlacement="Both"

und

IsSnapToTickEnabled="True"

weiterhelfen?

Grüße

Ezio

Nein es sollen solche Teilstriche selber gezeichnet werden zu einem vorgegebenen Intervall was sich nur zwischen Von und Bis befindet 😕