The Slider control

Slider (Kaydırıcı) kontrolü, bir parmağı yatay veya dikey bir çizgi boyunca sürükleyerek sayısal bir değer seçmenize olanak tanır. Bunu birçok kullanıcı arayüzünde görürsünüz, ancak sadece açıklamadan tanımak biraz zor olabilir, işte çok temel bir örnek:

<Window x:Class="WpfTutorialSamples.Misc_controls.SliderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SliderSample" Height="100" Width="300">
    <StackPanel VerticalAlignment="Center" Margin="10">
        <Slider Maximum="100" />
    </StackPanel>
</Window>

Bu, son kullanıcının, butonu (thumb olarak adlandırılır) çizgi boyunca sürükleyerek 0 ile 100 arasında bir değer seçmesini sağlar.

Ticks

Örnekte, thumb öğesini ortanın ötesine sürükledim, ancak tam değeri görmek zor. Bunu düzeltmenin bir yolu, işaretler (ticks) açmaktır; bunlar, thumb öğesinin ne kadar ilerlediğini daha iyi göstermek için Slider kontrolünün üzerinde gösterilen küçük işaretlerdir. İşte bir örnek:

<Window x:Class="WpfTutorialSamples.Misc_controls.SliderSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SliderSample" Height="100" Width="300">
    <StackPanel VerticalAlignment="Center" Margin="10">
        <Slider Maximum="100" TickPlacement="BottomRight" TickFrequency="5" />
    </StackPanel>
</Window>

Tick işaretlerini, TickPlacement özelliğine None (varsayılan) dışında bir değer vererek açıyorum. Örneğimde, işaretlerin çizginin altına yerleştirilmesini istiyorum, ancak bunu değiştirmek için TopLeft veya Both gibi değerler de kullanabilirsiniz.

Ayrıca TickFrequency (Tick Sıklığı) özelliğini kullandığımı fark edin. Varsayılan değeri 1'dir, ancak olası değerlerin aralığı 0 ile 100 arasında olan bir örnekte, bu 100 işaretçi oluşturur ve bunlar sınırlı alana sığdırılmak zorunda kalır. Böyle bir durumda, TickFrequency'yi, daha az kalabalık görünmesini sağlayacak bir değere yükseltmek mantıklıdır.

Snapping to ticks

Yukarıdaki ekran görüntüsüne bakarsanız, thumb öğesinin tick öğeleri arasında olduğunu göreceksiniz. Bu mantıklıdır, çünkü her işaret arasında beş değer bulunmaktadır, bu da TickFrequency özelliğiyle belirtilmiştir. Ayrıca, Slider kontrolünün değeri varsayılan olarak bir double (ondalık sayı) olduğundan, değer bir tam sayı olmayabilir (ve muhtemelen olmayacaktır). Bunu, aşağıdaki örnekte olduğu gibi IsSnapToTickEnabled (İşarete Tutunmayı Etkinleştir) özelliğini kullanarak değiştirebiliriz:

<Window x:Class="WpfTutorialSamples.Misc_controls.SliderSnapToTickSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SliderSnapToTickSample" Height="100" Width="300">
    <StackPanel VerticalAlignment="Center" Margin="10">
        <Slider Maximum="100" TickPlacement="BottomRight" TickFrequency="10" IsSnapToTickEnabled="True" />
    </StackPanel>
</Window>

TickFrequency'yi 10 olarak değiştirdiğimi ve ardından IsSnapToTickEnabled özelliğini etkinleştirdiğimi fark edin. Bu, thumb öğesinin yalnızca bir işaret değeri üzerinde doğrudan yerleştirilebileceğini garanti eder, yani bu örnekte yalnızca 0, 10, 20, 30, 40 vb. değerler seçilebilir.

Slider değeri

Şimdiye kadar Slider'ı sadece görsel olarak kullandık, ancak tabii ki asıl amaç, mevcut değerini okumak ve bunu bir takım işlemler için kullanmaktır. Slider'ın bunun için bir Value (Değer) özelliği vardır, bu değeri elbette Code-behind'dan okuyabilir veya veri bağlama (binding) yapabilirsiniz.

Slider'ı kullanmanın yaygın bir senaryosu, onu bir TextBox ile birleştirmektir; bu, kullanıcının mevcut seçili değeri görmesini sağlar ve ayrıca Slider kontrolüne ait thumn öğesini sürüklemek yerine bir sayı girerek değeri değiştirmesine olanak tanır. Normalde, hem Slider hem de TextBox üzerindeki değişiklik olaylarında kod yazmanız ve ardından buna göre güncelleme yapmanız gerekir, ancak basit bir veri bağlama (binding) tüm bunları bizim için yapabilir:

<Window x:Class="WpfTutorialSamples.Misc_controls.SliderBoundValueSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SliderBoundValueSample" Height="100" Width="300">
    <DockPanel VerticalAlignment="Center" Margin="10">
        <TextBox Text="{Binding ElementName=slValue, Path=Value, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="Right" TextAlignment="Right" Width="40" />
        <Slider Maximum="255" TickPlacement="BottomRight" TickFrequency="5" IsSnapToTickEnabled="True" Name="slValue" />
    </DockPanel>
</Window>

Artık değeri ya Slider'ı kullanarak ya da TextBox'a bir değer girerek değiştirebilirsiniz ve bu hemen diğer kontrole de yansıyacaktır. Ek bir avantaj olarak, herhangi bir ekstra çaba harcamadan basit bir doğrulama da elde ederiz, örneğin TextBox'a sayısal olmayan bir değer girmeye çalıştığımızda:

Değişen değerler için yanıt oluşturma

Tabii ki, binding birçok amaç için çok kullanışlı olsa da, yine de Slider değerindeki değişikliklere Code-behind'dan yanıt vermek isteyebilirsiniz. Neyse ki, Slider, bu konuda bize yardımcı olacak bir ValueChanged (Değer Değişikliği) olayıyla birlikte gelir. Bunu göstermek için, bir renk için Kırmızı, Yeşil ve Mavi (RGB) değerlerini değiştirdiğimiz üç kaydırıcıdan oluşan daha karmaşık bir örnek oluşturdum:

<Window x:Class="WpfTutorialSamples.Misc_controls.SliderValueChangedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SliderValueChangedSample" Height="200" Width="300">
    <StackPanel Margin="10" VerticalAlignment="Center">
        <DockPanel VerticalAlignment="Center" Margin="10">
            <Label DockPanel.Dock="Left" FontWeight="Bold">R:</Label>
            <TextBox Text="{Binding ElementName=slColorR, Path=Value, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="Right" TextAlignment="Right" Width="40" />
            <Slider Maximum="255" TickPlacement="BottomRight" TickFrequency="5" IsSnapToTickEnabled="True" Name="slColorR" ValueChanged="ColorSlider_ValueChanged" />
        </DockPanel>

        <DockPanel VerticalAlignment="Center" Margin="10">
            <Label DockPanel.Dock="Left" FontWeight="Bold">G:</Label>
            <TextBox Text="{Binding ElementName=slColorG, Path=Value, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="Right" TextAlignment="Right" Width="40" />
            <Slider Maximum="255" TickPlacement="BottomRight" TickFrequency="5" IsSnapToTickEnabled="True" Name="slColorG" ValueChanged="ColorSlider_ValueChanged" />
        </DockPanel>

        <DockPanel VerticalAlignment="Center" Margin="10">
            <Label DockPanel.Dock="Left" FontWeight="Bold">B:</Label>
            <TextBox Text="{Binding ElementName=slColorB, Path=Value, UpdateSourceTrigger=PropertyChanged}" DockPanel.Dock="Right" TextAlignment="Right" Width="40" />
            <Slider Maximum="255" TickPlacement="BottomRight" TickFrequency="5" IsSnapToTickEnabled="True" Name="slColorB" ValueChanged="ColorSlider_ValueChanged" />
        </DockPanel>
    </StackPanel>
</Window>

using System;
using System.Windows;
using System.Windows.Media;

namespace WpfTutorialSamples.Misc_controls
{
	public partial class SliderValueChangedSample : Window
	{
		public SliderValueChangedSample()
		{
			InitializeComponent();
		}

		private void ColorSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
		{
			Color color = Color.FromRgb((byte)slColorR.Value, (byte)slColorG.Value, (byte)slColorB.Value);
			this.Background = new SolidColorBrush(color);
		}
	}
}

Kodun XAML kısmında, her biri bir Label, bir Slider ve bir TextBox kontrolü içeren üç adet DockPanel bulunmaktadır. Daha önce olduğu gibi, TextBox kontrolünün Text özelliği, Slider'ın Value özelliğine bağlanmıştır.

Her slider, aynı ValueChanged olayına abone olur; bu olayda, mevcut seçili değerlere dayalı olarak yeni bir Color örneği oluşturulur ve ardından bu renk, Window özelliği olan Background için yeni bir SolidColorBrush oluşturmak için kullanılır.

Sonuç olarak, Slider kontrolünün ne için kullanılabileceğine dair oldukça iyi bir örnektir.