WPF - Slider Kontrolü

Windows Presentation Foundation ile uygulama geliştirirken kullanabileceğimiz kontrol paleti işlerimizi rahatlıkla yürütebileceğimiz kadar geniştir. Araç kutusu içerisinde yer alan kontroller Framework sürümünü arttırdıkça ve codeplex, code.msdn gibi sitelerde yer alan projeler yardımı ile daha da artmaya devam etmektedir. WPF 'in grafiksel ve görsel gücüne günlük yaşantı da kullanılan kontrollerin de kullanılabilir olması sayesinde en basit uygulamalardan en karmaşık uygulamalara kadar geliştirilebilme olanağı tanınıyor.

Bu yazımızda WPF üzerinde kullanılan en temel kontrollerin Slider kontrolünün özelliklerini inceliyor ve nasıl kullanıldığını, özellikleri incelemeye çalışıyor olacağız.

WPF - Slider Control
Slider kontrolü kullanımı en basit olan kontrollerden biridir. Temel olarak yaptığı işlem belirli aralıkta değerleri değiştirmek ve bu değişen değerleri başka bir kontrol ya da işlem ile ilişkilendirmektedir. Slider kontrolünün en önemli iki özelliği vardır. Bunlar başlangıç ve bitiş değerlerini belirten Max. ve Min. değerledir. Temel olarak Slider kontrolü kullanımı aşağıdaki gibi olacaktır.

Slider.xaml

<Slider Height="23" HorizontalAlignment="Left" Margin="26,34,0,0" Name="slider1" VerticalAlignment="Top" Width="250" Minimum="0" Maximum="100" />

Slider kontrolünün temel kullanımı yukarıdaki kod parçasında belirttiğimiz gibidir. Bu kullanım şekli dışında değinilebilecek pek özelliği yoktur. Bu sebeple kullanılabilecek örnekleri sizlere aktararak yazımıza devam edeceğiz.

Şöyle bir örnek hayal edelim. ProgressBar kontrolü ile Slider kontrolünü birlikte kullanabilmemiz mümkündür. Bunun için ProgressBar kontrolünün value özelliğine Slider değerini eklemek yeterli olacaktır. Peki yapmış olduğumuz bu işlem sonrasında ne gibi bir sonuç ile kaşılaşacağız. Biz slider kontrolü üzerindeki değerleri değiştirdikçe ProgressBar kontrolünün değerleri de değişiyor olacaktır.

Slider.xaml

<Window x:Class="WPFControls.Slider"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="Slider" Height="300" Width="300">     <Grid x:Name="LayoutRoot">         <Slider RenderTransformOrigin="0.501,0.622" Margin="81,161.66,66,0"             x:Name="Slider" Style="{DynamicResource SimpleSlider}"             VerticalAlignment="Top" Height="22" Maximum="100" Minimum="0" Value="0" >             <Slider.RenderTransform>                 <TransformGroup>                     <ScaleTransform ScaleX="-1" ScaleY="-1"/>                     <SkewTransform AngleX="0" AngleY="0"/>                     <RotateTransform Angle="179.863"/>                     <TranslateTransform X="-0.954" Y="-9.028"/>                 </TransformGroup>             </Slider.RenderTransform>             <Slider.Background>                 <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">                     <GradientStop Color="#FFFFFFFF" Offset="0"/>                     <GradientStop Color="#FFF5A544" Offset="1"/>                 </LinearGradientBrush>             </Slider.Background>         </Slider>         <ProgressBar Margin="80,119,63,0" Style="{DynamicResource SimpleProgressBar}" VerticalAlignment="Top" Height="20" Value="{Binding Path=Value, ElementName=Slider, Mode=Default}">             <ProgressBar.Background>                 <LinearGradientBrush EndPoint="1,0" StartPoint="0,0">                     <GradientStop Color="#FFBABABA" Offset="0"/>                     <GradientStop Color="#FFC7C7C7" Offset="0.5"/>                     <GradientStop Color="#FF5D9C1D" Offset="0.75"/>                 </LinearGradientBrush>             </ProgressBar.Background>         </ProgressBar>     </Grid> </Window>

Kontrolü çalıştırdığımızda aşağıdaki gibi bir ekran görüntüsü ile karşılaşırız.


Ayrıca sizler yukarıdaki kod blogunu kendi XAML dosyanıza eklediğiniz SimpleSlider kaynağını bulamıyorum şeklinde hata verecektir. Bu stil için oluşturulmuş olan bir kaynak dosyadır. Bu kaynak bilgisini kaldırmanız durumunda sorunsuzca çalışacaktır. Zaman içerisinde sizlere bütün Simple Style dosyasını veriyor olacağız. Kullanmak isteyenler için SimpleSlider kaynak stili aşağıdaki gibidir.

SimpleStyle.xaml

<Style x:Key="SimpleSlider" TargetType="{x:Type Slider}">     <Setter Property="Background" Value="{DynamicResource LightBrush}"/>         <Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>         <Setter Property="Template">             <Setter.Value>                 <ControlTemplate TargetType="{x:Type Slider}">                         <Grid x:Name="GridRoot">                             <Grid.RowDefinitions>                                 <RowDefinition Height="Auto"/>                                 <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>                                 <RowDefinition Height="Auto"/>                             </Grid.RowDefinitions>                                 <!-- TickBar shows the ticks for Slider -->                             <TickBar Visibility="Collapsed" x:Name="TopTick" Height="4" SnapsToDevicePixels="True" Placement="Top" Fill="{DynamicResource GlyphBrush}"/>                                 <Border Grid.Row="1" Margin="0" x:Name="Border" Height="4" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding                                     BorderThickness}" CornerRadius="2"/>                                 <!-- The Track lays out the repeat buttons and thumb -->                                 <Track Grid.Row="1" x:Name="PART_Track">                                     <Track.Thumb>                                         <Thumb Style="{DynamicResource SimpleSliderThumb}"/>                                     </Track.Thumb>                                     <Track.IncreaseRepeatButton>                                         <RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="Slider.IncreaseLarge"/>                                     </Track.IncreaseRepeatButton>                                         <Track.DecreaseRepeatButton>                                             <RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="Slider.DecreaseLarge"/>                                         </Track.DecreaseRepeatButton>                                 </Track>                             <TickBar Visibility="Collapsed" Grid.Row="2" x:Name="BottomTick" Height="4" SnapsToDevicePixels="True" Placement="Bottom" Fill="{TemplateBinding Foreground}"/>                         </Grid>                         <ControlTemplate.Triggers>                             <Trigger Property="TickPlacement" Value="TopLeft">                                 <Setter Property="Visibility" Value="Visible" TargetName="TopTick"/>                             </Trigger>                             <Trigger Property="TickPlacement" Value="BottomRight">                                 <Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/>                             </Trigger>                             <Trigger Property="TickPlacement" Value="Both">                                 <Setter Property="Visibility" Value="Visible" TargetName="TopTick"/>                                 <Setter Property="Visibility" Value="Visible" TargetName="BottomTick"/>                             </Trigger>                             <Trigger Property="IsEnabled" Value="false">                                 <Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border"/>                                 <Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border"/>                             </Trigger>                             <!-- Use a rotation to create a Vertical Slider form the default Horizontal -->                             <Trigger Property="Orientation" Value="Vertical">                                 <Setter Property="LayoutTransform" TargetName="GridRoot">                                     <Setter.Value>                                         <RotateTransform Angle="-90"/>                                     </Setter.Value>                                 </Setter>                                 <!-- Track rotates itself based on orientation so need to force it back -->                                 <Setter TargetName="PART_Track" Property="Orientation" Value="Horizontal"/>                             </Trigger>                         </ControlTemplate.Triggers>                 </ControlTemplate>             </Setter.Value>         </Setter> </Style>

Hazırlayacak olduğumuz bir diğer örnek ise ekran üzerine eklemiş olduğumuz bir resmin boyutlarını büyültüp azaltmak olacaktır. Bu işlem için form üzerine slider kontrolü ile bir adet resim eklemek ve sonrasında slider üzerinde değişiklik olduğu zaman resmin boyutunu bizim belirlediğimiz boyutta değiştirmek olacaktır.

Slider.xaml

<Window x:Class="WPFControls.Slider"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         Title="Slider" Height="300" Width="300">     <Grid>         <Grid.RowDefinitions>             <RowDefinition Height="200" />             <RowDefinition Height="30" />         </Grid.RowDefinitions>         <Grid.ColumnDefinitions>             <ColumnDefinition/>         </Grid.ColumnDefinitions>         <Rectangle Grid.Row="0" Grid.Column="0" Width="250">             <Rectangle.Fill>                 <ImageBrush x:Name="imageBrush" ImageSource="Images/copy.png" />             </Rectangle.Fill>         </Rectangle>         <Slider Ticks="1, 2, 3, 4, 5, 6, 7, 8, 9, 10"             Value="1"             Delay="100"             Interval="5"             TickPlacement="BottomRight"             Minimum="1"             Maximum="10"             Width="100"             AutoToolTipPlacement="BottomRight"             ValueChanged="Slider_ValueChanged"             Grid.Row="1"             Grid.Column="0">         </Slider>     </Grid> </Window>

XAML kodu yukarıdaki gibi düzenledikten sonra CS dosyasının içerisinde aşağıdaki değişiklikleri yapıyoruz.

Slider.xaml.cs

using System.Windows; using System.Windows.Media; namespace WPFControls {     /// <summary>     /// Interaction logic for Slider.xaml     /// </summary>     public partial class Slider : Window     {         public Slider()         {             InitializeComponent();         }         private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)         {             double value = e.NewValue;             ImageBrush imageBrush = this.FindName("imageBrush") as ImageBrush;             imageBrush.Viewbox = new Rect(0.3, 0.3, 1 / value, 1 / value);         }     } }

Yapmış olduğumuz işlemler sonrasında ekran görüntüsü aşağıdaki biçimde olacaktır.



Sonuç olarak, bu yazımızda web ve windows uygulamalarının kullanılması en kolay olan kontrollerinden Slider kontrolünü incelemeye çalıştık. En temel iki özelliğinin olduğunuda bunlarında max ve min değerleri olduğuna değindik. Ayrıca değinmiş olduğumuz bu özellikleri örnekler ile açıklayarak daha da anlaşılır olmasını sağlamaya çalıştık.

Umarım yararlı olabilmiştir.