Udostępnij przez

Sliders

Suwak to kontrolka, która umożliwia użytkownikowi wybranie z zakresu wartości przez przeniesienie kontrolki kciuka wzdłuż ścieżki.

Kontrolka suwaka

Czy jest to właściwa kontrola?

Użyj suwaka, jeśli chcesz, aby użytkownicy mogli ustawiać zdefiniowane, ciągłe wartości (takie jak objętość lub jasność) lub zakres wartości dyskretnych (takich jak ustawienia rozdzielczości ekranu).

Suwak jest dobrym wyborem, gdy wiesz, że użytkownicy myślą o wartości jako wartości względnej, a nie wartości liczbowej. Na przykład użytkownicy myślą o ustawieniu głośności audio na niski lub średni — nie o ustawieniu wartości na 2 lub 5.

Nie używaj suwaka dla ustawień binarnych. Zamiast tego użyj przełącznika przełącznika .

Poniżej przedstawiono kilka dodatkowych czynników, które należy wziąć pod uwagę podczas podejmowania decyzji, czy należy użyć suwaka:

  • Czy ustawienie wydaje się być wartością relatywną? Jeśli nie, użyj przycisków radiowych lub pola listy .
  • Czy ustawienie jest dokładną, znaną wartością liczbową? Jeśli tak, użyj liczbowego pola tekstowego .
  • Czy użytkownik skorzysta z natychmiastowej opinii na temat wpływu zmian ustawień? Jeśli tak, użyj suwaka. Na przykład użytkownicy mogą łatwiej wybrać kolor, natychmiast wyświetlając efekt zmian w odcieniach, nasyceniu lub jaskrawości.
  • Czy ustawienie ma zakres czterech lub więcej wartości? Jeśli nie, użyj przycisków radiowych.
  • Czy użytkownik może zmienić wartość? Suwaki są przeznaczone do interakcji użytkownika. Jeśli użytkownik nigdy nie może zmienić wartości, zamiast tego użyj tekstu tylko do odczytu.

Jeśli decydujesz się między suwakiem a polem tekstowym liczbowym, użyj pola tekstowego liczbowego, jeśli:

  • Miejsce na ekranie jest ciasne.
  • Użytkownik prawdopodobnie preferuje używanie klawiatury.

Użyj suwaka, jeśli:

  • Użytkownicy skorzystają z natychmiastowej informacji zwrotnej.

Rekomendacje

  • Ustaw rozmiar kontrolki, aby użytkownicy mogli łatwo ustawić odpowiednią wartość. W przypadku ustawień z wartościami dyskretnymi upewnij się, że użytkownik może łatwo wybrać dowolną wartość przy użyciu myszy. Upewnij się, że punkty końcowe suwaka zawsze mieszczą się w granicach widoku.
  • Prześlij natychmiastową opinię podczas lub po dokonaniu wyboru przez użytkownika (gdy jest to praktyczne). Na przykład dźwięk kontrolki głośności systemu Windows sygnalizuje wybraną głośność.
  • Użyj etykiet, aby wyświetlić zakres wartości. Wyjątek: jeśli suwak jest zorientowany w pionie, a górna etykieta to Maksymalna, Wysoka, Więcej lub równoważna, możesz pominąć inne etykiety, ponieważ znaczenie jest jasne.
  • Wyłącz wszystkie skojarzone etykiety lub wizualizacje opinii po wyłączeniu suwaka.
  • Podczas ustawiania kierunku przepływu i/lub orientacji suwaka należy wziąć pod uwagę kierunek tekstu. Skrypt przepływa od lewej do prawej w niektórych językach i od prawej do lewej w innych.
  • Nie używaj suwaka jako wskaźnika postępu.
  • Nie zmieniaj rozmiaru kciuka suwaka z rozmiaru domyślnego.
  • Nie twórz suwaka ciągłego, jeśli zakres wartości jest duży, a użytkownicy najprawdopodobniej wybierzą jedną z kilku reprezentatywnych wartości z zakresu. Zamiast tego użyj tych wartości jako jedyny dozwolonych kroków. Na przykład, jeśli wartość czasu może wynosić do 1 miesiąca, ale użytkownicy potrzebują wybierać spośród 1 minuty, 1 godziny, 1 dnia lub 1 miesiąca, wtedy należy utworzyć suwak z czterema punktami.

Dodatkowe wskazówki dotyczące użycia

Wybieranie odpowiedniego układu: poziome lub pionowe

Suwak można orientować w poziomie lub w pionie. Skorzystaj z tych wytycznych, aby określić, który układ ma być używany.

  • Użyj orientacji naturalnej. Jeśli na przykład suwak reprezentuje rzeczywistą wartość, która jest zwykle wyświetlana w pionie (np. temperatura), użyj orientacji pionowej.
  • Jeśli kontrolka jest używana do wyszukiwania w nośniku, na przykład w aplikacji wideo, użyj orientacji poziomej.
  • W przypadku korzystania z suwaka na stronie, które można przesuwać w jednym kierunku (w poziomie lub w pionie), użyj innej orientacji suwaka niż kierunek przesuwania. W przeciwnym razie użytkownicy mogą przesuwać suwak i zmieniać jego wartość przypadkowo podczas próby przesunięcia strony.
  • Jeśli nadal nie masz pewności, której orientacji użyć, użyj tej, która najlepiej pasuje do układu strony.

Kierunek zakresu

Kierunek zakresu to kierunek przesuwania suwaka po przesuwaniu go z bieżącej wartości do maksymalnej wartości.

  • W przypadku suwaka pionowego umieść największą wartość w górnej części suwaka, niezależnie od kierunku odczytu. Na przykład dla suwaka głośności zawsze umieść ustawienie maksymalnego głośności w górnej części suwaka. W przypadku innych typów wartości (takich jak dni tygodnia) postępuj zgodnie z kierunkiem czytania strony.
  • W przypadku stylów poziomych umieść niższą wartość po lewej stronie suwaka dla układu strony od lewej do prawej i po prawej stronie w przypadku układu strony od prawej do lewej.
  • Jednym wyjątkiem od poprzednich wskazówek jest wyszukiwanie pasków wyszukiwania multimediów: zawsze umieszczaj niższą wartość po lewej stronie suwaka.

Kroki i znaczniki

  • Użyj punktów kroków, jeśli nie chcesz, aby suwak zezwalał na dowolne wartości z zakresu od minimum do maksymalnego. Jeśli na przykład użyjesz suwaka, aby określić liczbę biletów filmowych do zakupu, nie zezwalaj na wartości zmiennoprzecinkowe. Ustaw wartość kroku na 1.
  • Jeśli określisz kroki (znane również jako punkty przyciągania), upewnij się, że ostatni krok jest dopasowany do maksymalnej wartości suwaka.
  • Użyj znaczników, jeśli chcesz pokazać użytkownikom lokalizację głównych lub znaczących wartości. Na przykład suwak sterujący powiększeniem może mieć znaczniki dla 50%, 100%i 200%.
  • Pokaż znaczniki, gdy użytkownicy muszą znać przybliżoną wartość ustawienia.
  • Pokaż znaczniki i etykietę wartości, gdy użytkownicy muszą znać dokładną wartość wybranego ustawienia bez interakcji z kontrolką. W przeciwnym razie mogą użyć dymka wartości, aby wyświetlić dokładną wartość.
  • Zawsze pokazuj znaczniki, gdy punkty kroku nie są oczywiste. Jeśli na przykład suwak ma szerokość 200 pikseli i ma 200 punktów zaczepienia, możesz ukryć znaczniki, ponieważ użytkownicy nie zauważą efektu przyciągania. Ale jeśli istnieje tylko 10 punktów przyciągania, pokaż znaczniki wyboru.

Etykiety

  • etykiet suwaka

    Etykieta suwaka wskazuje, do czego służy suwak.

    • Użyj etykiety bez końcowej interpunkcji (jest to konwencja dla wszystkich etykiet kontrolek).
    • Umieść etykiety nad suwakiem, gdy suwak znajduje się w sytuacji, gdy większość jego etykiet znajduje się nad elementami sterującymi.
    • Umieść etykiety po bokach, gdy suwak znajduje się w układzie, który umieszcza większość swoich etykiet z boku elementów sterujących.
    • Unikaj umieszczania etykiet poniżej suwaka, ponieważ palec użytkownika może zasłonić etykietę, gdy użytkownik dotyka suwaka.

  • Etykiety zakresu

    Etykiety zakresu lub wypełnienia opisują minimalne i maksymalne wartości suwaka.

    • Oznacz dwa końce zakresu suwaka, chyba że orientacja pionowa sprawia, że jest to niepotrzebne.
    • Użyj tylko jednego słowa, jeśli to możliwe, dla każdej etykiety.
    • Nie używaj końcowej interpunkcji.
    • Upewnij się, że te etykiety są opisowe i równoległe. Przykłady: maksimum/minimum, więcej/mniej, niski/wysoki, miękki/głośny.

  • etykiety wartości

    Etykieta wartości wyświetla bieżącą wartość suwaka.

    • Jeśli potrzebujesz etykiety wartości, wyświetl ją poniżej suwaka.
    • Wyśrodkuj tekst względem kontrolki i uwzględnij jednostki (takie jak piksele).
    • Ponieważ kciuk suwaka jest pokrywany podczas czyszczenia, rozważ pokazanie bieżącej wartości w inny sposób z etykietą lub inną wizualizacją. Suwak do zmiany rozmiaru tekstu wyświetla przykładowy tekst o odpowiednim rozmiarze obok suwaka.

Wygląd i interakcja

Suwak składa się ze ścieżki i kciuka. Pasek (który opcjonalnie może pokazywać różne style znaczników) reprezentuje zakres wprowadzanych wartości. Kciuk jest selektorem, który użytkownik może ustawić, naciskając ścieżkę lub przesuwając w przód i w tył po niej.

Suwak ma duży obszar dotykowy. Aby zachować ułatwienia dostępu dotykowego, suwak powinien być umieszczony wystarczająco daleko od krawędzi ekranu.

Podczas projektowania suwaka niestandardowego należy rozważyć sposoby prezentowania wszystkich niezbędnych informacji użytkownikowi z jak najmniejszym bałaganem. Użyj etykiety wartości, jeśli użytkownik musi znać jednostki, aby zrozumieć ustawienie; znajdź kreatywne sposoby reprezentowania tych wartości graficznie. Suwak sterujący głośnością może na przykład wyświetlać grafikę głośnika bez fal dźwiękowych na minimalnym końcu suwaka oraz grafikę głośnika z falami dźwiękowymi na maksymalnym końcu.

Przykłady

Suwak ze znacznikami co 10 punktów z przedziału od 0 do 100.

suwak z znacznikami

Utwórz suwak

Otwórz aplikację Galeria WinUI 3 i zobacz suwak w akcji

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

Poniżej przedstawiono sposób tworzenia suwaka w języku XAML.

<Slider x:Name="volumeSlider" Header="Volume" Width="200"
        ValueChanged="Slider_ValueChanged"/>

Poniżej przedstawiono sposób tworzenia suwaka w kodzie.

Slider volumeSlider = new Slider();
volumeSlider.Header = "Volume";
volumeSlider.Width = 200;
volumeSlider.ValueChanged += Slider_ValueChanged;

// Add the slider to a parent container in the visual tree.
stackPanel1.Children.Add(volumeSlider);

Możesz uzyskać i ustawić wartość suwaka z właściwości Value. Aby odpowiedzieć na zmiany wartości, możesz użyć powiązania danych, aby powiązać właściwość Value lub obsłużyć zdarzenie ValueChanged.

private void Slider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    Slider slider = sender as Slider;
    if (slider != null)
    {
        media.Volume = slider.Value;
    }
}

UwP i WinUI 2

Ważne

Informacje i przykłady w tym artykule są zoptymalizowane dla aplikacji korzystających z Windows App SDK oraz WinUI 3, ale generalnie mają zastosowanie także w aplikacjach UWP używających WinUI 2. Zobacz dokumentację interfejsu API platformy UWP, aby uzyskać informacje i przykłady dotyczące platformy.

Ta sekcja zawiera informacje potrzebne do używania kontrolki w aplikacji platformy UWP lub WinUI 2.

API dla tej kontrolki istnieją w ramach przestrzeni nazw Windows.UI.Xaml.Controls.

Zalecamy użycie najnowszej wersji WinUI 2 , aby uzyskać najbardziej aktualne style i szablony dla wszystkich kontrolek. Interfejs WinUI 2.2 lub nowszy zawiera nowy szablon dla tej kontrolki, który używa zaokrąglonych narożników. Aby uzyskać więcej informacji, zobacz Zaokrąglenie narożnika.

  • Last updated on