Windows 8’e Giriş

Windows 8 Ortamı

Windows 8 Yenilikleri

Geliştiriciler için Yenilikler

Kavramlar

Visual Studio 2012 Şablonları

Tasarım

UI Guidelines

Kullanıcı Arabirimi Geliştirme

Windows Store Kontrolleri

Yaşam Döngüsünü kontrol etme

App Manifest Dosyası

Uygulama İmzalama

Deployment Seçenekleri

Geliştirme

Contract Bilgilerine Erişim

Arama İşlevselliği

Paylaşma İşlevselliği

Ses ve Video Dosyaları

Uygulama Ayarları

Kullanıcı Arabirimi

Animasyon ve Geçişler

Layout-Aware Tasarımlar

Kullanıcı Etkileşimi

Live Tiles

Toast Notification

Text-To-Speech İşlemleri

Navigasyon İşlemleri

Devamı var…

WINDOWS 8’E GIRIŞ

WINDOWS 8 ORTAMI

WINDOWS 8 ILE GELEN YENILIKLER

• Yepyeni bir Arayüz

• Metro UI

• Windows Store

• Outlook Hesabının tüm Microsoft ürünlerinde kullanılabilmesi

• Snap-in Ekranlar

• Yepyeni bir Task Manager

• ARM cihazlara da yüklenebilme özelliği

• USB 3.0 desteği

• Hyper-V(Windows 8 Pro)

• WindowsToGo(USB lere Windows 8 kurulumu)

GELIŞTIRICILER IÇIN YENİLİKLER• HTML5,Javascript,CSS ve Jquery

• C++ ve XAML

• C++ ve Direct3D

• MonoGame(Önceki ismi XNA idi)

• C#/VB ve XAML

• Windows Store

• Etkileyici Arayüzler geliştirme imkanı

• Geliştirdiğiniz uygulamaları satabilir,deneme sürümünü yayınlayabilir ya da ücretsiz olarak kullanılmasını sağlayabilirsiniz.

• Remote Debugging/Releasing

• System.Data yok! Yerine Servisleri(WCF,WebServisleri,REST) veya Local Data(SqlLite) kullanabilirsiniz.

KAVRAMLAR

• WinRT : Windows Store Uygulamalarının çalışması için ihtiyaç duydukları kütüphane.

• Windows RT : ARM işlemcili makineye yüklenen Windows 8 cihazına verilen ad. Örneğin; “Surface Windows RT” gibi…

• WOA: Açılımı “Windows on ARM” olan,ARM cihazlarda çalışan Windows 8 işletim sistemiversiyonu.

• Metro : Windows Phone 7 ile birlikte dünyayı kasıp kavurmuş,yeni nesil kullanıcıarayüzü.Küçük-Büyük kutucuklardan meydana gelen tasarım fikri.

• Modern UI: Metro’nun İş Dünyasındaki ismi.

• WinMD: Açılımı “Windows Metadata” dır.Windows Runtime dosyalarını belirten uzantısı.winmd olan Windows Runtime kütüphaneleridir. “C:\Windows\System32\WinMetadata” adresinde ilgili windows runtime dosyalarına erişebilirsiniz. “.NET Reflector” vasıtasıyladosyaları açıp kütüphaneye göz gezdirebilirsiniz.

• WinJS: Javascript ile Windows Store Uygulamalarında kullanılan Windows runtime dosyalardır.Windows kütüphanesini kullanır.

VISUAL STUDIO 2012 ŞABLONLARI

• Windows Store Şablonları

• Blank App

• Grid App

• Split App

• Windows Runtime Component

Tasarım Geliştirme

UI Guidelines

Kullanıcı Arabirimi Geliştirme

Windows Store Kontrolleri

Uygulama Yaşam Döngüsü

App Manifest Dosyası

Uygulama İmzalama

Deployment Seçenekleri

UI GUIDELINES

UI Guidelines, Microsoft tarafından yazılmış,Windows Store uygulamalarınızın işleyişini nasıl güzelleştirebileceğinizive size en ideal Windows 8 Uygulamanızı nasıl yazabileceğinizi söyleyen birkaç önergeden oluşmuştur.

http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx

adresinden tüm Kullanıcı Arabirimi Geliştirme Rehberine ulaşabilirsiniz.

Bu kuralları uygulamanız zorunlu değildir. Uygulamanızın tasarımını istediğiniz şekilde geliştirebilirsiniz.

Microsoftun burada planladığı olay; size tasarım yönü kuvvetli Windows Store Uygulamalarından en iyi verimi almanızı sağlamaktır.

KULLANICI ARABIRIMI GELIŞTIRME

Kullanıcı Arabirimi Geliştirmek için bazı hazır Visual Studio Şablonları bulunur: Grid ve Split App

Bunun dışında kendi Kullanıcı Arabiriminizi Geliştirmek isterseniz; Blank App Projesi vasıtasıyla kendi tasarımınızı gerçekleştirebilirsiniz.Bunu yaparken Windows Store uygulamalarında kullanabileceğiniz bazı kontroller mevcuttur.

Bir sonraki kısımda bu kontrollere değineceğiz.

Örnek Windows 8 Uygulama Tasarımlarına bakalım.

KULLANICI ARABIRIMI GELIŞTIRME – ÖRNEK UYGULAMALAR

Windows 8 Uygulaması

KULLANICI ARABIRIMI GELIŞTIRME – ÖRNEK UYGULAMALAR

AKBANKWindows 8 Uygulaması

KULLANICI ARABIRIMI GELIŞTIRME – ÖRNEK UYGULAMALAR

Windows 8 Uygulaması

WINDOWS STORE KONTROLLERI

• App Bar• Border• Button• Canvas• CheckBox• ComboBox• FlipView• Grid• GridView• HyperlinkButton• Image• Listbox

• ListView• Media Element• PasswordBox• Popup Menu• Progress Bar• Progress Ring• RadioButton• RepeatButton• ScrollViewer• Semantic Zoom• Slider• StackPanel

• TextBlock• TextBox• ToggleButton• ToggleSwitch• ToolTip• VariableSizedWrapGrid• ViewBox• WebView

WINDOWS STORE KONTROLLERI – APP BAR

Uygulamamızda kullanacağımız işlevleribarındıran bir toolbar nesnesidir.

<Page.BottomAppBar> <AppBar x:Name="bottomAppBar" Padding="10,0,10,0"><Grid><StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>

</StackPanel><StackPanel Orientation="Horizontal" HorizontalAlignment="Right"><Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>

</StackPanel></Grid></AppBar></Page.BottomAppBar>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – BORDER

Köşeleri Çizgili Panel tadında çalışan bir kontroldür.

<Border BorderBrush="Gray" BorderThickness="4" Height="108" Width="64"><StackPanel><Rectangle Fill="Yellow"/><Rectangle Fill="Green"/></StackPanel>

</Border>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – BUTTON

Tıklandığında bir olay meydana gelmesi beklenen kontroldür.

<Button x:Name="button1" Content="Button" Click="Button_Click" />

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – CANVAS

İçerisindeki kontrollerin pozisyon bilgilerini ayarlayabileceğimiz layout kontrolüdür.

<Canvas Width="120" Height="120"><Rectangle Fill="Red"/><Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/><Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/><Rectangle Fill="Yellow" Canvas.Left="60" Canvas.Top="60"/> </Canvas>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – CHECKBOX

Çoklu seçim yapmamızı sağlayan bir kontroldür.

<CheckBox x:Name="checkbox1" Content="CheckBox" Checked="CheckBox_Checked"/>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – COMBOBOX

Açılan kutudan bir eleman seçmemizi sağlar.

<ComboBox x:Name="comboBox1" SelectionChanged="ComboBox_SelectionChanged" Width="100"><x:String>Item 1</x:String> <x:String>Item 2</x:String> <x:String>Item 3</x:String>

</ComboBox>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – FLIPVIEW

İçerisinde birden fazla resim olup aynı panel içerisinde sırayla görüntülenebilen resim kontrolüdür.Dokunmatik ekranlarda ağa-sola kaydırarak,Dokunmatik olmayan ekranlarda ise panel kontrolünün sol ve sağ bölümlerinde bulunan kutucuklara tıklanarak diğer resimlere geçiş yapılır.

<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged"><Image Source="Assets/Logo.png" /><Image Source="Assets/SplashScreen.png" /><Image Source="Assets/SmallLogo.png" />

</FlipView>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – GRID

Child Elementlerini ve pozisyonlarını belirleyebileceğimiz en sık kullanılan Layout kontrolüdür.

<Grid> <Grid.RowDefinitions><RowDefinition Height="50"/><RowDefinition Height="50"/></Grid.RowDefinitions> <Grid.ColumnDefinitions><ColumnDefinition Width="50"/><ColumnDefinition Width="50"/></Grid.ColumnDefinitions>

<Rectangle Fill="Red"/> <Rectangle Fill="Blue" Grid.Row="1"/> <Rectangle Fill="Green" Grid.Column="1"/> <Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/> </Grid>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – GRIDVIEW

Bir dizi koleksiyon elemanını sütun ve satır bilgilerini de vererek görüntüleyen kontroldür.

<GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged"><x:String>Item 1</x:String><x:String>Item 2</x:String> </GridView>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – HYPERLINK BUTTON

Button şeklinde çalışan bir websitesi veya dosyaya link verebileceğiniz kontroldür.

<HyperlinkButton Content="www.microsoft.com" NavigateUri="http://www.microsoft.com"/>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – IMAGE

Bir resim dosyasını göstermemize olanak sağlayan kontroldür.

<Image Source="Assets/Logo.png" />

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – LISTBOX

Listbox bir veya birden fazla eleman seçebileceğimiz bir liste kontrolüdür.

<ListBox x:Name="listBox1" SelectionChanged="ListBox_SelectionChanged" Width="100"><x:String>Item 1</x:String><x:String>Item 2</x:String><x:String>Item 3</x:String> </ListBox>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – LISTVIEW

ListView kontrolü Dikey olarak üzerinde gezinebileceğimiz bir kontroldür.

<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged"><x:String>Item 1</x:String><x:String>Item 2</x:String> </ListView>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – MEDIAELEMENT

MediaElement kontrolü Ses ve Video dosyalarını oynatmamıza olanak sağlar.

<MediaElement PosterSource="/Images/myvideo.png" Name="myMedia" Height="350" Width="640« Source="/Videos/myvideo.avi" />

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – PASSWORDBOX

Belirli bir karakterde şifre girebileceğimiz Textbox kontrolüdür.

<PasswordBox x:Name="passwordBox1" IsPasswordRevealButtonEnabled="True" PasswordChanged="PasswordBox_PasswordChanged" />

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – POPUP MENU

Popup Menu,üzerine basılı tutulunca çıkan veya mouse un sağ tuşuna basıldığında ortaya çıkan kısayol menü kontrolüdür.Diğer bir adı: ‘Context Menu’ dür.

public async void ShowMenu(){

PopupMenu menu = new PopupMenu();menu.Commands.Add(new UICommand { Label="Ornek1",Id=1 });menu.Commands.Add(new UICommand { Label = "Ornek2", Id = 2 });await menu.ShowAsync(new Point(30, 30));

}

Kod Yapısı(C#):

WINDOWS STORE KONTROLLERI – PROGRESSBAR

Önceden belirlediğimiz bir değere göre ilerleyen bir hareket çubuğudur.Değişik şekilleri mevcuttur.

<ProgressBar x:Name="progressBar1" Value="50" Width="100"/>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – PROGRESSRING

ProgressBar a çok benzer, sadece şekil olarak farklıdır.

<ProgressRing x:Name="progressRing1" IsActive="True"/>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – RADIOBUTTON

Sadece tek bir eleman seçebileceğimiz kontroldür.

<RadioButton x:Name="radioButton1" Content="RadioButton 1" GroupName="Group1" /> <RadioButton x:Name="radioButton2" Content="RadioButton 2" GroupName="Group1" IsChecked="True"/> <RadioButton x:Name="radioButton3" Content="RadioButton 3" GroupName="Group1" />

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – REPEATBUTTON

Tuş bırakılana kadar çalışacak Button tipinde kontroldür. RepeatButton bir özelliği basıldığı andan itibaren Click eventine yazılan kod Button Release olana kadar çalıştırılır.

<RepeatButton x:Name="repeatButton1" Content="Repeat Button" Click="RepeatButton_Click" />

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – SCROLL VIEWER

Yukarı ve aşağı kaydırılabilen bir panel kontrolüdür.İçerisine kontrolün kendisinden büyük bir Grid aktardığınızda Panorama tadında bir efekt vermeniz mümkündür.

<ScrollViewer HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" Height="200" Width="200"><Image Source="Assets/Logo.png" Height="400" Width="400"/>

</ScrollViewer>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – SEMANTIC ZOOM

SemanticZoom 2 alandan oluşur: ZoomedInView ve ZoomedOutView. Bu alanlar dokunmatik ekranlarda genellikle başparmak ve işaret parmağı ya da dokunmatik olmayan makinelerde mouse kullanarak bir yeri büyüttüğünüzde veya küçülttüğünüzde görünmesini istediğiniz alanları ifade eder.

<SemanticZoom HorizontalAlignment="Left" Margin="94,156,0,0" VerticalAlignment="Top" Height="354" Width="692"><SemanticZoom.ZoomedInView>

<GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False"><x:String>Item 1</x:String><x:String>Item 2</x:String> </GridView>

</SemanticZoom.ZoomedInView><SemanticZoom.ZoomedOutView><GridView ScrollViewer.IsHorizontalScrollChainingEnabled="False« ScrollViewer.IsVerticalScrollChainingEnabled="False">

<x:String>Item 3</x:String><x:String>Item 4</x:String></GridView></SemanticZoom.ZoomedOutView>

</SemanticZoom>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – SLIDER

Slider maximum değeri belirtilmiş,sürükleyerek belirli bir sayı seçmemize yarayan bir kontroldür.

<Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – STACKPANEL

StackPanel tek bir sırada Dikey veya Yatay kontroller barındırabileceğimiz bir Panel kontrolüdür.

<StackPanel><Rectangle Fill="Red"/><Rectangle Fill="Blue"/><Rectangle Fill="Green"/><Rectangle Fill="Yellow"/> </StackPanel>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – TEXTBLOCK

Bu kontrol düzenlenemez bir yazı yazar. Etiket(Label) kontrolü diye de bilinir.

<TextBlock x:Name="textBlock1" Text="I am a TextBlock" />

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – TEXTBOX

Textbox içerisine veri girişi yapabileceğimiz bir kontroldür.

<TextBox x:Name="textBox1" Text="I am a TextBox" TextChanged="TextBox_TextChanged" />

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – TOGGLEBUTTON

2 veya 3 adet durumu bulunan(Indeterminate,Checked,UnChecked) CheckBox kontrolünün Button versiyonudur.

<ToggleButton x:Name="veri" Content="ToggleButton" HorizontalAlignment="Left" Margin="963,80,0,0" VerticalAlignment="Top" Height="84" Width="181" IsChecked= "True" IsThreeState="True"/>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – TOGGLESWITCH

Eleman değerlerini sonradan düzenleyebileceğimiz 2 seçeneği(OnContent-OffContent) olan; bir elemanı diğer tarafa sürükleyerek işlem yapmasını sağladığımız kontroldür. Örnek olarak; Uygulamalarınızda Ses Açma/Kapama işlemleri için kullanılabilir.

<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch" OnContent="On" OffContent="Off" Toggled="ToggleSwitch_Toggled"/>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – TOOLTIP

İlgili kontrolün üzerinde bir Popup nesnesi gösterebileceğimiz bir kontroldür.Sadece Bilgilendirme amacıyla kullanılır.

<Button Content="Button" Click="Button_Click" ToolTipService.ToolTip="Click to perform action" />

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – VARIABLESIZEDWRAPGRID

Child elemanlarına sütun ve satır değerleri vermemizi sağlayan Canvas kontrolünün bir gelişmiş versiyonu olan Panel kontrolüdür.

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44"><Rectangle Fill="Red"/><Rectangle Fill="Blue" Height="80" VariableSizedWrapGrid.RowSpan="2"/><Rectangle Fill="Green" Width="80" VariableSizedWrapGrid.ColumnSpan="2"/><Rectangle Fill="Yellow" Height="80" Width="80" VariableSizedWrapGrid.RowSpan="2" VariableSizedWrapGrid.ColumnSpan="2"/> </VariableSizedWrapGrid>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – VIEWBOX

Viewbox kontrolü Panelimsi bir kontroldür ve içindeki kontrolleri belirlenen bir boyuta göre büyütmenize olanak sağlar.Özellikle de Windows Store Uygulamalarında yoğun bir şekilde kullanılması gerekir.Farklı resolutionlara geçildiğinde aynı görüntüyü elde etmek istiyorsak ViewBox kontrolünü kullanmamız gerekir.Genel kullanım alanı olarak ‘Oyunlar’ı gösterebiliriz.

<Viewbox MaxWidth="25" MaxHeight="25"><Image Source="Assets/Logo.png"/>

</Viewbox> <Viewbox MaxWidth="75" MaxHeight="75">

<Image Source="Assets/Logo.png"/> </Viewbox> <Viewbox MaxWidth="150" MaxHeight="150">

<Image Source="Assets/Logo.png"/> </Viewbox>

Kod Yapısı(XAML):

WINDOWS STORE KONTROLLERI – WEBVIEW

Webview kısaca bir websitesini açmaya yarayan bir kontroldür.Webview de aynı zamanda html kodlarını da çalıştırabilirsiniz.

<WebView x:Name="webView1" Source="http://dev.windows.com" Height="400" Width="800" />

Kod Yapısı(XAML):

string Content ="<html><head></head><body>Welcome to My Blog</body></html>";

WebView1.NavigateToString(Content);

ya da HTML Kodunu Çalıştırma(C#):

UYGULAMA YAŞAM DÖNGÜSÜ

Windows Store ilk çalıştırılmaya başlandığında ilk önce“OnLaunched” ardından da “OnActivated” eventi fırlatılırböylelikle uygulama paketi “Running” moda girerek çalışır.Eğer ki pencereler arası geçiş yaptıysanız; örneğinMetro UI den çıkarak Desktop Mode’da bir müddet kaldıysanız,Uygulama işlemciyi meşgul etmemek adına “OnSuspending” Eventini çalıştırır.Böylelikle “Suspended” moda girmiş olur. ”Suspended” modda iken uygulamanız kapatılmış olmaz.

Bunun yerine uygulamanızın o anki state’ini saklayarakcacheler ve arka planda çalışıyor gibi görünür ama herhangibir background işlemi gerçekleştirmez bu da işlemciyi“Suspended” modda iken kullanmadığını gösterir.Ancakuygulamayı yeniden açınca ilk önce uygulamanın state’iniyükler ve ardından “Resuming” eventi fırlatılarak uygulamakaldığı yerden çalışmaya devam eder.

APP MANIFEST DOSYASI

Uygulamanıza ait tüm bilgilerin;

• Izinler• Görevler• Logolar• Versiyonlama• Globalization• Orientation

vb. bilgilerin saklandığı dosyadır.

Genel itibariyle hem Designer hem de XML dosyası olarak görüntülenebilir.

APP MANIFEST DOSYASI – DESIGNER VE KOD

UYGULAMA IMZALAMA

Geliştireceğiniz her Windows 8 uygulaması muhakkak bir “License” a ihtiyaç duyacaktır.

İster Windows Store üyeliğiniz olsun isterse olmasın; uygulamalarınızın tâ oluşturulurken internet üzerindenlisans dosyası indirir ve projeye dahil eder.Tabi lisans dosyası indirilmeden önce hangi hesabınız Marketplaceüyeliğiyle ilişkilendirildiyse onunla giriş yapmalısınız

Bu lisans dosyası “.pfx” uzantılı içerisinde lisans anahtarı bulunan okunması zor bir dosyadır.

Bu lisans dosyası vasıtasıyla uygulama yükler veya dağıtabilirsiniz.

Eğer ki bir Developer Lisansa sahipseniz uygulamanızı Marketplace üzerinden dağıtabilirsiniz,eğer yoksaUygulamanızı .appx paketine çevirip her 30 günde lisans yenileme şartıyla windows 8 makinelere kurabilirsiniz.

Hesabımız olmasa bile böyle bir alternatifimizin olduğunu bilmek bile güzel.

DEPLOYMENT SEÇENEKLERI

Uygulamanızı geliştirmeye başlamadan önce dikkat etmeniz gereken hususlardan birisi de Uygulamanızın test ortamıylaalakalı olan kısmıdır.

Visual Studio 2012 bize 3 farklı Deployment seçeneği sunmaktadır:

• Local Machine• Simulator• Remote Machine

DEPLOYMENT SEÇENEKLERI

Local Machine : Kendi makinemiz üzerinde Deployment yapmamızı sağlar.Direkt kendi makinenize kurulumugerçekleştirirsiniz

Simulator : Windows 8 Simulator ü üzerinde Deploymentı gerçekleştirir.Yalnız Simulator de dikkat edilmesi gereken nokta onun bir “Emulator” olmadığıdır.Yani Simulator üzerinde yaptığınızherhangi bir işlemin “Local Machine” olarak kullandığınız makinede bir etkisi olacaktır.Simulator üzerinden bir programsilerseniz, kendi makinenizden de silmiş olacaksınız.Bu sebepten ötürüdür ki kullanımı konusunda dikkat etmek gerekir.

Remote Machine: ise uygulamanızı uzaktaki bir makine üzerinde çalıştırmanıza olanak sağlar.Yalnız bu işlem içinUzaktaki makinede “msvsmon.exe” uygulaması yani “Microsoft Visual Studio Remote Debugger Monitor” çalışıyor olmalıdır

Geliştirme

Contract Bilgilerine Erişim

Arama İşlevselliği

Paylaşma İşlevselliği

Ses ve Video Dosyaları

Uygulama Ayarları

CONTRACT BILGILERINE ERIŞIM

Contractler bir Windows Store uygulamasının diğer Windows Store uygulamaları ile haberleşmelerini sağlar.

Extensionlar ise Windows Store uygulamalarının Windows uygulamalarıyla haberleşmesini sağlar.

İki terimde cihaza ait bilgilere erişme ve işlem yapmamızı sağlayan fonksiyonaliteleri barındırır.

Bilinen Contractler; Cached file updater contract, File Open Picker contract, File Save Picker contract,Play To contract, Search contract, Settings contract ve Share contractdır.

Bilinen Extensionlar; Account picture provider, AutoPlay, Background tasks, Camera settings, Contact picker,File activation, Game Explorer, Print task settings, Protocol activation, SSL/certificates

Şimdi gelin bazı contractlere bir göz atalım.

ARAMA IŞLEVSELLIĞI – SEARCH CONTRACT

Arama işlevselliğini Search Contract vasıtasıyla gerçekleştiririz.

Projenize Add New Item diyerek ya da SearchPane nesnesi oluşturarak implement edebiliyoruz.

Örnek:

http://weblogs.asp.net/nmarun/archive/2012/09/28/implementing-search-contract-in-windows-8-application.aspx

PAYLAŞMA IŞLEVSELLIĞI – SHARE CONTRACT

Paylaşma işlevselliğini Share Contract vasıtasıyla gerçekleştiririz.

Projenize Add New Item diyerek ya da SettingsPane nesnesi oluşturarak DataTransferManager nesnesini ekleyerek Text verilerini paylaşabilirsiniz.Çağırmak için “DataTransferManager.ShowShareUI();” kodunu kullanabilirsiniz.

DataTransferManager dataTransferManager;private static TypedEventHandler<DataTransferManager, DataRequestedEventArgs> _handler;

protected override void OnNavigatedFrom(NavigationEventArgs e){

DataTransferManager datatransferManager = DataTransferManager.GetForCurrentView();datatransferManager.DataRequested -= DataRequested;

}

Örnek Kod:

PAYLAŞMA IŞLEVSELLIĞI – SHARE CONTRACTprivate void Page_Loaded_1(object sender, RoutedEventArgs e){

SettingsPane.GetForCurrentView().CommandsRequested += SettingsCommandsRequested;if (_handler != null)

DataTransferManager.GetForCurrentView().DataRequested -= _handler;

_handler = DataRequested;DataTransferManager.GetForCurrentView().DataRequested += _handler;

}

private void DataRequested(DataTransferManager sender, DataRequestedEventArgs e){

DataRequest request = e.Request;request.Data.Properties.Title = "Skorum";request.Data.Properties.Description = "Şehirler Testi Skorumu(" + Sorular.Skor + ") paylaşacağım";request.Data.SetText(“#SehirlerTesti oyunundaki skorum " + Sorular.Skor);

}

SES VE VIDEO DOSYALARI

Uygulamanızda Ses veya Video dosyası açmak isterseniz; size gereken kontrol: MediaElement olacaktır.

MediaElement kontrolü Microsoft tarafından desteklenen formatlar;

Video;

Raw Video,YV12 format,RGBA,Windows Media Video and VC-1 formats,WMV2: Windows Media Video 8WMV3: Windows Media Video 9,WMVA: Windows Media Video Advanced Profile, non-VC-1WVC1: Windows Media Video Advanced Profile, VC-1,H264 (ITU-T H.264 / ISO MPEG-4 AVC) formatsH.263 format,MPEG-4 Part 2 format

Audio;

PCM / WAV format,Microsoft Windows Media Audio,MP3,AAC,AMR-NB

SES VE VIDEO DOSYALARI

Uygulamanızda Ses veya Video dosyası açmak isterseniz; size gereken kontrol: MediaElement olacaktır.

Örnek olarak bir MediaElement şu öğelerden oluşur:

PosterSource: MediaElement e Thumbnail resmi eklemenize olanak sağlar.Bu vesileyle dosya açılmadan önce bu resimgösterilerek profesyonel bir görünüm sağlayabilirsinizSource: Yüklenecek Ses veya Video dosyasının yolunu belirtmeniz gerekir.Volume: MediaElement nesnesinin Ses Düzeyini bununla control edebilirsiniz.Autoplay: İlgili sayfa yüklenir yüklenmez dosyanın çalınacağını belirtirsiniz.

Örnek Kullanım:

<MediaElement PosterSource="/Images/myvideo.png" Name="myMedia" Height="350" Width="640« Source="/Videos/myvideo.avi" />

UYGULAMA AYARLARI

Bu bölümde sizlere App Manifest dosyasındaki ayarlardan söz edeceğiz.

Manifest dosyasına Solution’da bulunan Package.appxmanifest dosyasına çift tıklayarak veya sağ tuş “View Designer” Diyerek açabilirsiniz:

UYGULAMA AYARLARI

Application UI kısmında

• Uygulamanın adını• Dilini• Açıklamalarını• Desteklenen Orientationları• Ve Logoları

gösterebiliriz

UYGULAMA AYARLARI

Capabilities kısmında;

Uygulamamızın hangi yetkilere erişeceğinibelirtebiliyoruz

Örneğin;

Internet(Client) tüm projelerde varsayılanOlarak gelmektedir.

UYGULAMA AYARLARI

Declarations kısmında;

Uygulamamızda kullandığımız veya kullanacağımızContract ve Extensions ları tanımlıyoruz.

Örneğin;

Eğer uygulamamızda “Share Contract” kullansaydık,Share Target tanımlamasını yapmak durumundaydık.

Bazen Visual Studio 2012 deki hazır şablonlarıEklediğinizde Declarationlar otomatik tanımlanırlar.

UYGULAMA AYARLARI

Packaging kısmında;

Uygulamamıza ait versiyonlamayı belirleyebiliyoruz.İstediğimiz herhangi bir versiyon verebiliriz.

Choose Certificate kısmında lisans dosyamızı yenidenoluşturabilir veya internet üzerinden yenileyebiliriz.

Kullanıcı Arabirimi

Animasyon ve Geçişler

Layout-Aware Tasarımlar

ANIMASYON VE GEÇIŞLER

Windows Store UygulamalarındaAnimasyon efektleri vermenin en basit ve hızlı yolu “Blend 5” kullanmaktan geçer.

Projenizi Blend 5 üzerinde açmak için; Solution’a sağ tıklayıp “Open in Blend…” demeniz gerekir.

Örnek olarak bir Button nesnesiekleyip o Button’u animate edelim.

Bunun için 8 snlik bir Storyboard yeterli olacaktır.

ANIMASYON VE GEÇIŞLER

Şimdi de Visual Studio 2012 de kod kısmına gelip bu animasyonu çağıralım:

OrnekButton benim oluşturduğum Storyboard a verilen isimdir.

OrnekButton.AutoReverse = true; //Animasyon çalıştıktan sonra bir de tersine animasyon yapmasını söylüyorum.OrnekButton.Begin();

Blend 5 ile animasyon hazırlamak bu kadar basittir.

ANIMASYON VE GEÇIŞLER

<Page.Resources><Storyboard x:Name="OrnekButton">

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="button">

<EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="90.527"/><EasingDoubleKeyFrame KeyTime="0:0:3.9" Value="179.389"/><EasingDoubleKeyFrame KeyTime="0:0:5.9" Value="269.177"/><EasingDoubleKeyFrame KeyTime="0:0:8" Value="359.179"/></DoubleAnimationUsingKeyFrames>

</Storyboard></Page.Resources>

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"><Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="103,64,0,0" VerticalAlignment="Top" Height="78" Width="138"

RenderTransformOrigin="0.5,0.5" Click="button_Click"><Button.RenderTransform>

<CompositeTransform/></Button.RenderTransform>

</Button></Grid>

Animasyon Projesinin XAML Kodları

LAYOUT-AWARE TASARIMLAR

Windows Store projesi açarken Blank App açtınız ve temayı Dark’tan Light’a veya tam tersine çevirdiniz.Bazı controller silik durdu veya hiç görünmedi.İşte o zaman geliştirdiğiniz uygulamanız “Layout-Aware” değil!

Layout-Aware demek tüm tema değişikliklerinde aynı veya o temaya göre tasarımın düzenlenmesi demektir.

Visual Studio 2012 deki şablonlardan Grid App ve Split App varsayılan olarak projeyi oluşturduğunuz andanItibaren Layout uyumlu hale getirir.Fakat! Blank App projesinde Layout Aware durumu söz konusu değildir.

Bu durumda yapacağınız en kestirme işlem projenize Add New Item diyerek; Grid ve Split App de kullanılan itemlardanherhangi birini eklemek olacaktır: Basic Page her zaman en ideal olandır.Ama “Group Detail Page” , ”Grouped Items Page” , “Item Detail Page” , “Items Page” , “Split Page” veya Contract lardan herhangi birisini ekleseniz dahi projenize Layout-Awareness kazandırabilirsiniz.

Bu itemları projenize dahil edince Visual Studio otomatik olarak Solutionınıza birkaç tane dosya ekleyecektir.

Kullanıcı Etkileşimi

Live Tiles

Text-To-Speech İşlemleri

Navigasyon İşlemleri

LIVE TILES

Live Tiles ya da Canlı Kutucuklar, Windows Store uygulamalarına neşe katan özelliklerdir.

Uygulamanıza ait verileri kullanıcıya Notificationlar göndermeden kendiliğinden update olur.

Örnek olarak;

Yukardaki resimde belirtildiği üzere Sports ve Finance Windows 8 uygulamaları Canlı Kutucuklararacılığıyla size verileri sunar.

LIVE TILES ÖRNEK

http://code.msdn.microsoft.com/windowsapps/App-tiles-and-badges-sample-5fc49148

TEXT TO SPEECH ÖRNEK

Yazıyı sese dönüştürme konusunda Microsoft un Bing Speech Engine i mevcut.Lakin üyelik ve anahtar alma gibi yorucuIşlerden hoşlanmayanlar için Google TTS Motoru bulunmaktadır.

Bu motoru denemek için Uygulamanızda bir adet MediaElement barındırmanız yeterli olacaktır.

Google’ın TTS motoru normalde HTML5 bir website üzerine kurulu ve audio tagı vasıtasıyla çalışan bir yapısı mevcuttur.MediaElement herhangi bir websitesi üzerindeki audio dosyasını okuyabileceğinden;

Projenizde çok kolay bir şekilde Yazdığınız metni yazıya çevirebilirsiniz.

TEXT TO SPEECH ÖRNEK

Google TTS Motoruna: http://translate.google.com/translate_tts?tl=tr&q=Selam şeklinde erişilir.

Ancak biz “q=“ den sonraki kısmın textbox dan gelen veriyle halolmasını istediğimiz için sonrakileri yazmayacağız.

Öncelikle path i tutacak bir string değişkene ihtiyacımız var.Ardından,MediaElement nesnemize bu pathi ve querydosyasını gönderiyoruz.

string path = "http://translate.google.com/translate_tts?tl=tr&q=";

med1.Source = new Uri(path + txtKonus.Text);med1.Play();

Çalıştırdığınızda size ilgili ses dosyasını MediaElement üzerinden çalacaktır.Böylelikler uygulamanızda TTS kullanmış oluyorsunuz.

NAVİGASYON İŞLEMLERİ

Windows Store uygulamalarında sayfalar arası Navigasyon işlemlerinizi gerçekleştirebiliyorsunuz.Bunu yapmakiçin,Aktif olan pencereden ayrılıp yeni pencereyi aktif hale getirmemiz gerekmektedir.Bu işi de Framelerin Navigate methoduyla yaparız.Bu işlem kısaca aşağıdaki kodlar vasıtasıyla yapılabilir:

var cntnt = Window.Current.Content;var frame = cntnt as Frame;

if (frame != null){frame.Navigate(typeof(SecondPage));

}Window.Current.Activate();

* SecondPage,SecondPage.xaml sayfasıdır.

ÖRNEK DEMO

• Şu ana kadar gösterilen tüm konular ile ilgili örnek bir demo.

SORULAR?

KATILDIĞINIZ İÇİN TEŞEKKÜRLER!