Windows Phone' da Panorama ve Pivot Control

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

<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"/> <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 fotoğraf üzerinde dolaşabiliriz.

Aşağıdaki ş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>

<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>

<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>

<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.

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

XAML

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

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

<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>

<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>

<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.