Zum Inhalt
Kuonen.UI

ScrollBar

Die Bildlaufleiste als eigenes Control: Pfeile (Zeile, SmallChange), Klick auf die Bahn (Seite, LargeChange, gedrückt wiederholt) und Ziehen am Griff. ViewportSize bestimmt die Grösse des Griffs.

Vorführung: ScrollBarVorführung: ScrollBar

KXAML

ScrollBarSeite.kxaml
<StackPanel xmlns="https://ui.kuonen.org/kxaml"
            xmlns:x="https://ui.kuonen.org/kxaml/x"
            x:Class="Kuonen.UI.Galerie.Seiten.ScrollBarVorfuehrung"
            Spacing="12">
  <!-- Waagrecht: 0 bis 100, Griff für ein Fünftel des Bereichs. -->
  <ScrollBar Orientation="Horizontal" Minimum="0" Maximum="100" ViewportSize="25" SmallChange="1" LargeChange="25"
             Width="360" HorizontalAlignment="Left" ValueChanged="Waagrecht_ValueChanged" />
  <TextBlock x:Name="Wert" Text="Wert: 0" />
  <!-- Senkrecht: kleiner Griff (grosser Bereich), daneben eine deaktivierte Leiste. -->
  <StackPanel Orientation="Horizontal" Spacing="24">
    <ScrollBar Orientation="Vertical" Maximum="1000" ViewportSize="50" LargeChange="50" Height="160" ValueChanged="Senkrecht_ValueChanged" />
    <ScrollBar Orientation="Vertical" Maximum="10" Value="4" ViewportSize="3" Height="160" IsEnabled="False" />
    <TextBlock x:Name="SenkrechtWert" Text="Senkrecht: 0" VerticalAlignment="Center" />
  </StackPanel>
</StackPanel>
ScrollBarSeite.kxaml.cs
using System.Globalization;
using Kuonen.UI;
using Kuonen.UI.Controls;

namespace Kuonen.UI.Galerie.Seiten;

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

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

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

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

    private void Senkrecht_ValueChanged(object? sender, WertGeaendertArgs e) => SenkrechtWert.Text = "Senkrecht: " + Zahl(e.Neu);
}

C#

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

    public override string Beschreibung =>
        "Die Bildlaufleiste als eigenes Control: Pfeile (Zeile, SmallChange), Klick auf die Bahn (Seite, LargeChange, "
        + "gedrückt wiederholt) und Ziehen am Griff. ViewportSize bestimmt die Grösse des Griffs.";

    public override string Stichworte => "Bildlaufleiste Leiste Griff Daumen Thumb Bahn Track ViewportSize SmallChange LargeChange";

    public override string Datei => nameof(ScrollBarSeite);

    public override UIElement Baue()
    {
        var wert = new TextBlock { Text = "Wert: 0" };
        static string Zahl(double w) => w.ToString("0.0", CultureInfo.InvariantCulture);

        // Waagrecht: 0 bis 100, Griff für ein Fünftel des Bereichs.
        var waagrecht = new ScrollBar
        {
            Orientation = Orientation.Horizontal, Minimum = 0, Maximum = 100, ViewportSize = 25, SmallChange = 1, LargeChange = 25,
            Width = 360, HorizontalAlignment = HorizontalAlignment.Left,
        };
        waagrecht.ValueChanged += (_, e) => wert.Text = "Wert: " + Zahl(e.Neu);

        // Senkrecht: kleiner Griff (grosser Bereich), daneben eine deaktivierte Leiste.
        var senkrecht = new ScrollBar { Orientation = Orientation.Vertical, Maximum = 1000, ViewportSize = 50, LargeChange = 50, Height = 160 };
        var senkrechtWert = new TextBlock { Text = "Senkrecht: 0", VerticalAlignment = VerticalAlignment.Center };
        senkrecht.ValueChanged += (_, e) => senkrechtWert.Text = "Senkrecht: " + Zahl(e.Neu);
        var aus = new ScrollBar { Orientation = Orientation.Vertical, Maximum = 10, Value = 4, ViewportSize = 3, Height = 160, IsEnabled = false };

        var spalten = new StackPanel { Orientation = Orientation.Horizontal, Spacing = 24 };
        spalten.Children.Add(senkrecht);
        spalten.Children.Add(aus);
        spalten.Children.Add(senkrechtWert);

        var seite = new StackPanel { Spacing = 12 };
        seite.Children.Add(waagrecht);
        seite.Children.Add(wert);
        seite.Children.Add(spalten);
        return seite;
    }
}