Sliders

Kaydırıcı, kullanıcının parmak denetimini bir parça boyunca hareket ettirerek bir değer aralığından seçim yapmasını sağlayan bir denetimdir.

Doğru kontrol bu mu?

Kullanıcılarınızın tanımlı, bitişik değerler (ses düzeyi veya parlaklık gibi) veya ayrık değerler aralığı (ekran çözünürlüğü ayarları gibi) ayarlayabilmesini istediğinizde kaydırıcı kullanın.

Kaydırıcı, kullanıcıların değeri sayısal bir değer değil de izafi bir miktar olarak düşündüğünü bildiğinizde iyi bir seçimdir. Örneğin, kullanıcılar ses ses düzeyini düşük veya orta olarak ayarlamayı düşünür; değeri 2 veya 5 olarak ayarlamayı düşünmez.

İkili ayarlar için kaydırıcı kullanmayın. Bunun yerine iki durumlu düğme kullanın.

Kaydırıcı kullanıp kullanmamaya karar verirken göz önünde bulundurmanız gereken bazı ek faktörler şunlardır:

• Bu ayar göreceli bir miktar gibi mi? Aksi takdirde , radyo düğmelerini veya liste kutusunu kullanın.
• Ayar tam olarak bilinen bir sayısal değer mi? Öyleyse, sayısal bir metin kutusu kullanın.
• Kullanıcı, değişiklikleri ayarlamanın etkisiyle ilgili anında geri bildirimden yararlanabilir mi? O halde kaydırıcıyı kullanın. Örneğin, kullanıcılar ton, doygunluk veya parlaklık değerlerindeki değişikliklerin etkisini hemen görerek daha kolay bir renk seçebilir.
• Ayarın dört veya daha fazla değer aralığı var mı? Aksi takdirde, radyo düğmelerini kullanın.
• Kullanıcı değeri değiştirebilir mi? Kullanıcıyla etkileşim için kaydırıcılar kullanılır. Kullanıcı değeri değiştiremiyorsa, bunun yerine salt okunur metin kullanın.

Kaydırıcı ile sayısal metin kutusu arasında karar verirseniz, şu durumda sayısal bir metin kutusu kullanın:

• Ekran alanı dar.
• Kullanıcı büyük olasılıkla klavyeyi kullanmayı tercih eder.

Aşağıdakiler için kaydırıcı kullanın:

• Kullanıcılar anında geri bildirimden yararlanacaktır.

Recommendations

• Kullanıcıların istedikleri değeri kolayca ayarlayabilmesi için denetimi boyutlandırın. Ayrık değerlere sahip ayarlar için, kullanıcının fareyi kullanarak herhangi bir değeri kolayca seçediğinden emin olun. Kaydırıcının uç noktalarının her zaman görünümün sınırlarına sığdığından emin olun.
• Kullanıcı seçim yaparken veya seçim yaptıktan sonra (pratik olduğunda) anında geri bildirimde bulunmak. Örneğin, Windows ses denetimi seçilen ses düzeyini göstermek için bip sesi çalar.
• Değer aralığını göstermek için etiketleri kullanın. Özel durum: Kaydırıcı dikey olarak yönlendirilmişse ve üstteki etiket Maksimum, Yüksek, Daha Fazla veya eşdeğerse, anlamı açık olduğundan diğer etiketleri atlayabilirsiniz.
• Kaydırıcıyı devre dışı bıraktığınızda tüm ilişkili etiketleri veya geri bildirim görsellerini devre dışı bırakın.
• Kaydırıcınızın akış yönünü ve/veya yönlendirmesini ayarlarken metnin yönünü göz önünde bulundurun. Bazı dillerde yazı soldan sağa, bazılarında ise sağdan sola akar.
• İlerleme göstergesi olarak kaydırıcı kullanmayın.
• Kaydırıcı başparmak boyutunu varsayılan boyuttan değiştirmeyin.
• Değer aralığı büyükse ve kullanıcılar büyük olasılıkla aralıktaki birkaç temsili değerden birini seçecekse sürekli kaydırıcı oluşturmayın. Bunun yerine, izin verilen tek adım olarak bu değerleri kullanın. Örneğin, zaman değeri 1 aya kadar olabilir ancak kullanıcıların yalnızca 1 dakika, 1 saat, 1 gün veya 1 ay arasında seçim yapmaya ihtiyacı varsa, yalnızca 4 adım nokta içeren bir kaydırıcı oluşturun.

Ek kullanım kılavuzu

Doğru düzeni seçme: yatay veya dikey

Kaydırıcınızı yatay veya dikey olarak yönlendirebilirsiniz. Hangi düzenin kullanılacağını belirlemek için bu yönergeleri kullanın.

• Doğal bir yönlendirme kullanın. Örneğin, kaydırıcı normalde dikey olarak (sıcaklık gibi) gösterilen bir gerçek dünya değerini temsil ediyorsa, dikey yönlendirme kullanın.
• Denetim, video uygulamasında olduğu gibi medya içinde arama yapmak için kullanılıyorsa yatay yönlendirme kullanın.
• Sayfada tek yönde (yatay veya dikey) kaydırılabilir bir kaydırıcı kullanırken kaydırıcı için kaydırma yönünden farklı bir yönlendirme kullanın. Aksi takdirde, kullanıcılar kaydırıcıyı kaydırabilir ve sayfayı kaydırmaya çalıştıkları zaman yanlışlıkla değerini değiştirebilir.
• Hangi yönlendirmeyi kullanacağınızdan hala emin değilseniz sayfa düzeninize en uygun olanı kullanın.

Aralık yönü

Aralık yönü, kaydırıcıyı geçerli değerinden maksimum değerine kaydırdığınızda hareket ettirdiğiniz yöndür.

• Dikey kaydırıcı için, okuma yönünden bağımsız olarak kaydırıcının en büyük değerini kaydırıcının en üst kısmına yerleştirin. Örneğin, ses düzeyi kaydırıcısı için her zaman maksimum ses düzeyi ayarını kaydırıcının en üstüne yerleştirin. Diğer değer türleri (haftanın günleri gibi) için sayfanın okuma yönünü izleyin.
• Yatay stiller için, alt değeri soldan sağa sayfa düzeninde kaydırıcının sol tarafına, sağdan sola sayfa düzeninde sağ tarafına yerleştirin.
• Önceki yönergenin tek istisnası medya arama çubuklarıdır: her zaman kaydırıcının sol tarafına daha düşük değeri koyun.

Adımlar ve işaretler

• Kaydırıcının min ve max arasında rastgele değerlere izin vermesini istemiyorsanız adım noktalarını kullanın. Örneğin, satın alınacak film biletlerinin sayısını belirtmek için kaydırıcı kullanırsanız kayan nokta değerlerine izin verme. Adım değeri olarak 1 verin.
• Adımları (tutturma noktaları olarak da bilinir) belirtirseniz, son adımın kaydırma çubuğunun maksimum değerine hizalandığından emin olun.
• Kullanıcılara ana veya önemli değerlerin konumunu göstermek istediğinizde çentik işaretleri kullanın. Örneğin, yakınlaştırmayı denetleyen bir kaydırıcıda 50%, 100%ve 200%değer işaretleri olabilir.
• Kullanıcıların ayarın yaklaşık değerini bilmesi gerektiğinde işaret çizgilerini gösterin.
• Kullanıcıların denetimle etkileşim kurmadan seçtikleri ayarın tam değerini bilmesi gerektiğinde değer işaretlerini ve değer etiketini gösterin. Aksi takdirde, tam değeri görmek için değer ipucunu kullanabilirler.
• Adım noktaları belirgin olmadığında her zaman çentik işaretleri gösterin. Örneğin, kaydırıcı 200 piksel genişliğinde ve 200 çentik noktasına sahipse, kullanıcılar tutturma davranışını fark etmeyecekleri için çentik işaretlerini gizleyebilirsiniz. Ancak yalnızca 10 tutturma noktası varsa işaret çizgilerini gösterin.

Etiketler

• kaydırıcı etiketleri

  Kaydırıcı etiketi kaydırıcının ne için kullanıldığını gösterir.

  • Bitiş noktalama işaretleri olmayan bir etiket kullanın (bu, tüm denetim etiketleri için kuraldır).
  • Kaydırıcı, etiketlerin çoğunu denetimlerinin üzerine yerleştiren bir formdayken etiketleri kaydırıcının üzerine getirin.
  • Kaydırıcı, etiketlerinin çoğunu kontrol düzenlerinin yanına yerleştirecek şekilde bir formda olduğunda, etiketleri yanlara konumlandırın.
  • Kaydırıcının altına etiket yerleştirmekten kaçının çünkü kullanıcı kaydırıcıya dokunduğunda kullanıcının parmağı etiketi tıkayabilir.

• Aralık etiketleri

  Aralık veya dolgu etiketleri kaydırıcının minimum ve maksimum değerlerini tanımlar.

  • Dikey yönlendirme bunu gereksiz hale getirmedikçe kaydırıcı aralığının iki ucunu etiketle.
  • Her etiket için mümkünse yalnızca bir sözcük kullanın.
  • Bitiş noktalama işaretlerini kullanmayın.
  • Bu etiketlerin açıklayıcı ve paralel olduğundan emin olun. Örnekler: Maksimum/Minimum, Daha Fazla/Daha Az, Düşük/Yüksek, Yumuşak/Yüksek.

• Değer etiketleri

  Değer etiketi kaydırıcının geçerli değerini görüntüler.

  • Değer etiketine ihtiyacınız varsa, bunu kaydırıcının altında görüntüleyin.
  • Metni kontrolün ortasına yerleştirin ve birimleri (piksel gibi) ekleyin.
  • Temizleme sırasında kaydırıcının başparmağı kaplandığından, geçerli değeri bir etiket veya başka bir görselle başka bir şekilde göstermeyi göz önünde bulundurun. Metin boyutunu ayarlayan bir kaydırıcı, kaydırıcının yanında doğru boyutta bazı örnek metinleri gösterebilir.

Görünüm ve etkileşim

Kaydırıcı, bir ray ve bir düğmeden oluşur. Çubuk, girilebilecek değer aralığını temsil eden ve isteğe bağlı olarak çeşitli işaret çizgisi stilleri gösterebilen bir çubuktur. Başparmak, kullanıcının parçaya dokunarak veya üzerinde ileri geri ovarak konumlandırabildiği bir seçicidir.

Kaydırıcı büyük bir dokunmatik hedefe sahiptir. Dokunmatik erişilebilirliği korumak için kaydırıcı ekranın kenarından yeterince uzağa konumlandırılmalıdır.

Özel bir kaydırıcı tasarlarken, kullanıcıya gerekli tüm bilgileri mümkün olduğunca az dağınıklık ile sunmanın yollarını göz önünde bulundurun. Bir kullanıcının ayarı anlamak için birimleri bilmesi gerekiyorsa değer etiketi kullanın; bu değerleri grafik olarak göstermek için yaratıcı yollar bulun. Örneğin ses düzeyini denetleen bir kaydırıcı, kaydırıcının en alt ucunda ses dalgaları olmayan bir hoparlör grafiği ve en üst uçta ses dalgaları olan bir hoparlör grafiği görüntüleyebilir.

Örnekler

0 ile 100 arasında 10 nokta aralığında değer çizgileri olan bir kaydırıcı.

** Kaydırıcı oluştur

• Önemli API'ler: Slider sınıfı, Value özelliği, ValueChanged olayı

WinUI 3 Galeri uygulamasını açın ve Kaydırıcı'yı çalışır durumda görün

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

XAML'de bir kaydırıcı nasıl oluşturulur, işte burada.

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

Kodda kaydırıcı oluşturma burada açık bir şekilde anlatılır.

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);

Kaydırıcının değerini Value özelliğinden alır ve ayarlarsınız. Değer değişikliklerine yanıt vermek için, Value özelliğine bağlanmak veya ValueChanged olayını işlemek için veri bağlamayı kullanabilirsiniz.

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

UWP ve WinUI 2

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

Bu denetimin API'leri Windows.UI.Xaml.Controls ad alanında bulunur.

• UWP API'leri:Slider sınıfı, Value özelliği, ValueChanged olayı
• WinUI 2 Galerisi uygulamasını açın ve Kaydırıcı'nın nasıl çalıştığını görün. WinUI 2 Galeri uygulaması çoğu WinUI 2 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın.

Tüm denetimler için en güncel stilleri ve şablonları almak için en son WinUI 2'yi kullanmanızı öneririz. WinUI 2.2 veya üzeri, bu denetim için yuvarlatılmış köşeler kullanan yeni bir şablon içerir. Daha fazla bilgi için bkz . Köşe yarıçapı.

İlgili konular

• Geçiş anahtarları
• Slider sınıfı