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
Weeks of programming can save you hours of planning
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 😕