Silverlight

Merhaba arkadaşlar, bu makalemizde silverlight 2.0 ile birlikte karşımıza çıkan DataGrid kontrolünün kolon yapılarını ve özelliklerini inceliyeceğiz.

Silverlight DataGrid kontrolünde üç adet kolon template’i var.

DataGridTextColumn
DataGridCheckboxColumn
DataGridTemplateColumn

DataGridTextColumn kolon tipi ile adında anlaşılacağı gibi text olarak verilerin gösterilmesini ve düzenlenebilmesini sağlıyor. DataGridTextColumn web ve windows kontrollerinde kullandığımız BoundField’lara benzer bir yapıdadır. Çeşitli özellikleri vardır. Bu özelliklerden bazılarını inceleyelim.

CanUserResize
Bu özellik kolonun yeniden boyutlandırılabilmesini sağlar. True ve false değeri alabilir. Default değeri true’dır.
CanUserSort
Bu özellik kolona göre verinin sıralanabilmesini sağlar. True ve false değeri alabilir. Default değeri true’dır.
CanUserReorder
Bı özellik kolonun yerininn değiştirlebilmesini sağlar. True ya da false değeri alır. Default değeri true’dır.
Binding
Bu özellik kolon da gösterilecek olan veriyi bağlayabilmemizi sağlar. Örn; Binding="{Binding Name}"
Header
Bu özellik kolon’un başlığını belirlememizi sağlar.
IsReadOnly
Bu özellik ile kolonun içerisindeki verinin salt okunur olup olmayacağı ayarlanır. True yada false değerleri alabilir. Varsayılan değeri true’dır.

Kolon yapısını inceleyecek olursak,

<data:DataGrid Margin="8,8,8,8" x:Name="grid" AutoGenerateColumns="False">
    <data:DataGrid.Columns>
        <data:DataGridTextColumnIs ReadOnly="True" CanUserResize="False" CanUserSort="True" CanUserReorder="False"  Binding="{Binding ProductID}" Header="Ürün ID"/>
    </data:DataGrid.Columns>
</data:DataGrid>

Yukarıda kolonumuzu XAML’den ekledik. Peki kolonumuzu dinamik olarak yani run-time da eklemek istersek Ne yapacağız? Aslında oldukça basit. DataGrid’in columns isimli bir koleksiyonu var. Runtime da yeni bir kolon oluşturup Columns koleksiyonuna ekleyebiliyoruz.

DataGridTextColumn yeniColon =new DataGridTextColumn();
yeniColon.Header = "Yeni Kolon";
yeniColon.Binding = new Binding("YeniKolondaGorutulenecekAlan");
DataGrid1.Columns.Add(yeniColon);

DataGridCheckboxColumn’ları da true ya da false değerlerini listelemek için kullanacağımız kolon tipidir. DataGridTextColumn kolon tipinin yukarıda bahsettiğimiz özellikleri DataGridCheckboxColumn ile ortaktır.

XAML kodunu inceleyecek olursak,

<data:DataGrid Margin="8,8,8,8" x:Name="grid" AutoGenerateColumns="False">
    <data:DataGrid.Columns>
        <data:DataGridCheckBoxColumn Binding="{BindingProperty}" Header="Baslik"></data:DataGridCheckBoxColumn>
    </data:DataGrid.Columns>
</data:DataGrid>

Runtime’da yazdığımız kod ile eklemek istersek,

DataGridCheckBoxColumn yeniCheckBoxColon = new DataGridCheckBoxColumn();
yeniCheckBoxColon.Header = "Yeni Kolon";
yeniCheckBoxColon.Binding = new System.Windows.Data.Binding("YeniKolondaGorutulenecekAlan");
grid.Columns.Add(yeniCheckBoxColon);

DataGridTemplateColumn kolonu ise içlerinde en çok özelleştirilebilir kolon tipidir. İçerisinde Content tipinde bir özellik olduğu için içerisine istediğimiz şeyi atabiliriz. Örneğin DateTime tipinde bir Property’miz var. Bu Property’nin değerimi kullanıcıya kolon içerisinde DatePicker kontrolü ile gösterebiliriz.

2 çeşit template modu bulunuyor. CellTemplate, CellEditingTemplate. CellTemplate kolonun normal şartlardaki görüntüsünü bize verirken, CellEditingTemplate veriyi düzenlemek istediğimiz de karşımıza çıkacak. Yukarıdaki örneğe dönersek, Kullanıcıya DateTime tipindeki veriyi gösterirken CellTemplate, kullanıcı veriyi değiştirmek istediğin de ise CellTemplateEditing Template’ni gösterebiliriz.

<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
        <TextBlock Text="{Binding Tarih}"></TextBlock>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>

Veriyi listelerken yukarıdaki gibi bir yapıyı kullanıyoruz. Güncellerken farklı kontrolleri de kullanıcıya gösterebiliriz. Bunun için kullanmamız gereken gereken CellEditingTemplate özelliğidir. Burada dikkat etmemiz gereken bir diğer özellik Binding özelliğinin Mode özelliğidir. Mode özelliğini TwoWay olarak belirttiğimizde List verimizin de güncellenmesini sağlıyoruz.

<data:DataGridTemplateColumn Header="Tarih">
    <data:DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding SellStartDate}"></TextBlock>
        </DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
<data:DataGridTemplateColumn.CellEditingTemplate>
    <DataTemplate>
        <basics:DatePicker SelectedDate="{Binding SellStartDate ,Mode=TwoWay}"></basics:DatePicker>
    </DataTemplate>
</data:DataGridTemplateColumn.CellEditingTemplate>
</data:DataGridTemplateColumn>

Run-Time da yani kolonları dinamik olarak eklemek istersek durum biraz karışık gibi görünüyor rünüyor JBunun için kullanılabilecek iki yöntem var. ReSources oluşturmak ve XAMLReader kullanmak.

İlk olarak XAML tarafında ReSources oluşturalım. (Not: Resources, UserControl içerisinde bir dependency property’dir.) ReSources ile kolonların içerisine dinamik olarak DataTemplate ekleyebilmek için DataTemplate’lar oluşturabiliyoruz.

<UserControl.Resources>
    <DataTemplate x:Key="DuzenleninceGorutulenecekKisim">
        <TextBox Text='{Binding SellStartDate, Mode=TwoWay}' />
    </DataTemplate>
    <DataTemplate x:Key="GorunecekKisim">
        <TextBlock Text="{Binding SellStartDate}"></TextBlock>
    </DataTemplate>
</UserControl.Resources>

Şimdi kod tarafına geçip templatefield’ı oluşturabiliriz. XAML’de Resources’e bir key vermiştik. Oluşturduğumuz DataGridTemplateColumn’ın CellTemplate ve CellEditingTemplate özelliklerine Resources’daki oluşturduğumuz DataTemplate’leri atadık. Custom templateleri dinamik olarak oluşturmak istediğimiz de bu şekilde DataTemplate’ler oluşturmak zorundayız.

DataGridTemplateColumn template = new DataGridTemplateColumn();
template.CellTemplate = Resources["GorunecekKisim"] as DataTemplate;
template.CellEditingTemplate = Resources["DuzenleninceGorutulenecekKisim"] as DataTemplate;
template.Header = "Tarih";
grid.Columns.Add(template);

Aynı işlemi XamlReader ile de yapabiliyoruz. Bunun için Resources da tanımladığımız gibi string olarak DataTemplate oluşturacağız.

usingSystem.Windows.Markup; // Eklemeyi unutmayalım

DataGridTemplateColumn tColumn = new DataGridTemplateColumn();
tColumn.Header = "Tarih";
StringBuilderkolonXaml = new StringBuilder();

kolonXaml.Append("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" xmlns:local= \"clr namespace:System.Windows.Controls;assembly=System.Windows.Controls\"><TextBlock Text = \"{Binding SellStartDate}\"/></DataTemplate>");
tColumn.CellTemplate = (DataTemplate)XamlReader.Load(kolonXaml.ToString());

kolonXaml.Append("<DataTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\" xmlns:local= \"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls\"><TextBox Text='{Binding SellStartDate, Mode=TwoWay}' /></DataTemplate>");
tColumn.CellEditingTemplate = (DataTemplate)XamlReader.Load(kolonXaml.ToString());

grid.Columns.Add(tColumn);

XAMLReader.Load Metodu ile String olarak oluşturduğumuz XAML kodu okunur ve geriye objenin tipine uygun sonuç döner.ç döner.

Makalenin sonuna geldik, başka bir makalede görüşmek dileğiyle. .NET ve Silverlight ile kalın ;)

Sem GÖKSU
www.semgoksu.com| www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com
silverlight.net

Merhaba arkadaşlar, bu makalemizde silverlight 2.0 ile birlikte karşımıza çıkan DataGrid kontrolünü tanıyıp, nasıl kullanıldığını ve çeşitli özelliklerini inceleyeceğiz.

DataGrid kontrolünü verilerin listelenmesini sağlamak için kullandığımız web ve windows uygulamalarından biliyoruz. Datagrid, Silverlight 2.0 ile birlikte silverlighta eklendi. Ayrıca verileri listeledikten sonra kolonlara göre sıralama yapabiliyor, kolonların yerini değiştirebiliyoruz. Web’de kullandığımız DataGridView kontrolü gibi çok esnek bir yapıya sahiptir. Datagrid Kolonlarında Text, CheckBox yada kendi Templatelerimizi oluşturup verileri görüntüleyebiliyoruz.

Yeni bir silverlight projesi oluşturarak DataGrid’de verileri listeleyelim. Projeyi ilk açtığımızda ToolBox’da DataGrid kontrolünü bulamayacağız. Bunun için ilk olarak projemizin referanslarına System.Windows.Controls.Data’yı eklememiz gerekiyor.

Referansı ekledikten sonra DataGrid’i uygulamamıza ekleyebiliriz. XAML kodumuz aşağıdaki gibi oldu

Verileri listelemek için gerekli kodu da yazalım. Şimdilik data için kendimiz bir Haber class’ı oluşturalım ve içerisinde 4 tane property bulunsun: HaberID, Baslik, Tarih ve YayinDurumu

Bu sınıfı kullanarak bir List oluşturalım ve içerisine birkaç haber ekleyelim. Haberleri ekleyip List’i doldurduktan sonra verimizi DataGrid’e bağlayabiliriz. Veriyi bağlamak için de DataGrid’in ItemSource özelliğini kullanıyoruz. (Hatırlarsanız WinForm - DataGrid ve WebForm GridView’inde DataSource özelliği vardı.)

Nesneleri oluştururken ve Koleksiyona nesne eklerken de C# 3.0’ın güzelliklerine değinmiş olduk JŞimdi projemizi çalıştırıp test edelim.

Veriler geldi ama benim istediğim düzende değil. Bunun nedeni de Liste içerisinde ne varsa ekran da göstermesidir. Bunu da yapmasının nedeni AutoGenerateColumns özelliğindendir. Bu özellik veri içerisindeki her Property için gerekli kolonların otomotik olarak Grid tarafından yaratılmasını sağlar, varsayılan olarak true’dır. Bu özelliği false yaparak kendi kolonlarımızı ekleyebiliriz. Bunu yapmak için de tekrar blend’e dönelim. Grid’i seçip özellikler menüsüne gidelim. Buradan AutoGenerateColumns özelliğini false yapalım.

Kolonlarımız otomatik olarak gelmeyecek ve artık istediğimiz gibi DataGrid’in kolonlarını biz düzenleyebileceğiz. Bunun içinde yine Özelikler menüsüne gidip Columns’a tıklayarak yeni kolonlar ekleyebiliriz.

Açılan pencereden Add Another Item’a tıklayarak yeni kolonlar ekleyebiliriz.

Add Another Itemdüğmesine tıkladıktan sonra, DataGrid’e ekleyeceğimiz kolon tipini seçiyoruz. Üç adet kolon tipimiz var. DataGridTextColumn, DataGridCheckboxColumn, DataGridTemplateColumn. Kısaca bahsetmek gerekirse DataGridTextColumn ile text verileri gösteriyoruz. Boolen tipindeki verileri DataGridCheckBoxColumn, bunların dışındaki seçenekler için de DataGridTemplateColumn’u kullanıyoruz.

Üç tane DataGridTextColum, bir tane de DataGridTemplateColumn ekleyeceğim.

Column’ları ekledikten sonra şimdilik 2 özelliği belirtmemiz yeterli olacak. Bu özellikler Binding ve Header. Binding bu kolonda gösterilecek olacak verimim yolunu, header ise kolon başlığını belirtiyor.

DataGridTextColumn’larda HaberID, Baslik ve HaberTarihi’ni, Template field içine de bir CheckBoxekliyip SelectedIndex özelliğine de Data’dan gelen değeri bağlayacağım.

XAML kodumuzu da düzenledik. Dikkat edersek verileri bağlamak için {BindingYayinDurumu} gibi bir yöntem kullandık. (Bu yöntem ASP.NET’ deki DataBound kontrolleri için kullandığımız Eval’a benziyor.) DataGridTemplateColumn kolonunun 2 görünüm özelliği var. CellTemplate ve CellEditingTemplate. CellTemplate kolonda ki bilginin sadece gösterilmesi için kullanılır. CellEditingTemplate ise kolonun içersindeki bilginin güncellenebildiği template’dir. İkisi de içerisine DataTemplate alıyor. DataTemplate’in içerisine de istediğimiz kontrolü atıp kullanabiliyoruz. DataTemplate’in içerisine ComboBox kontrolü ekledik. Itemlarında Pasif ve Aktif isimli 2 Item ekledim. 0 ve 1 değerleri geleceği için 0. Index’e pasif’i 1. Index’e de Aktif’i koyduk. SelectedIndex özelliğine de List’den gelecek olan YayinDurumu’nu bağladım. Artık her şey hazır. Son kez örneğimizi çalıştıralım.

Makalenin sonuna geldik, başka bir makalede görüşmek dileğiyle. .NET ve Silverlight ile kalın ;)

Sem GÖKSU
www.semgoksu.com| www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com
silverlight.net

Herkese merhabalar, bu makalemizde Silverlight ile web servislerini konuşturarak web servis aracılığıyla çesitli islemler yapacağız.

Silverlight üzerinde doğrudan sunucu taraflı veritabani erişimi olmadığı için XML yada Web Servisleri gibi farklı aracılar ile veri alişverisini sağlayabiliyoruz. Bu makalemizde de silverlight uygulamalarında web servisinin nasıl kullanildığına, veri alişverişinin nasil yapıldığına bakacağız.

İlk olarak Visual Studio 2008’i açalım ve yeni bir silverlight projesi başlatalım. (Eger ilk kez silverlight ile uygulama geliştiriyorsak burayıokumanızı tavsiye ederim). Solution üzerinde bize 2 adet proje açılıyor. Biri geliştireceğimiz silverlight projesi diğeri ise geliştirdiğimiz uygulamayı test edebilmemiz için eklenen test projesi.

Test projesine yeni bir web servis dosyası ekleyelim. Burada uygulamamızda kullanacagımız servisi hazırlayacagız. İlk olarak basit bir örnek ile konuya girelim. Örneğimiz de basitçe bir login ekranı tasarlayacagız. Silverlight uygulaması üzerinde kullanıcı adı ve sifre için textboxlar olacak. Kullanıcı, kullanıcı adi ve şifresini girip butona bastığında servise bağlanacak ve duruma göre kullanıcıya olumlu yada olumsuz bilgi dönecek. Simdi web servisimizi hazırlayalım.

[WebMethod]
publicbool KullaniciKontrol(string kullaniciAdi, string sifre)
{
    if(kullaniciAdi=="semgoksu" && sifre == "12345")
   {
       return true;
   }
   else
   {
        returnfalse;
   }
}

Web servisimizi hazırladık şimdi silverlight uygulamasında kullanacağımız arayüzü hazırlayalım. Bunun için silverlight projemizi Expression Blend’de açalım.

<UserControlx:Class="SilverlightWebServisOrtakligi.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300" xmlns:d=http://schemas.microsoft.com/expression/blend/2008 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">

<Grid x:Name="LayoutRoot" Background="White">
<TextBox Margin="167,126,112,0"V erticalAlignment="Top" Text="" TextWrapping="Wrap" x:Name="txtKullaniciAdi"/>
<TextBox Margin="167,0,112,122" Text="" TextWrapping="Wrap" VerticalAlignment="Bottom" x:Name="txtSifre"/>
<Button HorizontalAlignment="Right" Margin="0,0,112,96" VerticalAlignment="Bottom"Content="Kontrol Et" x:Name="btnKontrolEt"/>
<TextBlock HorizontalAlignment="Left" Margin="133,0,0,126" Text="Sifre" TextWrapping="Wrap" VerticalAlignment="Bottom" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Left" Margin="85,128,0,0" VerticalAlignment="Top" Text="Kullanici Adi"TextWrapping="Wrap" FontWeight="Bold"/>
<TextBlock Margin="90,79,121,0" VerticalAlignment="Top" Text="ÜYE GIRISI" TextWrapping="Wrap" FontWeight="Bold" FontSize="16" Foreground="#FFFF0000"/>
</Grid>

</UserControl>

Web Servisimiz ve formumuz hazir simdi tekrar visual studio 2008’e dönelim. Silverlight projesinin üzerine gelelim sag tıklayarak , Add Service Reference… tıklayalım. Gelen pencereden discover’a tıklarsak projemiz üzerinde ki servisi bulacaktır. Servise bir isim verip projemize ekleyelim.

Silverlight projesine servisi ekledikten sonra artık yapmamız gereken butona tıklandiginda servise bağlanıp ilgilili metoda parametreleri yollamak. Bunun için paga.xaml.cs’e gidip Butonumuz için bir click event listener olusturalım. Sonrasında da referans olarak eklediğimiz servisin örneğini olusturalım.

ServiceReference1.WebService1SoapClient loginServis = new SilverlightWebServisOrtakligi.ServiceReference1.WebService1SoapClient();

public Page()
{
   InitializeComponent();
   btnKontrolEt.Click += new RoutedEventHandler(btnKontrolEt_Click);
}

void btnKontrolEt_Click(object sender, RoutedEventArgs e)
{
   loginServis.KullaniciKontrolAsync(txtKullaniciAdi.Text, txtSifre.Text);
}

Dikkat edersek metodumuzun ismi bizim verdigimizden biraz daha farkli bir şekilde geldi. Bunun da nedeni silverlightın varsayılan şekli ile web servisleriyle asenkron olarak çalısıyor olmasındandır.

KullaniciKontrolAsyncmetodu ile servise asenkron bir çagrıda bulunuldu. Peki çagrının sonucunu nasıl alacagız? Bunun da çözümü çok basit, metodumuz ile aynı isimde ve sonuna Completed eklenmiş bir event var. (Bu tüm metodlar için geçerli). Bu event tetiklendiginde bize eventarguman'dan result isimli bir property dönüyor. Bu property metodumuzun geri dönüş tipi ile aynı tipte oluyor. Şimdi KullaniciKontrolCompleted eventini oluşturup login işleminin sonucunu alalım.

public Page()
{
   InitializeComponent();
   btnKontrolEt.Click += new RoutedEventHandler(btnKontrolEt_Click);
   loginServis.KullaniciKontrolCompleted += new EventHandler<SilverlightWebServisOrtakligi.ServiceReference1.KullaniciKontrolCompletedEventArgs>(loginServis_KullaniciKontrolCompleted);
}

void loginServis_KullaniciKontrolCompleted(object sender, SilverlightWebServisOrtakligi.ServiceReference1.KullaniciKontrolCompletedEventArgs e)
{
    bool sonuc = e.Result;
    if (sonuc)
   {
       MessageBox.Show("Giris Basarili");
   }
   else
   {
       MessageBox.Show("Giris Hatali");
   }
}

Evet şimdilik yapacaklarımız bu kadar artık uygulamamızı test edebiliriz.

Uygulamamızın başarılı bir şekilde çalıştığını gördük. Uygulamayı bir adım daha ileri götürüp animasyon ile biraz daha süsleyebilirsiniz.

Örnek kodlar için tiklayiniz

Makalemizin sonuna geldik, başka bir makalede görüşmek dileğiyle. .NET ve Silverlight ile kalin ;)

Sem GÖKSU
www.semgoksu.com| www.yazilimgunlugu.com
sem.goksu@yazilimgunlugu.com

Kaynaklar
msdn.com
silverlight.net
daron.yondem.com

Merhaba arkadaslar, bu makalemizde silverlight’in bize sunmus oldugu MediaElement kontrolünün ne ise yaradigini, nerelerde ve nasil kullanildigini inceliyor olacagiz. Media elementi, silverlight uygulamalarinda video oynatmak için kullanabilecegimiz bir kontroldür.

MediaElement kontrolü video oynatma uygulamaları geliştirebilmemiz için silverlight’in bize sunmuş olduğu bir kontrol. MediaElement kontrolü ile mp3 ve wmv dosyalarını oynatabiliyoruz. MediaElement kontrolünü incelediğimizde işimize çok yarayacak metotlar, özellikleri ve eventleri var. Şimdi bunları biraz inceleyelim.

Play() 
Play  metodu, MediaElementi Kontrolüne kaynak olarak belirtilen videonun oynatilmasını sağlar.
Pause()
Pause metodu, videonun duraklatılmasını sağlar.
Stop()
Stop metodu da videonun durdurulmasını sağlar.

AutoPlay
Bu özellik videonun otomatik olarak oynatılıp oynatılmayacağını belirler. True yada False değeri alır.
IsMuted
Bu özellik videonun sessiz modda olup olmadığını belirler. True yada False değeri alır.
Opacity
Videonun opazite(görünüm) oraninin ayarini belirleyen özelliktir. Double tipinde bir deger atanabilir.
Source
MediaElementinde oynatilacak videoyu belirtmemizi saglayan özellik. Uri tipinde deger atayabiliyoruz.
Stretch
Stretch özelligi videonun MediaElementine nasil yerlestirilecegini belirliyor. Üç özellik alabiliyor. Uniform, UniformToFill ve Fill.
Volume
Videonun ses oranini belirleyen özellik. Double tipinde deger atanabilir.

MediaOpened
MediaElementindeki video basladiginda tetiklenecek olan event(olay)’dir.
MediaEnded
MediaElementindeki video bittiginde tetiklenecek olan event(olay)’dir.
DownloadProgressChanged
MediaElementindeki videonun donwload edildikçe oluşan eventidir..
BufferingProgressChanged
Media elementindeki videonun buffer olma(önbelleklenme) yapıldıkça oluşacak olan eventidir.

MediaElementini biliyoruz, özelliklerini de biliyoruz. O zaman artik video oynaticimizi hazirlayabiliriz. Ilk olarak Visual Studio 2008’i açip bir silverlight Projesi baslatalim. (Ilk kez silverlight ile ilgili bir seyler yapiyorsak önce burayi  okumanizi tavsiye ederim.)

Projemizi açtiktan sonra Blend aracina gidelim. Projemizi blende ile açmak için, page.xaml (default xaml sayfamizi degistirdiysek  onun) üzerinde sag click yaparak Open in Expression Blend’e tiklayalim. Sayfamizda bulunan Grid’e 2 Row tanimlayalim. 1. Rowda videomuzu görüntüleyecegimiz media elementi yer alacak. 2. Rowda da 4 tane buton ve sesi degistirebilmemiz için slider kontrolü yer alacak, anlik bufferingi ve donwload miktarini da görebilmek için 2 tane textbox ekleyelim. Her kontrole yapacagi ise göre bir isim verelim. (Kontroller default olarak bir isim almiyor)

 

Videomuz için olusan XAML kodu asagidaki gibi oldu.

<UserControlx:Class="VideoKontrol.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc=http://schemas.openxmlformats.org/markup-compatibility/2006>
    <Gridx:Name="LayoutRoot" Background="White" MinWidth="400"MinHeight="300">
      <Grid.RowDefinitions>
            <RowDefinitionHeight="*"/>
            <RowDefinitionHeight="48"/>
      </Grid.RowDefinitions>// Grid’i ikiye böldüm. Üstteki row’da video elementi yer alacak. Alttaki rowda da videoyu yönetecegim tuslar yer alacak.
      <Button HorizontalAlignment="Left"Margin="8,13,0,13" Grid.Row="1"Content="Play" x:Name="btnPlay"/> // Videoyu oynatacak buton
      <Button HorizontalAlignment="Left"Margin="83,13,0,13" Content="Stop"Grid.Row="1"x:Name="btnStop"/> // Videoyu durduracak buton
      <ButtonHorizontalAlignment="Left"Margin="41,13,0,13"Content="Pause"Grid.Row="1" x:Name="btnPause"/> // Videoyu duraklatacak olan buton
           <Slider Margin="125,15,170,15"Grid.Row="1"Maximum="1"Value="1"  x:Name="sldSes"/> // Videonun sesini ayarlayacak olan slider kontrolü
     <MediaElement Height="Auto"Grid.Row="0"HorizontalAlignment="Left"VerticalAlignment="Top" Width="Auto" Volume="1" x:Name="video"/> // Videomuzu gösterecek olan media kontrolü.
      <Button HorizontalAlignment="Left"Margin="319,11,0,15"Grid.Row="1"Content="Full ekran"Width="75" x:Name="btnFull"/> // Uygulamayi full ekran’da göstermek için kullanacagimiz buton.
     <TextBox HorizontalAlignment="Right " Margin="0,12,88,9" Width="33" Grid.Row="1" Text="" TextWrapping="Wrap" x:Name="txtBuffer"/>  // Bufering degerini gösterecek textbox
     <TextBox HorizontalAlignment="Right" Margin="0,12,126,9" x:Name="txtDownload" Width="33" Text="" TextWrapping="Wrap" Grid.Row="1"/>  // Download oranini gösterecek olan textbox
 </Grid>
</UserControl>

Video oynatici için tasarimi bitirdikten sonra artik video oynatici üzerindeki kontrollerin çalismasini saglayacak kodlari yazalim. Bunun için visual studio 2008’e geçelim ve page.xaml.cs kod dosyasini açalim. Burada default olarak olusan bir event yok. Bunun için ilk olarak uygulama yüklendiginde çalisacak olan event’i olusturalim (Loaded eventi). Bu event içinde de media kontrolünde gösterilecek olan video dosyasini belirtelim.

public Page()
{
   InitializeComponent();
   this.Loaded += new RoutedEventHandler(Page_Loaded);
}

void Page_Loaded(object sender, RoutedEventArgs e)
{
     video.Source = new Uri("http://www.semgoksu.com/images/video.wmv"); // Oynatilacak olan videonun pathi.
}

Ayni sekilde diger kontroller içinde eventleri olusturalim.

public Page()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(Page_Loaded);
    btnPlay.Click += new RoutedEventHandler(btnPlay_Click);
    btnPause.Click += new RoutedEventHandler(btnPause_Click);
    btnStop.Click += new RoutedEventHandler(btnStop_Click);
    btnFull.Click += new RoutedEventHandler(btnFull_Click);
    sldSes.ValueChanged += new RoutedPropertyChangedEventHandler<double>(sldSes_ValueChanged);
    video.BufferingProgressChanged += new RoutedEventHandler(video_BufferingProgressChanged);
    video.DownloadProgressChanged += new RoutedEventHandler(video_DownloadProgressChanged);
} 

void video_DownloadProgressChanged(object sender, RoutedEventArgs e)
{
   txtDownload.Text = (video.DownloadProgress * 100).ToString(); // Download oranini yüzde cinsinden gösterebilmek için media elementinin DonwloadProgress özelligini 100 ile çarptim. Download Progress o anki download oranini veriyor.
}

void video_BufferingProgressChanged(object sender, RoutedEventArgs e)
{
   txtBuffer.Text = (video.BufferingProgress * 100).ToString();// Buffer (Önbellekleme) oranini yüzde cinsinden gösterebilmek için media elementinin BufferingProgress özelligini 100 ile çarptim. BufferingProgress özelligi o anki önbellekleme oranini gösteriyor.
}

void sldSes_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    video.Volume = sldSes.Value; // Sliderin degerine göre ses ayari da degisir.

} 

void btnFull_Click(object sender, RoutedEventArgs e)
{
    Application.Current.Host.Content.IsFullScreen = true; // Uygulamamizi tam ekran moduna getirir.
} 

void btnStop_Click(object sender, RoutedEventArgs e)
{
    video.Stop(); // Videoyu durdurur.
} 

void btnPause_Click(object sender, RoutedEventArgs e)
{
    video.Pause(); // Videoyu duraklatir.
}

void btnPlay_Click(object sender, RoutedEventArgs e)
{
    video.Play(); // Videoyu oynatir.
}

Video oynaticimiz hazir. Test edelim,