Slider – suwak

Czym jest Slider?

Slider to suwak – kontrolka, w której użytkownik wybiera wartość liczbową, przesuwając uchwyt wzdłuż linii. Znasz go z regulacji głośności, jasności ekranu, czy ustawień w grach komputerowych.

<Slider x:Name="sldGlosnosc"
        Width="200" />
<!-- Domyślnie: Minimum=0, Maximum=10 -->

Minimum, Maximum, Value

Trzy najważniejsze właściwości Slidera określają jego zakres i aktualną wartość.

<!-- Głośność: 0-100, startowo 50 -->
<Slider x:Name="sldGlosnosc"
        Minimum="0"
        Maximum="100"
        Value="50"
        Width="250" />

<!-- Temperatura: -20 do 40 stopni -->
<Slider x:Name="sldTemperatura"
        Minimum="-20"
        Maximum="40"
        Value="20"
        Width="250" />

<!-- Ocena gwiazdkowa: 1-5 -->
<Slider x:Name="sldOcena"
        Minimum="1"
        Maximum="5"
        Value="3"
        Width="150" />

Orientation – kierunek suwaka

Domyślnie Slider jest poziomy. Możesz go obrócić na pionowy ustawiając Orientation="Vertical" – wtedy musisz też zwykle ustawić Height zamiast Width.

<!-- Poziomy (domyślny) -->
<Slider Orientation="Horizontal"
        Minimum="0" Maximum="100"
        Width="250" />

<!-- Pionowy – jak korektor graficzny w odtwarzaczu muzyki -->
<Slider Orientation="Vertical"
        Minimum="0" Maximum="100"
        Height="200" />

Znaczki skali – TickFrequency

TickFrequency ustawia odstęp między małymi znaczkami (kreseczkami) widocznymi na suwaku – pomagają one wizualnie ocenić wybraną wartość bez patrzenia na liczbę.

TickPlacement – gdzie pokazać znaczki

<Slider x:Name="sldGlosnosc"
        Minimum="0"
        Maximum="100"
        Value="50"
        TickFrequency="10"
        TickPlacement="BottomRight"
        Width="250" />
<!-- Znaczki widoczne przy 0, 10, 20, 30 ... 100 -->

IsSnapToTickEnabled – przyciąganie do znaczków

Sam TickFrequency tylko rysuje znaczki – nie ogranicza wartości. Żeby suwak faktycznie skakał tylko po znaczkach (np. tylko wielokrotności 10), potrzebujesz dodatkowo IsSnapToTickEnabled="True".

<Slider x:Name="sldGlosnosc"
        Minimum="0"
        Maximum="100"
        Value="50"
        TickFrequency="10"
        TickPlacement="BottomRight"
        IsSnapToTickEnabled="True"
        Width="250" />
<!-- Teraz Value będzie wyłącznie wielokrotnością 10:
     0, 10, 20, 30 ... 100 – nigdy np. 47 -->

<Slider x:Name="sldOcena"
        Minimum="1"
        Maximum="5"
        Value="3"
        TickFrequency="1"
        TickPlacement="BottomRight"
        IsSnapToTickEnabled="True"
        Width="180" />
<!-- Wartości: tylko 1, 2, 3, 4 lub 5 -->

Zdarzenie ValueChanged

ValueChanged odpala się za każdym razem gdy zmienia się wartość suwaka – podczas przesuwania, kliknięcia na linii, a także po ustawieniu wartości z kodu C#.

<Slider x:Name="sldGlosnosc"
        Minimum="0"
        Maximum="100"
        Value="50"
        Width="250"
        ValueChanged="sldGlosnosc_ValueChanged" />

private void sldGlosnosc_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    // e.NewValue – nowa wartość, e.OldValue – wartość przed zmianą
    double nowaWartosc = e.NewValue;

    lblGlosnosc.Text = $"Głośność: {nowaWartosc:F0}%";
}

Powiązanie z TextBlock na żywo

Najczęstszy wzorzec użycia Slidera: pokazujesz aktualną wartość liczbową obok suwaka, żeby użytkownik widział precyzyjnie co właśnie wybrał.

<StackPanel>
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="Głośność: " VerticalAlignment="Center" />
        <TextBlock x:Name="lblWartosc"
                   Text="50%"
                   FontWeight="Bold"
                   Foreground="SteelBlue"
                   VerticalAlignment="Center" />
    </StackPanel>

    <Slider x:Name="sldGlosnosc"
            Minimum="0"
            Maximum="100"
            Value="50"
            Width="250"
            ValueChanged="sldGlosnosc_ValueChanged" />
</StackPanel>

private void sldGlosnosc_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    if (lblWartosc == null) return;

    lblWartosc.Text = $"{e.NewValue:F0}%";
}

Możesz też zrobić odwrotną synchronizację – TextBox jako edytowalne pole, które aktualizuje Slider:

private bool _aktualizujeProgramowo = false;

private void sldGlosnosc_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    if (_aktualizujeProgramowo) return;
    _aktualizujeProgramowo = true;
    txtGlosnosc.Text = $"{e.NewValue:F0}";
    _aktualizujeProgramowo = false;
}

private void txtGlosnosc_TextChanged(object sender, TextChangedEventArgs e)
{
    if (_aktualizujeProgramowo) return;

    if (double.TryParse(txtGlosnosc.Text, out double wartosc))
    {
        _aktualizujeProgramowo = true;
        sldGlosnosc.Value = wartosc;
        _aktualizujeProgramowo = false;
    }
}

Kroki – SmallChange i LargeChange

Te właściwości kontrolują o ile zmieni się wartość Slidera po naciśnięciu klawiszy strzałek albo kliknięciu na linię suwaka (bez przesuwania uchwytu).

<Slider x:Name="sldGlosnosc"
        Minimum="0"
        Maximum="100"
        Value="50"
        SmallChange="1"     <!-- strzałka: +/- 1 -->
        LargeChange="10"   <!-- klik na linię: +/- 10 -->
        Width="250" />

Slider w C#

// Odczyt aktualnej wartości
double glosnosc = sldGlosnosc.Value;

// Ustawienie wartości z kodu (np. po wczytaniu zapisanych ustawień)
sldGlosnosc.Value = 75;

// Zmiana zakresu w czasie działania programu
sldGlosnosc.Minimum = 0;
sldGlosnosc.Maximum = 200;

// Reset do wartości minimalnej
sldGlosnosc.Value = sldGlosnosc.Minimum;

// Konwersja na int, gdy potrzebujesz liczby całkowitej
int glosnoscInt = (int)sldGlosnosc.Value;

Praktyczne przykłady

Regulacja głośności z ikoną

<StackPanel Orientation="Horizontal" Margin="10">
    <TextBlock x:Name="lblIkona"
               Text="🔊"
               FontSize="18"
               Margin="0,0,8,0"
               VerticalAlignment="Center" />
    <Slider x:Name="sldGlosnosc"
            Minimum="0" Maximum="100" Value="60"
            Width="150"
            VerticalAlignment="Center"
            ValueChanged="sldGlosnosc_ValueChanged" />
    <TextBlock x:Name="lblWartosc"
               Text="60%"
               Width="40"
               Margin="8,0,0,0"
               VerticalAlignment="Center" />
</StackPanel>

private void sldGlosnosc_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    if (lblWartosc == null) return;

    lblWartosc.Text = $"{e.NewValue:F0}%";

    // Zmieniamy ikonę głośnika w zależności od wartości
    if (e.NewValue == 0)
        lblIkona.Text = "🔇";
    else if (e.NewValue < 50)
        lblIkona.Text = "🔉";
    else
        lblIkona.Text = "🔊";
}

Mieszacz kolorów RGB

Trzy slidery (Red, Green, Blue) sterujące kolorem tła – klasyczne ćwiczenie łączące Slider z manipulacją kolorami.

<StackPanel Margin="20">

    <TextBlock Text="Red" />
    <Slider x:Name="sldRed"   Minimum="0" Maximum="255" Value="128" ValueChanged="Kolor_ValueChanged" />

    <TextBlock Text="Green" Margin="0,8,0,0" />
    <Slider x:Name="sldGreen" Minimum="0" Maximum="255" Value="128" ValueChanged="Kolor_ValueChanged" />

    <TextBlock Text="Blue" Margin="0,8,0,0" />
    <Slider x:Name="sldBlue"  Minimum="0" Maximum="255" Value="128" ValueChanged="Kolor_ValueChanged" />

    <Border x:Name="borderKolor"
            Height="80"
            Margin="0,16,0,0"
            CornerRadius="8" />

    <TextBlock x:Name="lblKodKoloru"
               Text="#808080"
               HorizontalAlignment="Center"
               Margin="0,8,0,0" />
</StackPanel>

private void Kolor_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    if (borderKolor == null) return;

    byte r = (byte)sldRed.Value;
    byte g = (byte)sldGreen.Value;
    byte b = (byte)sldBlue.Value;

    Color kolor = Color.FromRgb(r, g, b);
    borderKolor.Background = new SolidColorBrush(kolor);

    lblKodKoloru.Text = $"#{r:X2}{g:X2}{b:X2}";
}

Częste błędy

❌ Błąd 1: TickFrequency bez IsSnapToTickEnabled

<Slider TickFrequency="10"
        TickPlacement="BottomRight" />
<!-- Znaczki na 0,10,20...
     ale wartość wciąż może być
     np. 23.7! -->

<Slider TickFrequency="10"
        TickPlacement="BottomRight"
        IsSnapToTickEnabled="True" />

❌ Błąd 2: ValueChanged odpalający się przed inicjalizacją kontrolek

private void sld_ValueChanged(...)
{
    // lblWartosc może być null
    // gdy XAML ustawia Value="50"
    // podczas tworzenia okna!
    lblWartosc.Text = "...";
}

private void sld_ValueChanged(...)
{
    if (lblWartosc == null) return;
    lblWartosc.Text = "...";
}

❌ Błąd 3: Rzutowanie double na int bez przemyślenia

int wartosc = (int)sldOcena.Value;
// Jeśli Value = 3.9, wynik to 3!
// Rzutowanie (int) zawsze
// OBCINA, nie zaokrągla

int wartosc = (int)Math.Round(sldOcena.Value);
// 3.9 zaokrągli się do 4

// Lub po prostu użyj
// IsSnapToTickEnabled="True",
// żeby Value było zawsze całkowite

❌ Błąd 4: Zapomniany format liczby w TextBlock

lblWartosc.Text = $"{e.NewValue}%";
// Wyświetli np. "47.36281%" –
// nieczytelne dla użytkownika

lblWartosc.Text = $"{e.NewValue:F0}%";
// Wyświetli "47%"

Zadania do wykonania