Ana içeriğe atla

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.

Yorumlar

Bu blogdaki popüler yayınlar

Olasılıksız - Kitap Yorum

Olasılıksız hayatımda okuduğum en iyi kitaptı. Tek çırpıda hiç sıkılmadan, eğlenerek okudum bu kitabı, tavsiyem sizinde okumanız.Kitabın kapağı ve içeriği ile ilgili kısa bilgi aşağıdadır.Olasılık, tahmin, düşünceler, nöbetler, karışıklıklar, ileriyi görebilme zannı, dejavu ve tabii ki olasılıksız şeyler. Bu kelimelerle içli dışlı olabileceğiniz, bütün bu kelimelerin yaşamdaki yerini kavrayabileceğiniz müthiş bir uyarlama.Adam Fawer' ın ortaya çıkardığı bu uyarlama romanın müthiş bir çalışmanın ve araştırmanın sonucu ortaya çıktığının kitabın başından sonuna kadar farkındasınız. Bu uyarlamasını, derin araştırmalarıyla birleştirip romanı tekdüzelikten çıkarıp müthiş bir yere koyduğu için de Fawer' a müteşekkir oluveriyorsunuz. Sıkıcı diye nitelendirebileceğiniz teorik bilgileri bile bir çırpıda okuyuveriyorsunuz. Teorik bilgiler dahi olaylarla sonuna kadar bağlantılı aktarılmış. Tekdüzelikten çıkmış bir roman; olasılıksız. Her an olayın kurgusunun değişmesi olasılık dahilinde. …

.Net 3.5 SP1 – Full Install Packages (Tam Kurulum)

.Net Framework 3.5 SP1 ‘i bilgisayarınıza kurmak istediğinizde normal şartlar altında Microsoft ‘un sitesinde 2.7 mb ‘lik bir dosya indirir ve kurulum işlemlerinizi bu dosya üzerinden yaparsınız. Ancak bu indirmiş oluğunuz dosya yaklaşık 220 mb ‘lik veriyi internetten indirerek kurulum yapmaktadır. İnternet çıkışına izin verilmeyen kurumlar ve kuruluşlar için bu durum bir sıkıntı oluşturmaktadır. Bu sebepten ötürü aşağıdaki link yardımı ile tam yükleme paketini indirdikten sonra hiç internet ihtiyacınız olmadan .Net 3.5 SP1 ‘i kurabilmeniz mümkün olacaktır.Link

Çoklu Dil Desteği – Veri Tabanı Tasarım Örnekleri ile

Zaman içerisinde karşımıza çok farklı projeler gelebilmektedir. Ancak bu projeler içerisinde özellikle de global ölçekli ya da bu ölçekte uygulama geliştiren firmalarda bazı temel gereksinimler sürekli olarak karşımıza çıkabilmektedir. Bu gereksinimlerden biri ve belki de en önemlisi olan çoklu dil desteğinin veri tabanı (DB) katmanında nasıl yapıldığını kısa ve hızlıca inceliyor olacağız.Öncelikle çoklu dil desteği dediğimizde aklımıza gelen ilk çözüm yolu *.resx dosyalarını kullanmak gelmektedir. Ancak bu uzaktan yönetilen ya da anlık olarak metin değişikliği gereksinimi bulunan uygulamalarda bazı ufak problemler çıkartabilmektedir.Ne gibi problemler derseniz; iki grupta inceleyebiliriz. Web projeleri ve windows üzerinde çalışan projeler.Web projelerinde IIS üzerinde yer alan bir *.resx dosyasını değiştirdiğinizde son kullanıcı tarafında etkisi hemen görülmeyebilir. Cache mekanizmaları sebebiyle ortalama 15-30 dakika arasında bir görüntüleme süre farkı ile karşılaşabiliriz. Faha köt…