Zum Inhalt
Kuonen.UI

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.

Vorführung: RangeSliderVorführung: RangeSlider

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,
            },
        };
    }
}