Makale Özeti

Uygulamamızı etkileyici kılan etkenlerden birisi de tasarımıdır.Windows Phone üzerinde uygulama tasarımı yaparken iki methoddan faydalanırız.

Makale

Kullanıcı Arabirimi Geliştirme konusu çok detaylı olduğundan ötürü elimden geldiğince basit anlatmaya çalışacağım.

Uygulamamızı etkileyici kılan etkenlerden birisi de tasarımıdır.Windows Phone üzerinde uygulama tasarımı yaparken iki methoddan faydalanırız.


-Klasik Yöntem(İmaj Tabanlı)
-XAML Yöntemi(Renk Tabanlı)


Bu bölümde 4 adet kullanıcı arabirimi kontrolü tasarlayacağız:

  • Button
  • CheckBox
  • RadioButton
  • TextBox


En son olarak da seveceğinizi düşündüğüm Yazılara imaj tabanlı efekt vermeyle ilgili bir örnek yapacağız.

Varsayılan tasarımlarına bakalım:

Description: 0.png

Bu Windows Phone 7 kontrollerinin varsayılan görüntüsüdür.Stiller ile oynayıp daha çekici bir tasarım yapmak isteyeceksinizdir.

Klasik Yöntem ile tasarımlara başlayalım:

Klasik Yöntem

Eğer Web Geliştiriciliği ile ilgilendiyseniz,CSS ile uygulamanızda kullanabileceğiniz stiller geliştirebildiğinizi bilirsiniz.Bildiğiniz üzere CSS kullanırken, kullanıcı arayüzüne kendi stilinizi giydirebilirsiniz.Bu stiller yine renk ve imaj tabanlı olabilir.

Web Geliştirenlerin sık kullandığı bu yöntemden yola çıkarak bu yönteme neden Klasik Yöntem dediğimi anlamışsınızdır.
 
Klasik Yöntem’de kontrolün cevap verdiği olaylara yönelik resim dosyalarına sahip olmamız gerekir. Örneğin bir Button için en azından 3 imaj dosyasına sahip olmanız gerekir:

  • Button_Down (Button a basıldığında)
  • Button_Over (Normal hali)
  • Button_Disabled (Enabled özelliği "False" olarak ayarlandığında)

Button Stiline güzel bir örnek:

Button_Down

Description: Button_downSkin.png

Button_Over:

Description: Button.png

Button_Disabled:

Description: Button_disabledSkin.png

Ancak bir TextBox kontrolü için (eğer GotFocus-LostFocus olayları için de stil oluşturmayacaksanız) 1 adet imaj yeterli olacaktır. 


Uygulamamıza stil giydirelim o halde:

Description: 1.png

Yeni bir Silverlight for Windows Phone 7 Uygulaması oluşturun

Projenize şu 4 kontrolü ekleyin: Button, CheckBox, RadioButton and TextBox

Description: 2.png

Evet aynen bu şekilde.

 

 

Şimdi de projenize aşağıdaki kontrollere ait imajları dahil edin:

Description: Button.png (Button)
Description: CheckBox.png (CheckBox)
Description: RadioButton.png (RadioButton)
Description: TextBox.png (TextBox)



Ben düzenli durmaları için "Skins" adlı yeni bir klasör oluşturdum:

Description: 3.png

 

 

Şimdi önümüzde iki seçenek var:

1-Manuel olarak stilleri giydirme
2-Kodlama ile stilleri giydirme


1) Eğer Manuel olarak bu işlemi yapmak isterseniz her bir kontrole ait Background özelliğini az once projeye dahil ettiğimiz stil imajlarını ayarlayarak yapabilirsiniz.Bu arada dikkat edilmesi gereken diğer nokta; “BorderThickness” özelliğini “0” değerini vermeniz.Çünkü eğer tüm kontrolün bizim stilimizde olmasını istiyorsak,XAML tabanlı köşe çizgilerini ortadan kaldırmamız gerekmektedir.Bu işlemi gerçekleştirmek için ilgili kontrole ait Background özelliğini açarak en sağda bulunan resim simgesine tıklayıp ilgili kontrole ait imajları seçmek olacaktır:



Description: 4.png

 



Aynı şekilde diğer controller üzerinde de denedikten sonra Tasarım Anında stilimizi görebiliriz.


Description: 5.png

Görsellik uygulama geliştirmede çok önemlidir ki bu sizing uygulamanızın indirilme-kullanma sayısını da etkileyen bir faktördür.
 

İlk halinden daha canlı görünüyor öyle değil mi?



2) Eğer kodlama ile yapmak isterseniz:

İlk once her control için 4 adet Brush nesnesi oluşturun :

ImageBrush brush = new ImageBrush();
ImageBrush brush_checkbox = new ImageBrush();
ImageBrush brush_radiobutton = new ImageBrush();
ImageBrush brush_textbox = new ImageBrush();

Daha sonra ilgili kod yerinde;

brush.ImageSource = new BitmapImage(new Uri(@"Skins/Button.png", UriKind.Relative));
brush_checkbox.ImageSource = new BitmapImage(new Uri(@"Skins/CheckBox.png", UriKind.Relative));
brush_radiobutton.ImageSource = new BitmapImage(new Uri(@"Skins/RadioButton.png", UriKind.Relative));
brush_textbox.ImageSource = new BitmapImage(new Uri(@"Skins/TextBox.png", UriKind.Relative));

Şeklinde bir kodlama yaparsak tüm Brushlara imajları yerleştirmiş oluruz.

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{ 
    foreach (UIElement uielement in ContentPanel.Children)
    {
       if (uielement.GetType().Name == "Button")
       {
          ((Button)uielement).Background = brush;
          ((Button)uielement).BorderThickness = new Thickness(0);
       }
       else if (uielement.GetType().Name == "CheckBox")
       {
          ((CheckBox)uielement).Background = brush_checkbox;
          ((CheckBox)uielement).BorderThickness = new Thickness(0);
       }
       else if (uielement.GetType().Name == "RadioButton")
       {
          ((RadioButton)uielement).Background = brush_radiobutton;
          ((RadioButton)uielement).BorderThickness = new Thickness(0);
       }
       else if (uielement.GetType().Name == "TextBox")
       {
          ((TextBox)uielement).Background = brush_textbox;
          ((TextBox)uielement).BorderThickness = new Thickness(0);
       } 
    }
}

Kodu ile de tüm kontrollere stil giydirmiş oluruz.

Description: 7.png

Şekilde görüldüğü üzere.Aynı yapı.

 

 

XAML Yöntemi

Bu bölümde size kontrollere XAML ile renk tabanlı stilleri nasıl oluşturacağınızı göstereceğim.


Uygulamanızı oluşturduğunuzu varsayarak;

İlgili kontrollere ait Background özelliğine girerseniz aşağıdaki gibi simgeler göreceksiniz;

Description: 10.png

Ne amaçla kullanıldıklarını açıklayalım:

Description: 11.png

Bunu seçtiğinizde kontrole hiçbir renk,efekt eklemeyecektir(Transparan olacaktır). ContentPanel in rengi ne olursa bu kontrolün de rengi o olur.

Description: 12.png

Bunu seçtiğiniz tek bir renk efekti verirsiniz

Description: 13.png

Bunu seçtiğinizde ise farklı renkler arası geçiş işlemi(Gradient efekti) gerçekleştirmiş olursunuz.

Description: 14.png

Bunu seçerseniz imaj eklersiniz.Lakin bu 1.yöntemdeydi.

Biraz renkler ile oynadıktan sonra şöyle bir görüntü oluştu:

Description: 15.png

Gördüğünüz üzere bu efektleri oluşturmak 5 dakikamızı bile almadı.Ne kadar kolay olduğunu gördünüz.

Aynı şekilde Blend 4 aracını kullanarak da extradan efektler eklemeniz,şekillerin görüntüsünü değiştirmeniz,büyütmeniz,döndürmeniz mümkündür.


Projenizi Blend de açmak için projenize sağ tıklayıp “Open in Expression Blend” demeniz yeterli olacaktır.


Description: 18.png

Bildiğiniz üzere projemizin ilk stili bu şekildeydi.Hadi gelin biraz değişikliğe gidelim.

 

 



Aşağıda Döndürme,Küçültme gibi efektleri ekledik.

Description: 19.png




Description: 22.png

XAML tabanlı stil oluşturmak isterseniz gerek Visual Studio 2010 gerekse de Blend 4 bunu sağladığından ötürü istediğiniz stili verebilirsiniz.

Kodlar:

<Button Content="Click Me" Height="63" HorizontalAlignment="Left" Margin="35.061,8,0,0" Name="button1" VerticalAlignment="Top" Width="148.878"Foreground="White"
 RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" >
              <Button.RenderTransform>
                     <CompositeTransform SkewX="-0.774" TranslateX="0.486"/>
              </Button.RenderTransform>
              <Button.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                           <GradientStop Color="Black" Offset="0"/>
                           <GradientStop Color="Red" Offset="1"/>
                     </LinearGradientBrush>
              </Button.Background>
            </Button>
            <Button Content="Click Me 2" Height="72" HorizontalAlignment="Left" Margin="228,6,0,0" Name="button2" VerticalAlignment="Top" Width="169" >
              <Button.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                           <GradientStop Color="Black" Offset="0"/>
                           <GradientStop Color="Red" Offset="1"/>
                     </LinearGradientBrush>
              </Button.Background>
            </Button>
            <Button Content="Click Me 3" Height="72" HorizontalAlignment="Left" Margin="12,64,0,0" Name="button3" VerticalAlignment="Top" Width="173"RenderTransformOrigin="0.5,0.5" >
              <Button.RenderTransform>
                     <CompositeTransform Rotation="179.8"/>
              </Button.RenderTransform>
              <Button.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                           <GradientStop Color="Black" Offset="0"/>
                           <GradientStop Color="Red" Offset="1"/>
                     </LinearGradientBrush>
              </Button.Background>
            </Button>
            <CheckBox Content="Salad" Height="72" HorizontalAlignment="Left" Margin="12,142,0,0" Name="checkBox1" VerticalAlignment="Top" >
              <CheckBox.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                           <GradientStop Color="Black" Offset="1"/>
                           <GradientStop Color="#FF0084FF"/>
                     </LinearGradientBrush>
              </CheckBox.Background>
            </CheckBox>
            <CheckBox Content="Meat" Height="72" HorizontalAlignment="Left" Margin="228,142,0,0" Name="checkBox2" VerticalAlignment="Top" >
              <CheckBox.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                           <GradientStop Color="Black" Offset="1"/>
                           <GradientStop Color="#FF0084FF"/>
                     </LinearGradientBrush>
              </CheckBox.Background>
            </CheckBox>
            <CheckBox Content="Coke" Height="72" HorizontalAlignment="Left" Margin="12,194,0,0" Name="checkBox3" VerticalAlignment="Top" >
              <CheckBox.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                           <GradientStop Color="Black" Offset="1"/>
                           <GradientStop Color="#FF0084FF"/>
                     </LinearGradientBrush>
              </CheckBox.Background>
            </CheckBox>
            <CheckBox Content="Wine" Height="72" HorizontalAlignment="Left" Margin="228,194,0,0" Name="checkBox4" VerticalAlignment="Top" >
              <CheckBox.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                           <GradientStop Color="Black" Offset="1"/>
                           <GradientStop Color="#FF0084FF"/>
                     </LinearGradientBrush>
              </CheckBox.Background>
            </CheckBox>
            <CheckBox Content="Baklava" Height="72" HorizontalAlignment="Left" Margin="12,244,0,0" Name="checkBox5" VerticalAlignment="Top" >
              <CheckBox.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                           <GradientStop Color="Black" Offset="1"/>
                           <GradientStop Color="#FF0084FF"/>
                     </LinearGradientBrush>
              </CheckBox.Background>
            </CheckBox>
            <CheckBox Content="Chocolate" Height="72" HorizontalAlignment="Left" Margin="228,244,0,0" Name="checkBox6" VerticalAlignment="Top" >
              <CheckBox.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                           <GradientStop Color="Black" Offset="1"/>
                           <GradientStop Color="#FF0084FF"/>
                     </LinearGradientBrush>
              </CheckBox.Background>
            </CheckBox>
            <RadioButton Content="Single" Height="72" HorizontalAlignment="Left" Margin="12,322,0,0" Name="radioButton1" 
            VerticalAlignment="Top"Background="#FFF1FF00" />
            <RadioButton Content="Married" Height="72" HorizontalAlignment="Left" Margin="228,322,0,0" Name="radioButton2" 
             VerticalAlignment="Top"Background="#FFF1FF00" />
            <RadioButton Content="Divorced" Height="72" HorizontalAlignment="Left" Margin="12,381,0,0" Name="radioButton3" 
             VerticalAlignment="Top"Background="#FFF1FF00" />
            <TextBox Height="72" HorizontalAlignment="Left" Margin="6,482,0,0" Name="textBox1" Text="TextBox" VerticalAlignment="Top" Width="444" >
              <TextBox.Background>
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                           <GradientStop Color="Black" Offset="0"/>
                           <GradientStop Color="#FF1FFF00" Offset="1"/>
                     </LinearGradientBrush>
              </TextBox.Background>
            </TextBox>

 


İMAJ TABANLI YAZI EFEKTLERİ


Windows Phone 7’de yazılar üzerinde imaj tabanlı gradient efektler 

oluşturabileceğinizi biliyor muydunuz?

Gelin bunu nasıl yapabiliyoruz hep beraber görelim.

Adım 1 : İlk once yeni bir Windows Phone 7 uygulaması oluşturun ve aşağıdaki resim gibi çok renkli imaj dosyasını projenize dahil edin


Google Buzz simgesi


Description: social_google_buzz_button_256.png

Adım 2 : Projenize bir adet yazı ekleyin.

Description: 1a.png
 

Adım 3 :
 Şimdi Foreground değerini imaj olacak şekilde değiştirin.

Description: 2a.png


Adım 4 : Stretch değerini UniformToFill ‘a çevirmeniz daha gerçekçi bir gradient efekti yakalamanızı sağlayacaktır.Gelin ne yaptık bir göz atalım:

Description: 3a.png


Umarım hoşunuza gitmiştir ve renk tabanlı efektler vermek yerine bu yöntemi uygularsınız.