Windows 8 Uygulama Geliştirme

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 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 sistemi
versiyonu.
• 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:WindowsSystem32WinMetadata”
adresinde ilgili windows runtime dosyalarına erişebilirsiniz. “.NET Reflector” vasıtasıyla
dosyaları 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ğinizi
ve 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
AKBANK
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şlevleri
barındıran bir toolbar nesnesidir.
Kod Yapısı(XAML):
<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>

WINDOWS STORE KONTROLLERI – BORDER
Köşeleri Çizgili Panel tadında çalışan bir kontroldür.
Kod Yapısı(XAML):
<Border BorderBrush="Gray" BorderThickness="4" Height="108" Width="64">
<StackPanel>
<Rectangle Fill="Yellow"/>
<Rectangle Fill="Green"/>
</StackPanel>
</Border>

WINDOWS STORE KONTROLLERI – BUTTON
Tıklandığında bir olay meydana gelmesi beklenen kontroldür.
Kod Yapısı(XAML):
<Button x:Name="button1" Content="Button" Click="Button_Click" />

WINDOWS STORE KONTROLLERI – CANVAS
İçerisindeki kontrollerin pozisyon bilgilerini ayarlayabileceğimiz layout kontrolüdür.
Kod Yapısı(XAML):
<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>

WINDOWS STORE KONTROLLERI – CHECKBOX
Çoklu seçim yapmamızı sağlayan bir kontroldür.
Kod Yapısı(XAML):
<CheckBox x:Name="checkbox1" Content="CheckBox" Checked="CheckBox_Checked"/>

WINDOWS STORE KONTROLLERI – COMBOBOX
Açılan kutudan bir eleman seçmemizi sağlar.
Kod Yapısı(XAML):
<ComboBox x:Name="comboBox1" SelectionChanged="ComboBox_SelectionChanged" Width="100">
<x:String>Item 1</x:String>
</ComboBox>

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.
Kod Yapısı(XAML):
<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
<Image Source="Assets/Logo.png" />
<Image Source="Assets/SplashScreen.png" />
<Image Source="Assets/SmallLogo.png" />
</FlipView>

WINDOWS STORE KONTROLLERI – GRID
Child Elementlerini ve pozisyonlarını belirleyebileceğimiz en sık kullanılan Layout kontrolüdür.
Kod Yapısı(XAML):
<Grid>
<Grid.RowDefinitions><RowDefinition Height="50"/><RowDefinition Height="50"/></Grid.RowDefinitions>
<Grid.ColumnDefinitions><ColumnDefinition Width="50"/><ColumnDefinition Width="50"/></Grid.ColumnDefinitions>
<Rectangle Fill="Blue" Grid.Row="1"/>
<Rectangle Fill="Green" Grid.Column="1"/>
<Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/>
</Grid>

WINDOWS STORE KONTROLLERI – GRIDVIEW
Bir dizi koleksiyon elemanını sütun ve satır bilgilerini de vererek görüntüleyen
kontroldür.
Kod Yapısı(XAML):
<GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged">
</GridView>

WINDOWS STORE KONTROLLERI – HYPERLINK BUTTON
Button şeklinde çalışan bir websitesi veya dosyaya link verebileceğiniz kontroldür.
Kod Yapısı(XAML):
<HyperlinkButton Content="www.microsoft.com" NavigateUri="http://www.microsoft.com"/>

WINDOWS STORE KONTROLLERI – IMAGE
Bir resim dosyasını göstermemize olanak sağlayan kontroldür.
Kod Yapısı(XAML):
<Image Source="Assets/Logo.png" />

WINDOWS STORE KONTROLLERI – LISTBOX
Listbox bir veya birden fazla eleman seçebileceğimiz bir liste kontrolüdür.
Kod Yapısı(XAML):
<ListBox x:Name="listBox1" SelectionChanged="ListBox_SelectionChanged" Width="100">
</ListBox>

WINDOWS STORE KONTROLLERI – LISTVIEW
ListView kontrolü Dikey olarak üzerinde gezinebileceğimiz bir kontroldür.
Kod Yapısı(XAML):
<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
</ListView>

WINDOWS STORE KONTROLLERI – MEDIAELEMENT
MediaElement kontrolü Ses ve Video dosyalarını oynatmamıza olanak sağlar.
Kod Yapısı(XAML):
<MediaElement PosterSource="/Images/myvideo.png" Name="myMedia" Height="350"Width="640«
Source="/Videos/myvideo.avi" />

WINDOWS STORE KONTROLLERI – PASSWORDBOX
Belirli bir karakterde şifre girebileceğimiz Textbox kontrolüdür.
Kod Yapısı(XAML):
<PasswordBox x:Name="passwordBox1" IsPasswordRevealButtonEnabled="True"
PasswordChanged="PasswordBox_PasswordChanged" />

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.
Kod Yapısı(C#):
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));
}

WINDOWS STORE KONTROLLERI – PROGRESSBAR
Önceden belirlediğimiz bir değere göre ilerleyen bir hareket
çubuğudur.Değişik şekilleri mevcuttur.
Kod Yapısı(XAML):
<ProgressBar x:Name="progressBar1" Value="50" Width="100"/>

WINDOWS STORE KONTROLLERI – PROGRESSRING
ProgressBar a çok benzer, sadece şekil olarak farklıdır.
Kod Yapısı(XAML):
<ProgressRing x:Name="progressRing1" IsActive="True"/>

WINDOWS STORE KONTROLLERI – RADIOBUTTON
Sadece tek bir eleman seçebileceğimiz kontroldür.
Kod Yapısı(XAML):
<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" />

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.
Kod Yapısı(XAML):
<RepeatButton x:Name="repeatButton1" Content="Repeat Button" Click="RepeatButton_Click" />

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.
Kod Yapısı(XAML):
<ScrollViewer HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Visible" Height="200" Width="200">
<Image Source="Assets/Logo.png" Height="400" Width="400"/>
</ScrollViewer>

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.
Kod Yapısı(XAML):
<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>

WINDOWS STORE KONTROLLERI – SLIDER
Slider maximum değeri belirtilmiş,sürükleyerek belirli bir sayı seçmemize yarayan bir
kontroldür.
Kod Yapısı(XAML):
<Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />

WINDOWS STORE KONTROLLERI – STACKPANEL
StackPanel tek bir sırada Dikey veya Yatay kontroller barındırabileceğimiz bir Panel
kontrolüdür.
Kod Yapısı(XAML):
<StackPanel>
<Rectangle Fill="Blue"/>
<Rectangle Fill="Green"/>
<Rectangle Fill="Yellow"/>
</StackPanel>

WINDOWS STORE KONTROLLERI – TEXTBLOCK
Bu kontrol düzenlenemez bir yazı yazar. Etiket(Label) kontrolü diye de bilinir.
Kod Yapısı(XAML):
<TextBlock x:Name="textBlock1" Text="I am a TextBlock" />

WINDOWS STORE KONTROLLERI – TEXTBOX
Textbox içerisine veri girişi yapabileceğimiz bir kontroldür.
Kod Yapısı(XAML):
<TextBox x:Name="textBox1" Text="I am a TextBox" TextChanged="TextBox_TextChanged" />

WINDOWS STORE KONTROLLERI – TOGGLEBUTTON
2 veya 3 adet durumu bulunan(Indeterminate,Checked,UnChecked) CheckBox kontrolünün
Button versiyonudur.
Kod Yapısı(XAML):
<ToggleButton x:Name="veri" Content="ToggleButton" HorizontalAlignment="Left" Margin="963,80,0,0" VerticalAlignment="Top"
Height="84" Width="181" IsChecked= "True" IsThreeState="True"/>

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.
Kod Yapısı(XAML):
<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch" OnContent="On" OffContent="Off"
Toggled="ToggleSwitch_Toggled"/>

WINDOWS STORE KONTROLLERI – TOOLTIP
İlgili kontrolün üzerinde bir Popup nesnesi gösterebileceğimiz bir kontroldür.Sadece
Bilgilendirme amacıyla kullanılır.
Kod Yapısı(XAML):
<Button Content="Button" Click="Button_Click" ToolTipService.ToolTip="Click to perform action" />

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.
Kod Yapısı(XAML):
<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
<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>

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.
Kod Yapısı(XAML):
<Viewbox MaxWidth="25" MaxHeight="25">
<Image Source="Assets/Logo.png"/>
</Viewbox>
</Viewbox>
</Viewbox>

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.
Kod Yapısı(XAML):
<WebView x:Name="webView1" Source="http://dev.windows.com" Height="400" Width="800" />
ya da HTML Kodunu Çalıştırma(C#):
string Content ="<html><head></head><body>Welcome to My Blog</body></html>";
WebView1.NavigateToString(Content);

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ır
böylelikle uygulama paketi “Running” moda girerek çalışır.
Eğer ki pencereler arası geçiş yaptıysanız; örneğin
Metro 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 saklayarak
cacheler ve arka planda çalışıyor gibi görünür ama herhangi
bir background işlemi gerçekleştirmez bu da işlemciyi
“Suspended” modda iken kullanmadığını gösterir.Ancak
uygulamayı yeniden açınca ilk önce uygulamanın state’ini
yükler ve ardından “Resuming” eventi fırlatılarak uygulama
kaldığı 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 üzerinden
lisans 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 yoksa
Uygulamanı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ıyla
alakalı 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 kurulumu
gerç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ız
herhangi bir işlemin “Local Machine” olarak kullandığınız makinede bir etkisi olacaktır.Simulator üzerinden bir program
silerseniz, 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çin
Uzaktaki 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/im
plementing-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.
Örnek Kod:
DataTransferManager dataTransferManager;
private static TypedEventHandler<DataTransferManager, DataRequestedEventArgs> _handler;
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
DataTransferManager datatransferManager = DataTransferManager.GetForCurrentView();
datatransferManager.DataRequested -= DataRequested;
}

PAYLAŞMA IŞLEVSELLIĞI – SHARE CONTRACT
private 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 8
WMV3: Windows Media Video 9,WMVA: Windows Media Video Advanced Profile, non-VC-1
WVC1: Windows Media Video Advanced Profile, VC-1,H264 (ITU-T H.264 / ISO MPEG-4 AVC) formats
H.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 resim
gösterilerek profesyonel bir görünüm sağlayabilirsiniz
Source: 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ğini
belirtebiliyoruz
Örneğin;
Internet(Client) tüm projelerde varsayılan
Olarak gelmektedir.

UYGULAMA AYARLARI
Declarations kısmında;
Uygulamamızda kullandığımız veya kullanacağımız
Contract 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ı yeniden
oluş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ında
Animasyon 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 nesnesi
ekleyip o Button’u animate edelim.
Bunun için 8 snlik bir Storyboard
yeterli olacaktır.

Ş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 Projesinin XAML Kodları
<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: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>

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 andan
Itibaren 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 itemlardan
herhangi 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ı Kutucuklar
aracı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 yorucu
Iş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 query
dosyası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 yapmak
iç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.

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

Windows 8 Uygulama Geliştirme

Recommended

Recommended

More Related Content

Similar to Windows 8 Uygulama Geliştirme

Similar to Windows 8 Uygulama Geliştirme (20)

More from Ibrahim Ersoy

More from Ibrahim Ersoy (9)

Windows 8 Uygulama Geliştirme