Makale Özeti

Bu yazımızda windows phone' da panorama ve pivot control kullanımına göz atıyoruz.

Makale

Merhaba, bu yazımızda Windows Phone ile çalışmaya devam edeceğiz. Windows Phone uygulamalarımız için ekran görüntülerine veya bir takım fotoğraflara çok daha hızlı yollardan erişebilme olanağını Pivot Control kullanımı ile sağlayacağız. Ya da windows phone ekran görüntüsü sınırlarının ötesine taşan büyükçe fotoğraflarımızı, fotoğrafın görüntü kalitesini kaybetmeden, yatay düzlemde, parmakla kaydırarak, rahatça izleyebilme imkanına da Panorama Control ile sağlamış olacağız. Panorama Control ile fotoğrafımızı yatayda kaydırarak görme şansı elde ederken, aynı zamanda verilerimizi veya istediğimiz nesneleri de bu kontrol üzerinde görüntüleyebilme şansımız da olacak.

Şimdi sırasıyla bu kontrollere örneklerle göz atacağız fakat öncesinde eğer pc'mizde 'Windows Phone Developer Tools Beta' kurulu ise, kaldırarak, en son sürüm 'Windows Phone Developer Tools' kurmalıyız.

'VS 2010 / File / New Project / Silverlight For Windows Phone / Windows Phone Application' projesi ekleyerek örneğimizi hazırlamaya başlayalım.

XAML

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

<Grid x:Name="LayoutRoot" Background="Transparent">

  <Grid.RowDefinitions>

    <RowDefinition Height="Auto"/>

    <RowDefinition Height="*"/>

  </Grid.RowDefinitions>

 

  <TextBlock Grid.Row="0" Text="Panaroma and Pivot Control Main Page" Margin="10" FontSize="24"/>

 

  <!--ContentPanel - place additional content here-->

  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

    <Button x:Name="btnPanaroma" Content="Panaroma Control" Height="72" HorizontalAlignment="Left" Margin="62,74,0,0" VerticalAlignment="Top" Width="321" Click="btnPanaroma_Click" />

    <Button x:Name="btnPivot" Content="Pivot Control" Height="72" HorizontalAlignment="Left" Margin="62,150,0,0" VerticalAlignment="Top" Width="321" Click="btnPivot_Click" />

  </Grid>

</Grid>

C#

private void btnPanaroma_Click(object sender, RoutedEventArgs e) {

      NavigationService.Navigate(new Uri("/PanoramaPage.xaml", UriKind.Relative));

 }

 

 private void btnPivot_Click(object sender, RoutedEventArgs e) {

      NavigationService.Navigate(new Uri("/PivotPage.xaml", UriKind.Relative));

 }

Eklediğimiz windows phone projesi üzerine sağ tıklayarak, projemize Panorama ve Pivot kontrollerimizi ekleyelim. 'Proje Sağ Click / Add New Item / Windows Phone Panorama Page'.

Panorama Control


Adından da anlaşılacağı üzere panoramik fotoğraflarımızı rahatlıkla gösterebilecek, aynı zamanda üzerinde istediğimiz nesneleri (veri, fotoğraf, liste v.s) de gösterebileceğimiz bir kontroldür. Parmakla soldan sağa veya yukarıdan aşağıya doğru kaydırarak foğraf üzerinde dolaşabiliriz.


Yandaki şekilden de görüldüğü gibi panorama control'e istediğimiz bir panoromik fotoğraf eklenebilecek bir alan, üst kısımda bir başlık, başlığın altında 'Item' bölümü bulunmaktadır. 'Item' bölümü header ve content'den oluşur. Sağa doğru her kaydırma hareketinde diğer Item bölümüne geçiş sağlanacaktır.

Panorama Page Template ile sayfamızı ekledikten sonra aşağıdaki gibi panorama sayfamızı oluşturalım.

XAML

<Grid x:Name="LayoutRoot">

  <controls:Panorama Title="Balçova'dan İzmir Manzarası" FontSize="16">

    <controls:Panorama.Background>

      <ImageBrush ImageSource="/PanaromaAndPivotApp;component/Images/izmir_balcova_tarafindan.png" />

    </controls:Panorama.Background>

    <!--Panorama item one-->

    <controls:PanoramaItem Header="Özet Bilgi" Orientation="Horizontal">

      <Grid>

        <StackPanel>

          <TextBlock Text="Balçova doğa yürüyüşü." FontSize="22"/>

          <TextBlock Text=" "/>

          <TextBlock Text="Toplam Uzunluk 20 km, Toplam Zaman 7 saat" FontSize="22" TextWrapping="Wrap"/>

        </StackPanel>

      </Grid>

    </controls:PanoramaItem>

 

    <!--Panorama item two-->

    <controls:PanoramaItem Header="Getirilmesi Gerekenler" FontSize="14" Orientation="Horizontal">

      <Grid>

        <StackPanel>

          <TextBlock Text="1- Sırtta taşınabilir bir çanta" FontSize="22"/>

          <TextBlock Text="2- Ağzı vidalı Su Taşıma Kabı" FontSize="22"/>

          <TextBlock Text="3- Kuru Üzüm – Kayısı ve/veya çikolata" FontSize="22"/>

          <TextBlock Text="4- Ana Mola için hafif yiyecekler" FontSize="22"/>

          <TextBlock Text="5- Taşta Sucuk Molası için 1 kangal sucuk/" FontSize="22"/>

        </StackPanel>

      </Grid>

    </controls:PanoramaItem>

 

    <!--Panorama item three-->

    <controls:PanoramaItem Header="KURALLAR:" FontSize="14" Orientation="Horizontal">

      <Grid>

        <StackPanel>

          <TextBlock Text="Bu etkinlik her türlü hava koşulunda gerçekleştirilecektir." FontSize="18"/>

          <TextBlock Text="Yürüyüşe katılan her bir kişi rehberin talimatlarına uymak zorundadır." FontSize="18"/>

          <TextBlock Text="Yürüyüşe katılan kişiler rehberi geçmemelidir." FontSize="18"/>

          <TextBlock Text="Yürüyüşçü yürüyüşün bir yarış olmadığını daima hatırlamalıdır." FontSize="18"/>

          <TextBlock Text="" FontSize="22"/>

        </StackPanel>

      </Grid>

    </controls:PanoramaItem>

  </controls:Panorama>

</Grid>

Pivot Control


Pivot kontrol, panorama kontrolüne oldukça çok benzemektedir. Bu kontrolde de ana pivot kontrol içerisine Item'lar ekleyip, parmakla rahatlıkla kullanım elde edebiliriz.

Örnek bir pivot page üzerinden pivot kontrolü tanımaya çalışalım.

XAML

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

<Grid x:Name="LayoutRoot" Background="Transparent">

  <!--Pivot Control-->

  <controls:Pivot Title="KİTAPÇI">

    <!--Pivot item one-->

    <controls:PivotItem Header="Kitap Özeti">

      <Grid>

        <StackPanel Margin="10">

          <TextBlock Text="Adı"/>

          <TextBlock Text=" "/>

          <TextBlock Text="Microsoft Mobile Development Handbook" TextWrapping="Wrap" />

          <TextBlock Text=" "/>

          <TextBlock Text="Özet"/>

          <TextBlock Text="This  Book is for new and existing mobile application developers who already have some experience developning applications using the .Net Framework" TextWrapping="Wrap" />

 

        </StackPanel>

      </Grid>

    </controls:PivotItem>

 

    <!--Pivot item two-->

    <controls:PivotItem Header="Yazar">

      <Grid>

        <StackPanel Margin="10">

          <TextBlock Text="YAZARI"/>

          <TextBlock Text=" "/>

          <TextBlock Text="Andy Wigley"/>

          <TextBlock Text="Daniel Moth"/>

          <TextBlock Text="Peter Foot"/>

        </StackPanel>

      </Grid>

    </controls:PivotItem>

 

    <!--Pivot item three-->

    <controls:PivotItem Header="Detaylar">

      <Grid>

        <Grid.RowDefinitions>

          <RowDefinition Height="*"/>

          <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

        <Image Grid.Row="0" Margin="10" Source="/PanaromaAndPivotApp;component/Images/kitap_kapagi.png" />

        <TextBlock Text="PUBLISHED BY Microsoft Press A Division Of Ms Corporation Redmond, Washington... " Grid.Row="1" Margin="10" TextWrapping="Wrap" />

      </Grid>

    </controls:PivotItem>

  </controls:Pivot>

</Grid>

Xaml kodlarımızı da tamamladıktan sonra ana sayfadaki Pivot Control butonuna tıkladığımız aşağıdaki gibi pivot kontrolleri ve item'larımızı göreceğiz.

Ekranlar arasında kolayca gezebilme olanağını yakalamış olduk. Yukarıdaki örnekte görüleceği üzere bir kitap tanıtımını yapmak için konuları pivotitem'lara bölerek her bir pivot item'da kitaba ait farklı bir konuyu gösterdik. Kullanıcılar bu item'lar arasında kolaylıkla parmakla kaydırarak geçiş yapabilecek ve hazırladığımız uygulama kullanım kolaylığı ve rahatlığı açısından tercih edilir olacaktır.

Kolay gelsin.

Gökhan Manduz - gokhanmanduz@hotmail.com gmanduz@gmail.com