Makale Özeti

Projenizde ScrollViewer kullanmak için içi nesneler ile doldurulmuş bir Grid e ihtiyaç duyarsınız.ScrollViewer kullanımındaki hile; Grid’in boyutunu ScrollViewer den büyük ayarlamaktan geçer ki aşağı-yukarı işlemleri gerçekleştirilebilsiniz.Aynı zamanda Farklı Panorama Efektleri ve Cihaz Bilgilerine de değinerek sizlere modern mobil uygulama geliştirmenin inceliklerini göstereceğim.

Makale

WP7 Hileleri Mini E-Kitap'tan alinmistir:

Bu bölümde sizlere ScrollViewer Kullanımından başlayarak Farklı bir Panorama Efekti oluşturmayı ve en son olarak da cihazınızdaki bilgilere ulaşabilmenize olanak sağlayan yöntemlerden bahsedeceğim.

O halde başlayalım:



ScrollViewer kullanımı 


Projenizde ScrollViewer kullanmak için içi nesneler ile doldurulmuş bir Grid e ihtiyaç duyarsınız.ScrollViewer kullanımındaki hile; Grid’in boyutunu ScrollViewer den büyük ayarlamaktan geçer ki aşağı-yukarı işlemleri gerçekleştirilebilsin.

Hemen bir örnek ile konuyu netliğe kavuşturalım:

Yeni bir Windows Phone 7 projesi oluşturdunuz diyelim.

Projenize ilk once bir ScrollViewer ekleyiniz ve boyutunu Height “450” ve Width “450” olacak şekilde oluşturalım:

<ScrollViewer Height="446" HorizontalAlignment="Left" Margin="12,12,0,0" Name="scrollViewer1" VerticalAlignment="Top" Width="456">
       
</ScrollViewer>


Daha sonra bu ScrollViewer içerisine bir adet Grid ekleyelim ve Height değerini 700 yapalım:

<Grid Height="700">
 
</Grid>



Şimdi de bu Grid in içerisine birkaç nesne ekleyelim:

 

 

<ScrollViewer Height="450" HorizontalAlignment="Left" Margin="12,12,0,0" Name="scrollViewer1" VerticalAlignment="Top" Width="450">
<Grid Height="700">
<Button Width="200" Height="100" Content="Ornek" Margin="6,552,274,48" />
<Button Content="Ornek" Height="100" Margin="274,552,6,48" Width="200" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="24,37,0,0" Name="checkBox1" VerticalAlignment="Top" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="24,115,0,0" Name="checkBox2" VerticalAlignment="Top" />
<PasswordBox Height="72" HorizontalAlignment="Left" Margin="220,37,0,0" Name="passwordBox1" VerticalAlignment="Top" Width="175" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="105,281,0,0" Name="textBlock1" Text="Örnek" VerticalAlignment="Top" />
</Grid>
 
</ScrollViewer>


Uygulamayı çalıştıralım ve aşağı kaydırdığımızda 2 adet button göreceksinizdir.

 



Eğer Grid tasarımında kolaylık sağlayacak bir yöntem isterseniz,ilk once Grid i tasarlamanızı ardından ScrollViewer I eklemenizi önerebilirim.

Ancak,Grid Telefonun yüksekliğinden de büyükse tavsiyem şudur ki projenize yeni bir User Control ekleyerek tasarımınızı orada yapmak ve işiniz bitince ya UserControl olarak projeye eklemeniz ya da Grid I baştan aşağı kopyalayıp projenizdeki ilgili Grid ile değiştirmeniz yönünde olacaktır.




FARKLI PANORAMA EFEKTLERİ

TersPanorama projesinin kaynak kodları
 

 

Bu bölümde sizlere Windows Phone 7 alışagelmiş olarak kullanılan Panorama projesine alternatif olarak farklı bir yöntem sunacağım.Eğer alternative yöntemler ile Panorama tarzı bir yapı isterseniz,birazdan bahsedeceğim yöntemi uygulayabilirsiniz.Ters Panorama adını verdiğim yöntemden bahsedeyim biraz

 


Ters Panorama 

Ters Panorama’nın çalışma mantığında yanlara doğru sürükleme işlemi değil de yukarıdan aşağıya doğru sürükleme işlemi yapılarak gerçekleştirilen bir Panorama Efektidir.Bu tarz bir projeyi vektörel bir işlem olduğundan ötürü Expression Blend ile yapmak gerekir.

O halde yapımına başlayalım.
Yeni bir Panorama Uygulaması oluşturun:

 

 

 

 

 

Daha sonra LayoutRoot u seçerek 90 derece saga ya da  sola döndürün:

 

 

 

 

 



Uygulamanızın üzerinde de birkaç değişiklik yaparak; Panorama Headerlar kaldırılması onun yerine TextBlock nesneleri ile hangi Panorama sayfasında olduğunun belirtilmesi ve ilgili PanoromaItem lara Grid eklenerek kontrollerin eklenmesi gibi güncellemeler yaparsak istediğimiz yapıya kavuşacağız.




Varsayılan Panorama yine bildiğimiz şekliyle uygulanır ancak bu sefer dikey olarak.

Yardımcı olması sebebiyle uygulamaya ait kodları paylaşıyorum:

<phone:PhoneApplicationPage


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


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


          xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"


          xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"


          xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"


          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"


          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"


          xmlns:es="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"


          mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"


          x:Class="TersPanorama.MainPage"


          d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"


          FontFamily="{StaticResource PhoneFontFamilyNormal}"


          FontSize="{StaticResource PhoneFontSizeNormal}"


          Foreground="{StaticResource PhoneForegroundBrush}"


          SupportedOrientations="Portrait" Orientation="Portrait"


          shell:SystemTray.IsVisible="False">


 


          <!--LayoutRoot is the root grid where all page content is placed-->


          <Grid x:Name="LayoutRoot" Background="Transparent" RenderTransformOrigin="0.5,0.5" Margin="-17.009,17.021,17.009,16.997" UseLayoutRounding="False"d:LayoutRounding="Auto">


                   <Grid.RenderTransform>


                             <CompositeTransform Rotation="-89.841"/>


                   </Grid.RenderTransform>


 


                   <!--Panorama control-->


                   <controls:Panorama Title="" Margin="-154.007,163.986,-156.015,-163.986" RenderTransformOrigin="0.5,0.5">


                             <controls:Panorama.RenderTransform>


                                      <CompositeTransform Rotation="-0.096"/>


                             </controls:Panorama.RenderTransform>


                             <controls:Panorama.Background>


                                      <ImageBrush ImageSource="PanoramaBackground.png"/>


                             </controls:Panorama.Background>


 


                             <!--Panorama item one-->


                             <controls:PanoramaItem Header="" RenderTransformOrigin="0.5,0.5">


                                     


                                      <Grid Margin="0,-114,0,0">


                                                <Button Content="Click" HorizontalAlignment="Right" Margin="0,150.654,101.323,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5"Width="158.179">


                                                          <Button.RenderTransform>


                                                                   <CompositeTransform Rotation="89.891"/>


                                                          </Button.RenderTransform>


                                                </Button>


                                                <TextBlock HorizontalAlignment="Right" Margin="0,193.876,-78.937,0" TextWrapping="Wrap" Text="First Item" VerticalAlignment="Top" FontSize="64"RenderTransformOrigin="0.5,0.5">


                                                          <TextBlock.RenderTransform>


                                                                   <CompositeTransform Rotation="89.767"/>


                                                          </TextBlock.RenderTransform>


                                                </TextBlock>


                                               


                                      </Grid>


                             </controls:PanoramaItem>


 


                             <controls:PanoramaItem Header="" RenderTransformOrigin="0.5,0.5">


                                      <Grid Margin="0,-113.993,0,0">


                                                <TextBlock HorizontalAlignment="Right" Margin="0,241.821,-128.49,0" TextWrapping="Wrap" Text="Second Item" VerticalAlignment="Top" FontSize="64"RenderTransformOrigin="0.5,0.5">


                                                          <TextBlock.RenderTransform>


                                                                   <CompositeTransform Rotation="89.767"/>


                                                          </TextBlock.RenderTransform>


                                                </TextBlock>


                                               


                                                <es:RegularPolygon InnerRadius="1" Margin="216.752,174.93,188.933,393.919" PointCount="3" Stretch="Fill" Stroke="Black" RenderTransformOrigin="0.5,0.5">


                                                          <es:RegularPolygon.Fill>


                                                                   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">


                                                                             <GradientStop Color="White" Offset="0"/>


                                                                             <GradientStop Color="#FF0079FF" Offset="1"/>


                                                                   </LinearGradientBrush>


                                                          </es:RegularPolygon.Fill>


                                                          <es:RegularPolygon.RenderTransform>


                                                                   <CompositeTransform Rotation="90.385"/>


                                                          </es:RegularPolygon.RenderTransform>


                                                </es:RegularPolygon>


                                               


                                      </Grid>


                             </controls:PanoramaItem>


                   </controls:Panorama>


          </Grid>


</phone:PhoneApplicationPage> 

 

 

Sonuç olarak Ters Panorama efektine neden ihtiyaç olduğundan bahsedeceğim:

Panorama terimi bildiğiniz üzere  bir manzarayı 360 derece Yatay  olarak yansıtan bir resim çekme methodudur.Panorama çekildikten sonra düz bir resimmiş gibi çıktı gösterir.Bu aslında resmin 360 derece açıyla en makulünden 4 adet resmin 90'ar derece açılarla çekilmesi sonucu ortaya çıkan bir güzelliktir.Panorama'da sadece Yatay resim çekme yoktur.Dikey olarak da Panorama resmi çekilebilir veya her ikisini de kullanarak Yatay-Dikey panorama efektleri çekmekte mümkündür.

Bu makalemde de aslında bunun mümkün olduğuna işaret etmek istedim.Windows Phone 7 geliştiriciliğinde Panorama Yatay kullanılabildiği gibi Dikey olarak da kullanılabilir.

 

 

AYGIT BİLGİLERİ

 

Windows Phone 7 aygıtınıza ait bilgilere ulaşmak mı istiyorsunuz? Size bunu nasıl yapacağınızı birazdan anlatacağım.
Emulatör kullandığımdan ötürü olacak ki gerçekçi veriler alınamayacaktır bu sebepten ötürüdür ki gerçek bir aygıt üzerinde test etmeniz yararınıza olacaktır

O halde başlayalım.

Örneğimizde aşağıda gördüğünüz bilgilere erişmeye çalışacağız:

  • Manufacturer
  • Device Name
  • Device ID
  • Firmware Version
  • Hardware Version
  • Total Memory
  • Application Current Memory Usage
  • Application Peak Memory Usage


Bu örneğimizde DispatcherTimer vasıtasıyla her 3 saniyede bir bilgileri güncelleyen 8 adet Textblock nesnesine sahip bir uygulama geliştireceğiz.
 
Uygulamamızın görünüşü aşağıdaki gibi olacaktır:
 
Description: image1.gif


  Manufacturer = textBlock2


 Device Name = textBlock4


 Device ID = textBlock6


 Firmware Version = textBlock8


 Hardware Version = textBlock10


 Total Memory = textBlock12


 Application Current Memory Usage = textBlock14


 Application Peak Memory Usage = textBlock16



Yukarıda ilgili textblock nesnelerine çekeceğimiz bilgileri eşleşmiş olarak görmektesiniz.

İlk öncelikle yapacağımız işlem bir DispatcherTimer nesnesi oluşturmak olacaktır.

1 DispatcherTimer timer;



Tabi bunu dahil etmek için System.Windows.Threading namespace’ini projenize eklemeniz gerekmektedir.

Device ID bilgisini string formatında çekmek için bir değişken tanımladık:

1 public static string val;



Device ID’yi byte tipinde döndüren ve bunu “val” adlı string değişkene aktaran bir fonksiyon geliştirdik.

01 public static byte[] GetDeviceUniqueID()
02 {
03    byte[] result = null;
04    object uniqueId;
05    if (DeviceExtendedProperties.TryGetValue("DeviceUniqueId"out uniqueId))
06    {
07        result = (byte[])uniqueId;
08    }
09    val=Convert.ToBase64String(result);
10    return result;
11 }

 

Yukarıdaki kodun kaynağı :
http://www.nickharris.net/2010/09/windows-phone-7-how-to-find-the-device-unique-id-windows-live-anonymous-id-and-manufacturer/ 

Device ID yi direct çekseydik bize byte tipinde veriler gönderecekti.Dolayısıyla burada yaptığımız aslında Unique ID yi bulmak oldu.

Şimdi yapacağımız işlemde ise DispatcherTimer nesnesi çalıştırmak ve DeviceUniqueID yi bulmaktır.

1 timer = new DispatcherTimer();
2 timer.Interval = new TimeSpan(0, 0, 3);
3 timer.Tick += new EventHandler(timer_Tick);
4 timer.Start();
5 GetDeviceUniqueID();



Tabi timer_Tick fonksiyonumuzu da unutmayalım:

01 void timer_Tick(object sender, EventArgs e)
02 {
03  
04   try
05    {    
06     textBlock2.Text = DeviceExtendedProperties.GetValue("DeviceManufacturer").ToString();
07     textBlock4.Text = DeviceExtendedProperties.GetValue("DeviceName").ToString();
08     textBlock6.Text = val;
09     textBlock8.Text = DeviceExtendedProperties.GetValue("DeviceFirmwareVersion").ToString();
10     textBlock10.Text = DeviceExtendedProperties.GetValue("DeviceHardwareVersion").ToString();
11     textBlock12.Text = DeviceExtendedProperties.GetValue("DeviceTotalMemory").ToString();
12     textBlock14.Text =DeviceExtendedProperties.GetValue("ApplicationCurrentMemoryUsage").ToString();
13  
14 textBlock16.Text =DeviceExtendedProperties.GetValue("ApplicationPeakMemoryUsage").ToString();              
15    }
16    catch (Exception ex)
17    {
18  
19    }
20  
21 }



DeviceExtendedProperties kullanarak WP7 Aygıtına ait bilgilere erişebiliyoruz.Parametreleri hakkında daha fazla bilgi isterseniz aşağıdaki linke bir gözatmanızda fayda var:

http://msdn.microsoft.com/en-us/library/ff941122(v=VS.92).aspx 

Uygulamamızı çalıştırdıktan sonra bilgilerimize ulaşmış olarak görürüz:

Description: image2.gif

Daha önceden de dediğim gibi Emulator üzerinde test edildiğinden ötürü Device ID anlamsız bir biçimde karşımıza çıkmaktadır.Ama eminim ki eğer bir Windows Phone 7 aygıtında denerseniz istediğiniz sonucu alacaksınızdır. 

 

 

Sonuç

Sizlere bu yazımda bahsettiğim yöntemler Windows Phone 7 geliştirme yaparken işinize yarayacak küçük hilelerdir.Gerek ScrollViewer gerekse de diğer hileler günümüz mobil uygulamalarında yoğunlukla kullanılan yöntemlerdir.Bu yöntemleri kullanmanızın size verimlilik ve hız kazandıracağından şüpheniz olmasın.