Zum Inhalt
Kuonen.UI

Slider

Ein Schieberegler: Druck auf die Schiene setzt den Wert dorthin und zieht weiter, Pfeiltasten gehen um SmallChange, Bild auf/ab um LargeChange, Pos1/Ende an die Grenzen. Teilstriche mit TickPlacement, Einrasten mit IsSnapToTickEnabled; senkrecht liegt das Minimum unten.

Vorführung: SliderVorführung: Slider

KXAML

SliderSeite.kxaml
<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.SliderVorfuehrung"
            Spacing="8">
  <!-- Frei, 0 bis 100; Pfeiltasten um 1, Bild auf/ab um 10. Maximum vor Value: der Wert wird gegen die Grenzen begrenzt. -->
  <Slider Maximum="100" Value="40" SmallChange="1" LargeChange="10" Width="320" HorizontalAlignment="Left" ValueChanged="Frei_ValueChanged" />
  <TextBlock x:Name="FreiWert" Text="Wert: 40" />
  <!-- Mit Teilstrichen alle 10 und Einrasten. -->
  <Slider Maximum="100" Value="30" TickFrequency="10" TickPlacement="BottomRight" IsSnapToTickEnabled="True"
          Width="320" HorizontalAlignment="Left" ValueChanged="Raster_ValueChanged" />
  <TextBlock x:Name="RasterWert" Text="Eingerastet: 30" />
  <TextBlock Text="Senkrecht, umgekehrt (Minimum oben), deaktiviert" FontWeight="SemiBold" />
  <!-- Senkrecht, umgekehrt und deaktiviert. -->
  <StackPanel Orientation="Horizontal" Spacing="32">
    <Slider Orientation="Vertical" Maximum="10" Value="7" Height="140" TickFrequency="1" TickPlacement="Both" />
    <Slider Orientation="Vertical" Maximum="10" Value="7" Height="140" IsDirectionReversed="True" />
    <Slider Orientation="Vertical" Maximum="10" Value="4" Height="140" IsEnabled="False" />
  </StackPanel>
</StackPanel>
SliderSeite.kxaml.cs
using System.Globalization;
using Kuonen.UI;
using Kuonen.UI.Controls;

namespace Kuonen.UI.Galerie.Seiten;

public sealed partial class SliderSeite
{
    protected override Func<UIElement>? KxamlFabrik => () => new SliderVorfuehrung();
}

/// <summary>KXAML-Fassung der Slider-Seite: der Baum steht in SliderSeite.kxaml, hier nur das Verhalten.</summary>
public sealed partial class SliderVorfuehrung
{
    public SliderVorfuehrung() => InitializeComponent();

    private static string Zahl(double w) => w.ToString("0.#", CultureInfo.InvariantCulture);

    private void Frei_ValueChanged(object? sender, WertGeaendertArgs e) => FreiWert.Text = "Wert: " + Zahl(e.Neu);

    private void Raster_ValueChanged(object? sender, WertGeaendertArgs e) => RasterWert.Text = "Eingerastet: " + Zahl(e.Neu);
}

C#

SliderSeite.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="Slider"/>.</summary>
public sealed partial class SliderSeite : GalerieSeite
{
    public override string Titel => "Slider";

    public override string Beschreibung =>
        "Ein Schieberegler: Druck auf die Schiene setzt den Wert dorthin und zieht weiter, Pfeiltasten gehen um "
        + "SmallChange, Bild auf/ab um LargeChange, Pos1/Ende an die Grenzen. Teilstriche mit TickPlacement, "
        + "Einrasten mit IsSnapToTickEnabled; senkrecht liegt das Minimum unten.";

    public override string Stichworte => "Schieberegler Regler Wert Teilstriche TickBar einrasten senkrecht IsDirectionReversed";

    public override string Datei => nameof(SliderSeite);

    public override UIElement Baue()
    {
        static string Zahl(double w) => w.ToString("0.#", CultureInfo.InvariantCulture);

        // Frei, 0 bis 100; Pfeiltasten um 1, Bild auf/ab um 10.
        var frei = new Slider { Maximum = 100, Value = 40, SmallChange = 1, LargeChange = 10, Width = 320, HorizontalAlignment = HorizontalAlignment.Left };
        var freiWert = new TextBlock { Text = "Wert: 40" };
        frei.ValueChanged += (_, e) => freiWert.Text = "Wert: " + Zahl(e.Neu);

        // Mit Teilstrichen alle 10 und Einrasten.
        var raster = new Slider
        {
            Maximum = 100, Value = 30, TickFrequency = 10, TickPlacement = TickPlacement.BottomRight, IsSnapToTickEnabled = true,
            Width = 320, HorizontalAlignment = HorizontalAlignment.Left,
        };
        var rasterWert = new TextBlock { Text = "Eingerastet: 30" };
        raster.ValueChanged += (_, e) => rasterWert.Text = "Eingerastet: " + Zahl(e.Neu);

        // Senkrecht, umgekehrt und deaktiviert.
        var senkrecht = new Slider { Orientation = Orientation.Vertical, Maximum = 10, Value = 7, Height = 140, TickFrequency = 1, TickPlacement = TickPlacement.Both };
        var umgekehrt = new Slider { Orientation = Orientation.Vertical, Maximum = 10, Value = 7, Height = 140, IsDirectionReversed = true };
        var aus = new Slider { Orientation = Orientation.Vertical, Maximum = 10, Value = 4, Height = 140, IsEnabled = false };
        var spalten = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 32 };
        spalten.Children.Add(senkrecht);
        spalten.Children.Add(umgekehrt);
        spalten.Children.Add(aus);

        var seite = new StackPanel { Spacing = 8 };
        seite.Children.Add(frei);
        seite.Children.Add(freiWert);
        seite.Children.Add(raster);
        seite.Children.Add(rasterWert);
        seite.Children.Add(new TextBlock { Text = "Senkrecht, umgekehrt (Minimum oben), deaktiviert", FontWeight = 600 });
        seite.Children.Add(spalten);
        return seite;
    }
}