-- Genel

Silverlight Kontrolleri

Silverlight, WPF ve XBAP teknolojilerinin ortak mimari olarak XAML kullandığını Silverlight eğitim videolarımda detaylıca anlatmıştım. Silverlight ve XAML alanında çok fazla yerli kaynak olmaması nedeniyle kullanılan kontrolleri tek başlık altında zaman içerisinde eklemeler yaparak anlatmak istiyorum. Bu başlık altında sadece temel/basit seviyedeki kontrolleri inceleyeceğim. Data ve karmaşık kontrolleri ise ayrı makaleler olarak yazmayı düşünüyorum.

Border

Border, kelime anlamı olarak “kenar” ya da “kenarlık” olarak nitelendirilebilir. Görsel uygulamalarda kenarlık verilmesi gerektiğinde Border kontrolü kullanılır.

En temel kullanımı;

<Border x:Name="borderTemel" 
        BorderBrush="Black" 
        BorderThickness="4" 
        Width="200" Height="150" />

Detaylı kullanımı;

    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Border BorderBrush="Aqua" BorderThickness="3" Margin="6" Background="Gray">
            <Button x:Name="btnDugme" Content="Tıkla" Grid.Row="0" />
        </Border>
            <Button x:Name="btnDugme1" Content="Tıkla" Grid.Row="1" />
    </Grid>

Button

Herhangi bir işlemi başlatmak amacıyla kullanılan bir nesnedir. [Ne zormuş butonu anlatmak :)]

En temel kullanımı;

<Button Background="White" 
        BorderBrush="Pink" HorizontalAlignment="Left" 
        VerticalAlignment="Top" 
        Margin="301,217,0,0" Width="75" Content="Tıkla!" />

Detaylı kullanımı;

        <Button Background="White" BorderBrush="Pink" HorizontalAlignment="Left" 
                VerticalAlignment="Top" Margin="301,217,0,0" Width="75">
            <Button.Content>
                <StackPanel>
                    <Image Source="help_button.jpg" Width="80" Height="50" />
                    <Rectangle Fill="Red" Margin="5" Height="5" />
                    <TextBlock Text="Tıkla!" HorizontalAlignment="Center"/>
                </StackPanel>
            </Button.Content>
        </Button>

Dikkat ederseniz ilk örnekte Content denen bir özelliğimiz var. Bu özelliği ilk örnekte sadece metinsel içerik olarak kullandık. İkinci örnekte ise XML söz dizimine daha benzer bir şekilde Button nesnesinin Content içeriğine özel bir tasarım yaparak bu uygulamayı daha esnek ve profesyonel hale getirdik. Dikkat edilmesi gereken şu ki; basit örnekteki Content özelliğini kullanırsanız <Button.Content> şeklinde olan kullanımı gerçekleştiremezsiniz. Aynı şekilde tersi de söz konusudur.

Calendar

Tarih seçme işlemlerinde kullanılan gelişmiş bir kontroldür.

Silverlight içerisinde namespace kullanabilmek için “xmlns” tanımlaması yapmak gerekir.

xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

“xmlns:sdk” kısmına dikkatinizi çekmek istiyorum. Buradaki “sdk” tanımlaması bir alias(takma isim)’tır. Burada istediğiniz bir isimlendirmeyi yapabilirsiniz.

        <StackPanel>
            <sdk:Calendar x:Name="calendar" Margin="10" SelectionMode="SingleRange" 
                          SelectedDatesChanged="Calendar_SelectedDatesChanged"/>
            <ListBox x:Name="lst" Margin="10" />
        </StackPanel>

Bu uygulamanın C# kod(code behind) kısmında ise aşağıdaki kodu yazıyoruz.

        private void Calendar_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)
        {
            //lst.Items.Clear();
            foreach (DateTime tarih in e.AddedItems)
            {
                lst.Items.Add(tarih);
            }
        }

Silverlight event mantığına özel bir makale yazacağım ancak temel olarak şunu belirtmeliyim ki, WPF ve Silverlight da event XAML katmanında tanımlanmaması gerekir. Bunun nedeni, XAML tasarımını yapacak tasarımcının bu kısmı silip/değiştirerek yazılımın çalışamaz hale getirmesini engellemektir.

Önerdiğim event kullanımı;

<sdk:Calendar x:Name="calendar" Margin="10" SelectionMode="SingleRange" />

Kod kısmında ise;

InitializeComponent(); altında şu şekilde event kullanımı yapılmalıdır.

public Calendar()
{
     InitializeComponent();
     calendar.SelectedDatesChanged += calendar_SelectedDatesChanged;
 }
 void calendar_SelectedDatesChanged(object sender, SelectionChangedEventArgs e)
 {
     foreach (DateTime tarih in e.AddedItems)
     {
         lst.Items.Add(tarih);
     }
 }

CheckBox

Seçim kutusu olarak nitelendirebileceğimiz bu kontrol ile bir ya da birden fazla seçenekli işlemler yapabiliriz.

        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <CheckBox Content="Bilgisayar" />
            <CheckBox Content="Beyaz Eşya" />
            <CheckBox Content="Mobilya" />
        </StackPanel>

        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Left">
            <CheckBox Content="Bilgisayar" />
            <CheckBox Content="Beyaz Eşya" />
            <CheckBox Content="Mobilya" />
        </StackPanel>

ComboBox

İçerisine birden fazla değer verilebilen ve bu değerleri açık/kapalı liste şeklinde gösterebilme yeteneği olan kontroldür.

        <ComboBox Margin="200" Height="30" Width="150">
            <ComboBoxItem>
                <ComboBoxItem.Content>
                    <TextBlock Text="Uzay Araçlar" />
                </ComboBoxItem.Content>
            </ComboBoxItem>
            <ComboBoxItem>
                <ComboBoxItem.Content>
                    <TextBlock Text="Mobil Araçlar" />
                </ComboBoxItem.Content>
            </ComboBoxItem>
            <ComboBoxItem>
                <ComboBoxItem.Content>
                    <TextBlock Text="Elektronik Araçlar" />
                </ComboBoxItem.Content>
            </ComboBoxItem>
        </ComboBox>

Cursor

Mouse ile bir kontrol üzerine gelince ya da bir işlem sırasında imlecin hangi görsele sahip olacağını belirtir.

    <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Button Content="Bir" Cursor="Arrow" Grid.Column="0" Margin="3" />
        <Button Content="İki" Cursor="Eraser" Grid.Column="1" Margin="3" />
        <Button Content="Üç" Cursor="IBeam" Grid.Column="2" Margin="3" />
        <Button Content="Dört" Cursor="Hand" Grid.Column="3" Margin="3" />
        <Button Content="Beş" Cursor="Stylus" Grid.Column="4" Margin="3" />
        <Button Content="Altı" Cursor="Wait" Grid.Column="5" Margin="3" />
    </Grid>

DatePicker

Tarih seçim işlemlerinde kullanılır.

XAML

        <StackPanel Width="200">
            <TextBlock x:Name="txt" Text="Seçilen Tarih" />
            <sdk:DatePicker x:Name="dtPicker" />
            <ListBox x:Name="lst" />
        </StackPanel>

C#

        public DatePicker()
        {
            InitializeComponent();
            dtPicker.SelectedDateChanged +=dtPicker_SelectedDateChanged;
        }
        private void dtPicker_SelectedDateChanged(object sender, SelectionChangedEventArgs e)
        {
            lst.Items.Clear();
            lst.Items.Add("Seçilen yıl : " + dtPicker.SelectedDate.Value.Year);
            lst.Items.Add("Seçilen ay : " + dtPicker.SelectedDate.Value.Month);
            lst.Items.Add("Seçilen gün : " + dtPicker.SelectedDate.Value.Day);
        }

HyperLink

Metinsel link(bağlantı) oluşturmayı sağlayan kontroldür.

<HyperlinkButton 
                Content="Cihan Özhan" 
                NavigateUri="http:\\www.cihanozhan.com" TargetName="_blank" 
                HorizontalAlignment="Left" Margin="286,224,0,0" VerticalAlignment="Top" />

ListBox

İçerisinde birden fazla değer alarak listeleme yapan bir liste kontrolüdür.

Örnek 1 : XAML

        <ListBox x:Name="lst" Width="150" Height="150">
            <ListBoxItem>
                <StackPanel Height="25" Orientation="Horizontal">
                    <Image Source="help_button.jpg" Stretch="Fill" Height="20"/>
                    <TextBlock Text="Birinci nesne" />
                </StackPanel>
            </ListBoxItem>
            <ListBoxItem>
                <CheckBox Content="İkinci nesne" />
            </ListBoxItem>
            <ListBoxItem>
                <CheckBox Content="Üçüncü nesne" />
            </ListBoxItem>
        </ListBox>

Örnek 2 : XAML

<ListBox x:Name="lst" Width="150" Height="150">
            <ListBoxItem Tag="Birinci nesne">
                <CheckBox Content="Birinci nesne" />
            </ListBoxItem>
            <ListBoxItem Tag="İkinci nesne">
                <CheckBox Content="İkinci nesne" />
            </ListBoxItem>
            <ListBoxItem Tag="Üçüncü nesne">
                <CheckBox Content="Üçüncü nesne" />
            </ListBoxItem>
</ListBox>

Örnek 2 : C# Kod

        public ListBox()
        {
            InitializeComponent();
            lst.SelectionChanged += lst_SelectionChanged;
        }

        void lst_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (lst.SelectedItem != null)
            {
                txtSira.Text = "Seçili nesnenin sırası : " + (lst.SelectedIndex + 1).ToString();
                txtNesne.Text = "Seçili nesnenin metni : " + ((ListBoxItem)(lst.SelectedItem)).Tag;
            }
        }

Popup

Uygulamanın herhangi bir noktasında mesaj, bildirim gibi işlemlerde kullanılacak özel pencere oluşturmayı sağlayan kontroldür.

XAML

        <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0">
            <Button Content="Cevap almak için tıklayın." Click="Button_Click"/>
        </StackPanel>

        <Popup x:Name="popUp" Margin="20,20,0,0">
            <StackPanel Background="LightGray" Width="150" Height="80">
                <TextBlock Text="PopUp Penceresi" Margin="5" />
                <Button x:Name="btnPopUp" Content="Kapat" Margin="15" Click="popupClick" />
            </StackPanel>
        </Popup>

C#

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            popUp.IsOpen = true;
        }

        private void popupClick(object sender, RoutedEventArgs e)
        {
            popUp.IsOpen = false;
        }

ProgressBar

Genel olarak uzun süren(bir kaç saniye ya da dakika farketmez) bir işlemin gerçekleşme sırasında kullanıcıya işlemin devam ettiğini belirtmek için kullanılan kontroldür.

XAML

        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Width="300">
            <Button x:Name="btnIlerlet" Click="btnIlerlet_Click" Width="200" Height="25" Content="İletlet" Margin="0,0,0,10"/>
            <ProgressBar x:Name="prgBar" Minimum="0" Maximum="100" Height="30" IsIndeterminate="True"/>
        </StackPanel>

C#

        private void btnIlerlet_Click(object sender, RoutedEventArgs e)
        {
            prgBar.Value += 5;
        }

RadioButton

Çok seçenekli, ancak kullanıcı tarafından tek bir seçeneğin seçilmeye zorlandığı durumlarda kullanılan kontroldür.

Örnek 1 : XAML

        <StackPanel Margin="200,50,0,0">
            <RadioButton Content="Nesne 1" GroupName="grup1"/>
            <RadioButton Content="Nesne 2" GroupName="grup1"/>
            <RadioButton Content="Nesne 3" GroupName="grup1" />
        </StackPanel>

Not : Bir radiobutton nesnesinin GroupName element değerini silerek gözlem yapın.

İçerik eklemeye devam edilecek..

Yorumla

Yorum