RangeSlider
Ein Schieberegler mit zwei Griffen: ein Preisbereich von 0 bis 1000 im Raster 50 mit Mindestabstand 100 (die Griffe kreuzen nie, ein Druck auf die Bahn nimmt den näheren), daneben senkrecht ein Temperaturbereich. Jeder Griff ist ein Tab-Halt: Pfeile, Bild auf/ab, Pos1 und Ende.


KXAML
RangeSliderSeite.kxaml
<StackPanel xmlns="https://ui.kuonen.org/kxaml"
xmlns:x="https://ui.kuonen.org/kxaml/x"
x:Class="Kuonen.UI.Galerie.Seiten.RangeSliderVorfuehrung"
Spacing="8">
<!-- Die Namen für den Bildschirmleser setzt das Code-Behind. -->
<TextBlock Text="Preis (Raster 50, Abstand 100)" FontWeight="SemiBold" />
<RangeSlider x:Name="Preis" Width="320" HorizontalAlignment="Left" Maximum="1000" LowerValue="200" UpperValue="600" TickFrequency="50"
IsSnapToTickEnabled="True" TickPlacement="BottomRight" MinSeparation="100" SmallChange="50" LargeChange="100"
ValuesChanged="Preis_ValuesChanged" />
<TextBlock Text="Temperatur (senkrecht)" FontWeight="SemiBold" />
<RangeSlider x:Name="Temperatur" Height="160" HorizontalAlignment="Left" Orientation="Vertical" Minimum="-20" Maximum="40" LowerValue="18" UpperValue="24"
ValuesChanged="Temperatur_ValuesChanged" />
<TextBlock x:Name="Meldung" Text="Bereit." />
</StackPanel>RangeSliderSeite.kxaml.cs
using Kuonen.UI;
using Kuonen.UI.Controls;
namespace Kuonen.UI.Galerie.Seiten;
public sealed partial class RangeSliderSeite
{
protected override Func<UIElement>? KxamlFabrik => () => new RangeSliderVorfuehrung();
}
/// <summary>KXAML-Fassung der RangeSlider-Seite: der Baum steht in RangeSliderSeite.kxaml, hier das Verhalten.</summary>
public sealed partial class RangeSliderVorfuehrung
{
private readonly bool _bereit;
public RangeSliderVorfuehrung()
{
InitializeComponent();
Preis.Automation.Name = "Preis";
Temperatur.Automation.Name = "Temperatur";
_bereit = true; // die Startwerte melden nicht (wie in der C#-Fassung, die erst danach abonniert)
}
private void Preis_ValuesChanged(object? sender, RangeSliderValuesChangedEventArgs e)
{
if (_bereit) Meldung.Text = RangeSliderSeite.Preis(Preis);
}
private void Temperatur_ValuesChanged(object? sender, RangeSliderValuesChangedEventArgs e)
{
if (_bereit) Meldung.Text = RangeSliderSeite.Temperatur(Temperatur);
}
}C#
RangeSliderSeite.cs
using System.Globalization;
using Kuonen.UI;
using Kuonen.UI.Controls;
using Kuonen.UI.Layout;
namespace Kuonen.UI.Galerie.Seiten;
/// <summary>Galerie-Seite: <see cref="RangeSlider"/>.</summary>
public sealed partial class RangeSliderSeite : GalerieSeite
{
public override string Titel => "RangeSlider";
public override string Beschreibung =>
"Ein Schieberegler mit zwei Griffen: ein Preisbereich von 0 bis 1000 im Raster 50 mit Mindestabstand 100 (die Griffe kreuzen nie, ein Druck auf die "
+ "Bahn nimmt den näheren), daneben senkrecht ein Temperaturbereich. Jeder Griff ist ein Tab-Halt: Pfeile, Bild auf/ab, Pos1 und Ende.";
public override string Stichworte => "Bereich Bereichsregler Von Bis Preis Filter Doppelregler RangeSlider LowerValue UpperValue MinSeparation";
public override string Datei => nameof(RangeSliderSeite);
internal static string Preis(RangeSlider r) =>
string.Create(CultureInfo.InvariantCulture, $"Preis: {r.LowerValue:0} bis {r.UpperValue:0} Franken");
internal static string Temperatur(RangeSlider r) =>
string.Create(CultureInfo.InvariantCulture, $"Temperatur: {r.LowerValue:0} bis {r.UpperValue:0} Grad");
public override UIElement Baue()
{
var meldung = new TextBlock { Text = "Bereit." };
var preis = new RangeSlider
{
Width = 320, HorizontalAlignment = HorizontalAlignment.Left, Maximum = 1000, LowerValue = 200, UpperValue = 600, TickFrequency = 50,
IsSnapToTickEnabled = true, TickPlacement = TickPlacement.BottomRight, MinSeparation = 100, SmallChange = 50, LargeChange = 100,
};
preis.Automation.Name = "Preis";
preis.ValuesChanged += (_, _) => meldung.Text = Preis(preis);
var temperatur = new RangeSlider
{
Height = 160, HorizontalAlignment = HorizontalAlignment.Left, Orientation = Orientation.Vertical, Minimum = -20, Maximum = 40, LowerValue = 18,
UpperValue = 24,
};
temperatur.Automation.Name = "Temperatur";
temperatur.ValuesChanged += (_, _) => meldung.Text = Temperatur(temperatur);
return new StackPanel
{
Spacing = 8,
Children =
{
new TextBlock { Text = "Preis (Raster 50, Abstand 100)", FontWeight = 600 },
preis,
new TextBlock { Text = "Temperatur (senkrecht)", FontWeight = 600 },
temperatur,
meldung,
},
};
}
}