EĞİTİM : WINDOWS 8 METRO STİL UYGULAMALARDA GÖRSEL ÖĞELER. Bölüm : Multimedia ve Kullanıcı Etkileşimi. Konu : Ses ve Video Oynatmak.

Transkript

1 EĞİTİM : WINDOWS 8 METRO STİL UYGULAMALARDA GÖRSEL ÖĞELER Bölüm : Multimedia ve Kullanıcı Etkileşimi Konu : Ses ve Video Oynatmak Page 1 of 33

2 Bu bölümde metro stil uygulamana medya öğelerini nasıl entegre edeceğin açıklanmaktadır. Ses ve Video Oynatmak Metro stil uygulaman içerisinde ses ve video medyaları oynatmak için MediaElement sınıfını kullanırsın. MediaElement nesnesi, medya dosyalarını oynatmak için çok sayıda özellik ve metot sunar. Sana kalan ise bu imkanları kullanmak için olay yakalayıcıları oluşturmaktır. Örneğin uygulaman içerisinde bir medyayı başlatma yeteneği sunmak istiyorsan, bunun için bir Button nesnesi oluşturur ve butonun Click olay metodunda medyayı başlatmak için MediaElement nesnesinin Play metodunu çağırırsın. Sayfana bir medya eklemek, XAML dosyana MediaElement eklemek ve oynatmak üzere vereceğin ses ya da video dosyasının URI (Uniform Resource Identifier) bilgisini sağlamak kadar kolaydır. Aşağıdaki örnekte, XAML içerisinde MediaElement nesnesini oluşturup Source özelliğine video dosyasının URI bilgisini atayabilirsin. Sayfa yüklendiğinde MediaElement, videoyu otomatik olarak oynatmaya başlar. Videonun otomatik olarak değil de kullanıcı tarafından başlatılmasını istersen AutoPlay özelliğine false değer verebilirsin. <StackPanel> <MediaElement x:name="videom" Source="Videolar/final.wmv" Width="400" /> </StackPanel> MediaElement Özellikleri MediaElement sınıfı, medya oynatmaya özel birçok özellik sunar. En çok ihtiyaç duyacakların şunlar olacaktır : AutoPlay : MediaElement in sayfa açıldığında otomatik olarak çalmaya başlayıp başlamayacağını belirler. IsMuted : MediaElement in sessize alınıp alınmayacağını belirler. true değeri, MediaElement in sessize alınmasını sağlar. Bu özelliğin varsayılanı false değeridir. Stretch : Videonun MediaElement nesnesine nasıl yayılacağını belirler. Bu özelliğin alabileceği alternatif değerler şunlardır : o None o Uniform o UniformToFill o Fill Özelliğin varsayılanı Fill değeridir. Volume : MediaElement nesnesinin ses ayarını belirtir. 0 ile 1 arasında değer alabilen bu özelliğin varsayılan değeri 0.5 dir. Page 2 of 33

3 Medya Oynamayı Kontrol Etmek MediaElement nesnesinin Play, Pause ve Stop metotlarını kullanarak medya çalma sürecini kontrol edebilirsin. Aşağıdaki örnek bir MediaElement nesnesi tanımlar ve birkaç tane buton ile medyayı kontrol eder. <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <MediaElement x:name="videom" Source="microsoft.wmv" Width="300" Height="300" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" /> </Grid> <! Medya çalmayı durdurur. --> <Button Click="MedyayiDurdur" Grid.Column="0" Grid.Row="1" Content="Durdur" /> <! Medya çalmayı duraklatır. --> <Button Click="MedyayiDuraklat" Grid.Column="1" Grid.Row="1" Content="Duraklat" /> <! Medya çalmayı başlatır. --> <Button Click="MedyayiBaslat" Grid.Column="2" Grid.Row="1" Content="Başlat" /> private void MedyayiDurdur(object sender, RoutedEventArgs e) { videom.stop(); } private void MedyayiDuraklat(object sender, RoutedEventArgs e) { videom.pause(); } private void MedyayiBaslat(object sender, RoutedEventArgs e) { videom.play(); } Not : Medyayı başlatmak, durdurmak ve duraklatmanın yanında MediaElement in Position özelliğine değer atayarak çalan medyanın belirli bir saniyesine atlayabilirsin. MediaElement Kullanarak Lokal Medya Dosyalarını Oynatmak MediaElement kontrolü, internet üzerindeki online içeriğin yanısıra uygulamanın üzerinde çalışmakta olduğu bilgisayardaki ve bağlı bulunduğu ağ üzerindeki medya dosyalarını da oynatabilir. Page 3 of 33

4 C# kullanarak yazacağın metro stil uygulamada, MediaElement sınıfını kullanarak ses ve video oynatabilirsin. Source özelliği, çalacağın medya dosyasını belirlemeni sağlar. Bu, ağ üzerindeki bir dosya olabileceği gibi uygulamanın içine dahil edilmiş ya da çalıştığı cihaz üzerinde bir dosya da olabilir. Ağ üzerindeki ya da uygulamanın içine gömülmüş dosyalar için Source özelliğini ataman yeterli olur. Lokal sistem üzerindeki bir dosyayı açmak için ise, FileOpenPicker sınıfını kullanmalısın. Sıradaki örnek bu sınıfı nasıl kullanacağını gösterir. 1.adım : Uygulamanın lokal sistemdeki medya kütüphanesine erişebilmesi için, manifest dosyasına bu özelliği eklemen gerekiyor. 1. Visual Studio içerisindeki Solution Explorer penceresinde yer alan ve uygulamanın manifest dosyası olan package.appxmanifest isimli dosyayı çift tıklayarak aç. 2. Capabilities öğesini seç. 3. İhtiyaca göre Video Library Access ya da Music Library Access kutusunu işaretle. 2.adım : Bir MediaElement nesnesi oluştur ve bir isim ver. Kontrole isim vermek, kod dosyasından erişmeni kolaylaştırır. <MediaElement Name="medyaKontrolum" Height="400" /> 3.adım : Kullanıcının cihazındaki video kütüphanesinden medya dosyası seçmesi için FileOpenPicker sınıfını kullanacaksın. FileOpenPicker sınıfının SuggestedStartLocation ve FileTypeFilter özelliklerini kullanabilirsin. Dosya seçici pencereyi açmak ve seçilen dosyayı elde etmek için ise PickSingleFileAsync metodunu kullanabilirsin. var dosyasecici = new Windows.Storage.Pickers.FileOpenPicker(); dosyasecici.suggestedstartlocation = Windows.Storage.Pickers.PickerLocationId.VideosLibrary; dosyasecici.filetypefilter.add(".mp4"); dosyasecici.filetypefilter.add(".wmv"); var dosya = await dosyasecici.picksinglefileasync(); 4.adım : Videonun kaynağını ata ve medyayı oynat. FileOpenPicker dialog penceresinden dönen StorageFile tipindeki dosya bilgisini, MediaElement kontrolünün kaynağı olarak belirlemek için stream açmaya ihtiyacın var. StorageFile üzerindeki OpenAsync metodu, MediaElement.SetSource metoduna parametre olarak geçebileceğin stream verisini döndürür. Ardından medyayı oynatmaya başlatmak için MediaElement kontrolünün Play metodunu çağırırsın. var stream = await dosya.openasync(windows.storage.fileaccessmode.read); // medyakontrolum, XAML içinde tanımladığın MediaElement kontrolüdür. medyakontrolum.setsource(stream, file.contenttype); medyakontrolum.play(); Page 4 of 33

5 EĞİTİM : WINDOWS 8 METRO STİL UYGULAMALARDA GÖRSEL ÖĞELER Bölüm : Multimedia ve Kullanıcı Etkileşimi Konu : WebCam Aracılığla Video Ön İzlemesi Yapmak Page 5 of 33

6 Bu bölüm, Windows 8 Metro Stil uygulaman içerisinde web kamerası vb. cihazlar aracılığıyla nasıl fotoğraf ve video çekeceğinle ilgili bilgiler içermektedir. Webcam Aracılığıyla Video Önizlemesi Yapmak CaptureElement nesnesi ve Windows.Media.Capture isim alanı altındaki tipleri kullanarak webcam ya da kameradan canlı video önizlemesi ve kayıdı yapabilirsin. 1.adım Öncelikle VideoOnizleme isminde yeni bir proje oluşturalım ve uygulamanın manifest dosyasında, cihaz yeteneklerinden webcam öğesini seçmiş olman gerekmektedir. Bu şekilde uygulamanı indiren kullanıcı, henüz yükleme yaparken hangi özellikleri kullanacağını bilir ve cihazının bu kaynağında faydalanacağını kabul eder. Bunun için; 1. Visual Studio da Solution Explorer penceresini aç. Burada package.appxmanifest dosyasına çift tıkla. 2. Capabilities grubunu seç. 3. Listeden Webcam i işaretle. 2.adım Video oynatmak ve sayfada işlemek için CaptureElement nesnesi oluşturman gerekir. CaptureElement nesnesini XAML penceresinde oluşturabilirsin. <CaptureElement Name="onizleme" Height="400" /> 3.adım MediaCapture nesnesini oluşturmalısın. MediaCapture sınıfı, yakalanan videonun yönetilmesi ile ilgili metot ve özellikler içerir. Kameradan video çekmek ve bunun ön izlemesini yapmak için InitializeAsync and StartPreviewAsync metotlarını kullanabilirsin. Aşağıdaki örnek yeni bir MediaCapture nesnesi örnekler ve InitializeAsync metodunu çağırarak MediaCapture nesnesinin varsayılan ayarlarıyla başlatılmasını sağlar. Özel bazı ayarlar yapmak istersen InitializeAsync metoduna MediaCaptureInitializationSettings nesnesini parametre olarak geçebilirsin. MediaCapture videoyoneticisi = new MediaCapture(); await videoyoneticisi.initializeasync(); 4.adım Artık video ön izlemesini başlatabilirsin. Bunun için yapman gereken son şey, CaptureElement nesnesinin Source özelliğine değer atamak ve StartPreviewAsync metodunu kullanarak ön izlemeyi başlatmak. // Video ön izlemesini başlat. // onizleme değişkeni,xaml içinde tanımmladığın CaptureElement nesnesidir. onizleme.source = videoyoneticisi; await videoyoneticisi.startpreviewasync(); Page 6 of 33

7 5.adım Video ön izlemesini farklı bir yöne çevirerek izlemek istersen MediaCapture nesnesinin SetPreviewRotation metoduna VideoRotation numaralandırıcısını parametre olarak geçmen gerekir. Bu numaralandırıcı, videonun ne kadar açıyla döndürüleceğini belirler; alabileceği alternatif değerler şunlardır : None a) Video ön izlemesini döndürürken şu kodu kullanabilirsin : videoyoneticisi.setpreviewrotation(videorotation.clockwise90degrees); b) Video ön izlemesini kayıt ederken görüntüyü döndürmek için ise şu koddan faydalanabilirsin : videoyoneticisi.setrecordrotation(videorotation.clockwise90degrees); c) Bu bilgileri aynı zamanda elde etmek isteyebilirsin. GetPreviewRotation ve GetRecordRotation metotları, video ön izleme ve kayıt için o andaki döndürme açılarını sana geri verir. Bu metotlar, VideoRotation numaralandırıcısı tipinde değer döndürürler. VideoRotation previewrotation = capturemgr.getpreviewrotation(); Page 7 of 33

8 Desteklenen Ses ve Video Formatları Media File Container or File Format File Media Stream Formats (Codecs) Extension Video Audio.3g2 H.263.3gp2.3gp H.264 (Baseline, Main, High) AAC (LC, HE) MPEG-4.3gpp.m4a MPEG-4 SP and ASP n/a.m4v H.263.mp4v.mp4.mov Part2 H.264 (Baseline, Main, High) MPEG-4 SP and ASP Part2 AAC (LC, HE) MP3 MPEG-2 (L1, L2, stereo-only) MPEG-2.m2ts (e.g. AVCHD) H.264 L2) MPEG-1 (L1, AAC (LC, HE) AC3 (DD, DD+).asf VC-1 WMA standard.wm.wmv ASF.wma WMV9 n/a WMA voice WMA lossless WMA Pro.aac ADTS.adt.adts n/a AAC (LC, HE) MP3.mp3 n/a MP3 Page 8 of 33

9 PCM MP3 WAV.wav n/a MS ADPCM IMA ADPCM MS G.711 DDITT MS GSM 6.10 PCM MP3 MPEG-4 SP and ASP Part2 MS ADPCM AVI.avi Motion-JPG H.263 IMA ADPCM MS CCITT G.711 uncompressed MS GSM 6.10 AC-3.ac3.ec3 n/a AC3 DD+) AC3 DD+) (DD, (DD, Page 9 of 33

10 EĞİTİM : WINDOWS 8 METRO STİL UYGULAMALARDA GÖRSEL ÖĞELER Bölüm : Multimedia ve Kullanıcı Etkileşimi Konu : App Bar Eklemek Page 10 of 33

11 App Bar Eklemek Uygulamanda kullanıcılara navigasyon, çeşitli fonksiyonlara erişim ve araçlar sunmak için app bar kullanmalısın. App bar, varsayılan olarak gizilidir. Dokunmatik bir cihazda kullanıcılar ekranın en altından parmağıyla yukarı doğru kaydırarak; dokunmatik olmayan masaüstü ya da notebook makinelerde ise fare ile sağ tıklayarak app bar ın görünmesini sağlayabilirsin. Burası uygulamanın içeriğini barındırır. App bar ı açtığın şekilde ekranın alt kısmında parmağını tekrar kaydırarak ya da ekranın başka bir yerine dokunarak kapatabilirsin. Ayrıca app bar ile programatik olarak da çalışabilirsin; yani kod ile açabilir ya da kapatabilirsin. XAML çatısı, ekranın alt kısmında kaydırma yapılarak arayüzde kolayca görünmesini sağlayan AppBar kontrolüne sahiptir. Dilersen ekranın üst kenarında da kullanabileceğin AppBar ile çeşitli sayfalara yönlendirmeler ya da bazı araçlar içeren bir menü şeridi oluşturabilirsin. Uygulamana app bar eklemek için Page nesnesinin TopAppBar ya da BottomAppBar özelliklerine bir AppBar nesnesini atarsın. Üstteki app bar ı uygulamanın navigasyonunu yönetmek için kullanmalısın. Örneğin uygulamanın iç sayfaların anasayfana yönlendirme yapmak için burayı kullanabilirsin. Alt kenardaki app bar ı ise uygulamanın komut ve araçları için kullanmalısın. Örneğin listedeki bir öğeyi çıkarmak, listeyi yenilemek gibi komutlar ya da yardım bilgisini göstermek vb. Aşağıdaki örnek, uygulamanda alt kenarda kullanacağın BottomAppBar ın sağ ve sol tarafında 2 ayrı grup olarak gösterilen butonlar içerir. <Page.BottomAppBar> <AppBar x:name="bottomappbar" Padding="10,0,10,0"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Left"> <Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar> Page 11 of 33

12 Programatik Olarak App Bar Açmak Varsayılan olarak app bar lar fare ile sağ tıklanırsa ya da ekranın alt ya da üst kenarından ters yöne döğru kaydırma hareketi ile açılır. Kullanıcı bu seçeneklerden birisini yaptığında, eğer varsa hem üst hem de alt app bar açılır. AppBar elementinin IsOpen özelliğine true değerini atayarak, programatik olarak app bar açabilirsin. Bunu yaptığın zaman sadece özelliğine atama yaptığın AppBar açılır (alttaki ya da üstteki). Hem XAML hem de C# ile AppBar ı programatik olarak açabiliriz. 1.yol : Sayfa yüklenirken app bar açmak için, XAML içinde ilgili AppBar elementinin IsOpen özelliğine true değer vermen gerekir. <AppBar IsOpen="True"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource PreviousAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource NextAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> </Grid> </AppBar> 2.yol : App bar ı programatik olarak açmak için, AppBar elementinin IsOpen özelliğine kod tarafında true değer vermelisin. Kod içerisinde app bar ı kullanabilmek için öncesinde XAML de bir isim vermiş olman gerekir. XAML <Page.TopAppBar> <AppBar x:name="topappbar"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource SaveAppBarButtonStyle}" Click="Button_Click"/> <Button Style="{StaticResource UploadAppBarButtonStyle}" C# </StackPanel> </Grid> </AppBar> </Page.TopAppBar> Click="Button_Click"/> private void OpenButton_Click(object sender, RoutedEventArgs e) { topappbar.isopen = true; } Page 12 of 33

13 Programatik olarak app bar açmaya genellikle kullanıcı uygulama içindeki bir öğe ile etkileşim içindeyken ona içerikle ilgili bazı komutlar göstermek için ihtiyaç duyarsın. Örneğin kullanıcı uygulama içinde bir yazı seçtiğinde ona metni formatlayabilmesi için gerekli butonları içeren appbar ı gösterebilirsin. İçerikle ilgili komutları gösterdiğin zaman, app bara ın hemen kaybolmaması için modunu değiştirebilirsin. App Bar ı Sabitleştirmek Varsayılan olarak app bar lar, kullanıcı uygulamanın başka bir yerine dokunduğunda kaybolur. App bar ve içindeki komutları görünür tutmak için IsSticky özelliğine true değer verebilirsin. Bunu yaptığın zaman app bar ı gizlemenin yolu, ekranın alt ya da üst kenarından ters yöne doğru parmağın ile kaydırmak ya da fare ile sağ tıklamaktır. 1.yol (XAML) : Kullanıcı uygulama ile etkileşim içindeyken, app bar ın hala görünür olmasını sağlamak için XAML içinde ilgili AppBar elementinin IsSticky özelliğine true değer ver. <AppBar IsSticky="True"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> </Grid> </AppBar> 2.yol (Programatik) : Programatik olarak app bar ın görünür kalma modunu değiştirmek için kod tarafında AppBar nesnesinin IsSticky özelliğine true değeri verirsin. AppBar elementine kod ile erişebilmek için XAML ile tanımlama yaptığın yerde bir isim vermelisin. XAML <Page.BottomAppBar> <AppBar x:name="bottomappbar"> <Grid> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/> </StackPanel> </Grid> </AppBar> </Page.BottomAppBar> C# private void StickyButton_Click(object sender, RoutedEventArgs e) { bottomappbar.issticky = true; } Page 13 of 33

14 EĞİTİM : WINDOWS 8 METRO STİL UYGULAMALARDA GÖRSEL ÖĞELER Bölüm : Multimedia ve Kullanıcı Etkileşimi Konu : Varsayılan Döşeme Oluşturmak Page 14 of 33

15 Varsayılan Döşeme Oluşturmak Bu bölümde uygulamanın başlangıç ekranına varsayılan döşeme (default tile) oluşturmak için gerekli adımları göreceksin. Bunu yaparken Windows 8 Manfest Editor aracını kullanacaksın. Burada amaç, yüklü gelen şablonları kullanarak Visual Studio ile yeni bir proje açmak ve manifest paketinde varsayılan döşeme ile döşemenin imajını tanımlamak. Hazırlaman Gerekenler Başlangıç ekranı için kullanacağın 150x150 boyutlarında bir imaj dosyası Aynı imaj dosyasının 30x30 boyutlarında küçük bir versiyonu. Bu boyuttaki imajı, döşeme için değil arama sonuç ekranı için kullanacaksın. Döşeme için kullanılmak üzere bu imajın geniş versiyonunu hazırlaman tavsiye edilir. Eğer döşeme için bu imajı sağlarsan, döşemeni geniş versiyonda da güncelleyebilirsin. Ancak bunun tercihi tamamen uygulamanın kullanıcısına aittir. 1.adım : Yeni bir metro stil uygulama aç. 2.adım : Açılan projede Solution Explorer içinde package.appxmanifest dosyasına çift tıkla. Bu Manifest Editor penceresini açacaktır. 3.adım : Manifest Editor içinde Application UI bölmesini seç. Burada varsayılan bazı imajlar karşına çıkacaktır. Buradaki imajları, kendi logolarınla değiştir. Döşemede uygulamanın kısa adını gösterip göstermeyeceğini seç. Bu isim en fazla 13 karakter olabilir. Eğer kısa isim 13 karakterden uzun olursa ilk 13 karakterden sonrası kırpılarak kullanılır. Aynı zamanda logoyo ve ismi de gösterip göstermeyeceğini seçebilirsin. Uygulama ismi metninin, arka plan rengine göre açık renk font mu koyu renk font mu kullanacağını seçersin. Ya varsayılan renkleri kabul eder ve değiştirmezsin ya da kendi renk bilgini belirleyebilirsin. Bu arka plan rengi, uygulamanın diğer açılardan renklenmesi için kullanılacaktır. Örnek olarak diyalog kutularındaki butonun ve mağazadaki açıklama sayfanızın rengi gösterilebilir. Kullanıcı uygulamayı yükledikten sonra döşemedeki alanı güncellemeye başlayabilirsin, her zaman statik imajın orada görünmesine gerek yoktur. Bu şekilde uygulamanın biraz daha ilgi çekici olmasını sağlarsın. Sıradaki başlıkta bir döşemeyi nasıl güncelleyeceğini göreceksin. Bir Döşemeyi Güncellemek Bu bölümde C# ve XAML kullanarak lokal döşeme bildirimleri içeriğini nasıl tanımlayacağını, göndereceğini ve kaldıracağını öğreneceksin. Hazırlaman Gerekenler Döşeme (tile) ve bildirim (notification) konseptleri hakkında bilgi. XML ile çalışmış olmak Windows Runtime API kullanarak C# ile basit metro stil uygulama yazabilme yeteneği XAML ile metro stil uygulama için kod tarafınını nasıl oluşturulacağını anlamış olma Page 15 of 33

16 1.adım : Gerekli isim alanı tanımlamalarını yap. Döşeme arayüzlerini kullanmak için Windows.UI.Notifications isim alanını eklemelisin. using Windows.UI.Notifications; using Windows.Data.Xml.Dom; 2.adım : Döşemen için bir şablon seç ve onun xml içeriğini al. Her ayrı bildirimin farklı bir şablon belirleyebileceğini unutma. XmlDocument dosemexml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03; 3.adım : DOM (document object model) metotları aracılığıyla şablon içeriğini vermelisin. Aşağıdaki örnek kod, tek bir metni 3 satıra kadar kaydırıp gösteren TileWideText03 şablonunu kullanıyor. XmlNodeList tiletextattributes = dosemexml.getelementsbytagname("text"); int index = 1; foreach (XmlNode tiletextattr in tiletextattributes) { tiletextattr.innertext = "textfield " + Convert.ToString(index); index++; } 4.adım : Senin belirlediğin xml içeriğe uygun bir şekilde bildirimi oluştur. TileNotification dosemebildirimi = new TileNotification(dosemeXml); 5.adım : Bildirimin (notification) için bir sona erme süresi belirlemen gerekiyor. Burada bildiriminin ömrü 10 dakika ardından sona erecek ve kaldırılacak. dosemebildirimi.expirationtime = DateTimeOffset.UtcNow.AddSeconds(10); 6.adım : Bildirimi uygulama döşemesine gönder. TileUpdateManager.CreateTileUpdaterForApplication().Update(dosemeBildirimi) ; Page 16 of 33

17 EĞİTİM : WINDOWS 8 METRO STİL UYGULAMALARDA GÖRSEL ÖĞELER Bölüm : Multimedia ve Kullanıcı Etkileşimi Konu : Açılış Ekranı Eklemek Page 17 of 33

18 Açılış Ekranı (Splash Screen) Eklemek Bütün metro stil uygulamalar bir açılış ekranına (splash screen) sahip olmalıdır. Bu ekran bir arka plan rengi ve bir açılış imajından oluşur ve her ikisi de özelleştirilebilir. Kullanıcı uygulamayı açar açmaz uygulaman öncelikle açılış ekranını gösterir. Bu sayede sen arka planda uygulamanla ilgili kaynakları hazırlarken, kullanıcının anında uygulamanın içinde olmasını sağlar. Uygulama kullanıcı etkileşimine hazır olur olmaz, açılış ekranı otomatik olarak kapanır. İyi tasarlanmış bir açılış ekranı, uygulamanı daha davetkar yapar. Windows Store aşağıdaki basit, abartısız açılış ekranı kullanmaktadır : Bu açılış ekranı mavi arka plan rengi ve transparan bir PNG dosyasının kombinasyonuyla oluşturulmuştur. Ayrıca SplashScreen sınıfını, uygulamanın açılış deneyimini özelleştirmek için de kullanabilirsin. Uygulamanın arayüzünü hazırlamak ya da bazı ağ operasyonlarını tamamlamak için ek süre kazanmak adına faydalanabilirsin. Bunun dışında SplashScreen sınıfını, açılış ekranı kapandığı anda haberdar olmak ve ardından giriş animasyonu göstermek vb. aksiyonları alabilmek için kullanabilirsin. Page 18 of 33

19 Örnek Açılış ekranı ve arka plan rengini Visual Studio içinden ayarlayabilirsin. Eğer uygulamanı açmak için bir Visual Studio şablonu kullanırsan, images\splashscreen.png projene eklenir ve otomatik olarak package.appxmanifest manifest dosyasında uygulamanın varsayılan açılış ekranı olarak ayarlanır. 1.adım : Visual Studio içinde Solution Explorer penceresinde package.appxmanifest dosyasına çift tıkla. Bu Windows 8 Manifest Designer aracının açılmasını sağlar. 2.adım : Application UI tabını aç ve Splash Screen bölümüne in Eğer projeni hala varsayılan ayarları ile kullanıyorsan SplashScreen alanında images\splashscreen.png yolunu göreceksin. Eğer package.appxmanifest dosyasını bir metin editörü ile açarsan SplashScreen elementini VisualElements in alt elementi olarak görürsün. Örneğin varsayılan açılış ekranı için manifest dosyasındaki XML şu şekildedir : <SplashScreen Image="images\splashscreen.png" /> 3.adım : Browse... butonunu kullanarak açılış ekranı imajını değiştir ve imajın Visual Studio projene eklenmesini onayla. Açılış ekranı imajın 620x300 boyutlarında olmalıdır. 4.adım : Splash Screen bölümünün Background Color alanında açılış ekranı imajı ile birlikte görüntülenecek arka plan rengini belirleyebilirsin. Rengin adını girebileceğin gibi # ve hexadecimal değerini de girebilirsin. Açılış ekranı için arka plan rengi vermek opsiyoneldir. Eğer herhangi bir renk belirlemezsen, bunun varsayılanı döşemelerinin arka plan rengidir. Döşemelerinin arka plan rengini belirleyeceğin yer ise Application UI tabının Tile bölümünde Background Color alanıdır. Page 19 of 33

20 EĞİTİM : WINDOWS 8 METRO STİL UYGULAMALARDA GÖRSEL ÖĞELER Bölüm : Uygulama Kabiliyetlerini Belirleme ve Sensörler Konu : Sensörler Page 20 of 33

21 SENSÖRLER Windows 8 hakkında keşfedilmesi gereken ilk şey sistem düzeyindeki çalışmalarında bilgisayar kullanımlarına göre daha çok pil ömrünü koruyor olmasıdır. Sensors and Metro style apps Windows Runtime için özel olarak tasarlanmış olan bir sensör API si bulunuyor. Bu API'ler sayesinde, uygulama geliştiriciler herhangi bir Metro Style uygulamasının donanım üzerindeki sensörlerden faydalanarak zenginleşmesini sağlayabiliyorlar. Sensör API 'leri anlaşılır ve basit bir şekilde tasarlanmış olduğundan dolayı, uygulama geliştiriciler rahat ve kolay bir şekilde bunları kullanabiliyor ve tasarladıkları sanal gerçeklik ve artırılmış gerçeklik konularındaki uygulamalarda da sensörlerden topladıkları verileri kullanabiliyorlar. Ayrıca, tüm oyun geliştiriciler ve Masaüstü uygulama geliştiriciler için de Win32 API üzerinden sensörlere erişim mümkündür. Hatta Windows Runtime üzerinde Javascript kullanarak da uygulama geliştirip, yine javascript ile bu API dan faydalanmak mümkündür. Aşağıda, bununla ilgili basit bir örnek bulabilirsiniz. Bu örnek, ivmeölçerin verilerine çalışma zamanında nasıl erişilebileceğini göstermektedir. var accelerometer; accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault(); accelerometer.addeventlistener("readingchanged",onaccreadingchanged); function onaccreadingchanged(e) { var accelx = e.reading.accelerationx; var accely = e.reading.accelerationy; var accelz = e.reading.accelerationz; } Windows 8 üzerinde Sensörleri kullanmakta olan uygulamaları inceleyebilir ve fikir edinebilir, sonrasında da kendi uygulamalarınızı geliştirmeye başlayabilirsiniz. Yalnız, unutmayın ki bunu sadece Windows 8 işletim sistemine sahib bir bilgisayarda yapabilirsiniz. Sensör Grupları Sensörleri, Simple Data, Raw Sensor Data ve Sensor Fusion Data olarak 3 farklı gruba ayırabiliriz. Uygulama içerisinde sensörleri kullanabilmek için öncelikle, Windows.Devices.Sensors isimalanı altındaki sınıfları kullanmalısın. Cihazın oryantasyonunu ve değişimini tespit edebileceğin, Simple Device Orientation Sensörü, Işık Sensörü (Light Sensor), İvmeölçer (Accelerometer), Gyro, Pusula (Compass), Inclinometer ve Device Orientation, Windows 8 ile birlikte kullanılabilecek olan sensörlere örnek olarak verilebilir. Page 21 of 33

22 Sensörler için geliştirici desteği (Developer support for sensors) Windows 8 sensörleri genelde aşina olduğumuz özelliklere sahiptir. Oyunlar, Ticari uygulamalar, çeşitli araçlar ve yardımcı programlar, sensör özelliklerinin kullanımına birer örnek teşkil edebilirler. Sensörler, 3D Accelerometer (ivmeölçer) ve 3D Magnetometer (manyetik alan ölçer) destekleri ile oluşmaktadır. Bu kombinasyonlarda 6 eksenli hareket algılama ve yönlendirme sistemi meydana gelmektedir. Sensörler sayesinde 3 boyutlu tüm hareketler algılanabiliyor. Bu sensörlerin kullanıldığı alanlar ise, gyro, accelerometer ve magnetometer'dır. Arayüzlerinde ise Pass-Through ve Sensor Fusion bulunmaktadır. Page 22 of 33

23 Bu sensörlerden biraz bahsedecek olursak, sensörler yardımıyla cihazların 3 boyutlu hareketlerini uygulamalarımız içerisinden ilgili parametreleri kullanarak elde edebiliyor ve bu hareketlere ait verileri işleyebiliyoruz. Herhangi bir sensöre erişebilmek için, Appication Manifest içerisinde, aşağıdaki kod bloğunda verilen örneğe benzer bir tanımlama yapmak gerekmektedir. Bu kodların kullanılmasının sebebi, özellikle sensörlerle çalışırken son kullanıcı tarafında güvenlik açıkları oluşmasının önüne geçmektir. Son kullanıcı tarafında hiç bir güvenlik açığı olmadan sensörlerin kullanılması için, yetkilendirme konusunda son kullanıcıyı bilgilendiren bu kodlar faydalı olacaktır. Windows.Media API'leri Windows.Media API içerisinde mikrofon, video ve ses gibi özellikleri sensörlerle birlikte kullanabilmemiz için oluşturulmuş bir yapı bulunmaktadır. Media elementi, kendi içerisinde CameraCaptureUI ve MediaCapture API özelliklerini barındırmaktadır. Bunlarla birlikte arka planda sık sık kullanabileceğimiz metotlar yardımı ile media elementinin video formatını belirleyebiliriz. Uygulamalarınızda kamera ve mikrofonlara erişmek için application manifest içerisinde gerçekleştirmeniz gereken tanımlamalar aşağıdaki gibidir. Page 23 of 33

24 Bilmemiz gereken diğer bir özellik ise C#'da yazdığımız bir kod JavaScript'te de aynı şekide Media elementini çağırabilmektedir. Tüm bunları sağlayan özellik ise WinRT API lerinin desteklenen tüm dillerle aynı şekilde kullanılabilmesidir. WinRT API'leri sayesinde uygulamalarımız asenkron bir şekilde çalışmaktadır. WinRT API'leri, işletim sistemine ve bununla birlikte servislere de direkt bir şekilde erişim sağlamaktadır. Bu sebepten dolayı WinRT API'lerinin C#, JavaScript ve C++'da platforma tam bir uyum sağladığını görebiliyoruz. Otomatik Ekran Rotasyonu (Automatic screen rotation) Birçok akıllı telefon ve mobil cihazların sahip olduğu özellik olan; grafiklerin ekranda dönmesi sonucunda boy oranlarına göre yeni yönlerinin ekrana adapte olabilmesi özelliği, otomatik ekran rotasyonu (Automatic screen rotation) olarak bilinmektedir. Bir cihazın elde edilen verileri ile o cihazın temel yönlerini belirlemenize olanak sağlanır. Amaç, otomatik bir şekilde ekranın yönelimlerine, insanların yazılımsal yada donanımsal bir şekilde müdahele etmesine gerek kalmadan daha doğal bir şekilde cihazlarını kullanabilmelerini sağlamaktır. Sensörler için temel hareketler bulunmaktadır. Uygulamalarımızda da yine bu hareketlere ait verileri çebileceğimiz API'ler içerisinde uygun metotları kullanacağız. Sensörlerdeki temel hareketler ise; Shake, Rotate ve Flip'tir. Bunlar hazır olaylar (event) olup, projenizde çağırarak otomatik olarak verileri çekebilirsiniz. Adaptive brightness Windows 8' de göze çarpan ilk sistem özelliklerden birisi Adaptive Brightness olarak bilinen otomatik ekran parlaklığı kontrolüdür. Mobil ve Laptop'ları hedef alan bir özellik ise Ambient light sensors (ALS) olarak bilinen ortam ışığı sensörleridir. Günümüzde ekran panelleri yaklaşık iki katı yoğunlukta parlaklık seviyelerini desteklemektedir. Dinamik ortam ışığı değişen koşullara göre ekran parlaklığını kontrol ederek, konforlu okuma Page 24 of 33

25 düzeyini optimize eder ve ekran karanlık ortamlarda parlaklığını daha düşük bir seviyede ayarlayacağı için pil ömrü kaybedilmeyecektir. Ortam ışıklarını algılayabilecek Light Sensor'ler bulunmaktadır. Ortamdaki ışığı algılayıp, uygulamalarda hazır event'lar sayesinde çektiğimiz verileri işlemlere sokabilir ve uygulamanın bu verilerle nasıl çalışması gerektiğini belirleyebiliriz. Light Sensor'ler ise; Dark, Indoors, Outdoors şeklindedir. Tüm bunlarla ilgili verileri uygulamamıza çekebilmemiz için sekronize bir şekilde çalışmamız gerekiyor. Bunun için de methotlarımızda C# 5.0 yenilikleriyle birlikte gelen async - await anahtar kelimelerini kullanarak uygulama geliştirmemiz gerekmektedir. Böylelikle çekebileceğimiz pozisyonları sekronize bir şekilde işlemlere sokabiliriz. Page 25 of 33

26 EĞİTİM : WINDOWS 8 METRO STİL UYGULAMALARDA GÖRSEL ÖĞELER Bölüm : Uygulama Kabiliyetlerini Belirleme ve Sensörler Konu : Windows 8 Üzerinde Kamera Kullanımı Page 26 of 33

27 Windows 8 Üzerinde Kamera Kullanımı Bu bölümde, C# ve XAML kullanarak, kameradan faydalanan bir Metro Style Uygulama geliştireceğiz. Bu amaçla, öncelikle Microsoft Visual Studio 2012 kullanarak yeni bir Metro Style proje oluşturalım. Visual Studio içerisindeki menüden File -> New -> Project seçenekleri ile ilerleyebileceğimiz gibi, CTRL + SHIFT + N klavye kısayolunu da kullanabiliriz. Karşımıza gelen pencerede, sol taraftaki şablonlar (templates) sekmesinin altında bulunan Visual C# seçeneği altında şablon grupları listelenmektedir. Windows Metro Style grubunu seçerek ilerleyelim. Seçimin ardından sağ tarafta Metro Uygulama geliştirmeye başlamak için kullanabileceğimiz şablonlar listelenecek. Buradan da Blank App(XAML) şablonunu seçip, projeye bir isim verelim ve OK butonu ile projeyi oluşturalım. Page 27 of 33

28 Oluşturulan projeye ait dosyaları ekranın sağ tarafındaki Solution Explorer içerisinde görebiliriz. Burada yer alan MainPage.xaml dosyasını çift tıklayarak tasarım ekranını açalım. Artık, sol tarafta bulunan Toolbox'tan gerekli kontrolleri sürükleyip tasarım ekranına bırakabilirsiniz. Ayrıca XAML tarafında kod yazarak da uygulamanın görünümünü tasarlayabilirsin. Bu örnek uygulamamızda Image ve Button kontrolleri ile çalışacağız. Bu kontroller ile ilgili XAML kodlarını aşağıda bulabilirsiniz. <Page x:class="webcamapiapp.mainpage" IsTabStop="false" xmlns=" xmlns:x=" xmlns:local="using:webcamapiapp" xmlns:d=" xmlns:mc=" mc:ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Content="Fotoğraf Çek" HorizontalAlignment="Left" Height="86" Margin="549,672,0,0" VerticalAlignment="Top" Width="276" Click="BtnFotografCek_Click"/> <Image x:name="photo" HorizontalAlignment="Left" Height="628" Margin="75,39,0,0" VerticalAlignment="Top" Width="1215"/> </Grid> </Page> Page 28 of 33

29 Bu XAML kodlarının sağlayacağı tasarım görünümü aşağıdaki görseldeki gibi olacaktır; Şimdi, uygulamamızın görsel arayüzünün arkasında çalışacak olan kodları yazmaya başlayalım. BtnFotografCek_Click olayına (event) ait kodları yazmadan önce gerekli olan isimalanlarını daha rahat kullanabilmek için using satırlarımızı projeye ekleyelim. using Windows.Media.Capture; using Windows.Storage; using Windows.UI.Xaml.Media.Imaging; Page 29 of 33

30 Kamera sensörüne erişmek için gerekli olan kodları yazarken kullanacağımız Camera API'nin yardımı ile kameradan yakaladığımız görüntüyü BitmapImage olarak elde edebiliriz. Şimdi, butonumuzun arkasında yer alacak olan kodları yazalım. BtnFotografCek_Click olay metodunun kodları aşağıdaki gibi olmalıdır; async private void BtnFotografCek_Click(object sender, RoutedEventArgs e) { var ui = new CameraCaptureUI(); ui.photosettings.croppedaspectratio = new Size(16, 9); var file = await ui.capturefileasync(cameracaptureuimode.photo); if (file!= null) { var bitmap = new BitmapImage(); bitmap.setsource(await file.openasync(fileaccessmode.read)); Photo.Source = bitmap; } } Page 30 of 33

31 Yazılan kodları inceleyecek olursak; var ui = new CameraCaptureUI(); kodu ile kamerayı kullanmamıza yarayacak nesne örnekleniyor. Ardından gelen ui.photosettings.croppedaspectratio = new Size(16, 9); satırında, yakalanacak görüntünün en/boy oranı bildiriliyor. Aşağıda yer alan sıradaki satır ise, görüntünün yakalanmasını sağlıyor. var file = await ui.capturefileasync(cameracaptureuimode.photo); Sonrasında, if parantezi içerisinde bir görüntünün yakalanıp yakalanamadığı kontrol ediliyor ve blok içerisinde de yeni bir BitmapImage nesnesi örnekleniyor. bitmap.setsource(await file.openasync(fileaccessmode.read)); satırı ile, örneklenen BitmapImage nesnesinin içerisine yakalanan görüntü aktarılıyor. Bu noktadan sonra geriye kalan tek şey Photo isimli Image kontrolünün kaynağı olarak, hazırlanan BitmapImage nesnesini göstermek. Bunu da aşağıdaki satır ile yapabilirsin. Photo.Source = bitmap;.net Framework 4.5 ve C# 5.0 ile birlikte gelen yenilikler arasında geliştirici için sadeleştirilmiş ve kolaylaştırılmış Asenkron Programlama da bulunmaktadır. async anahtar kelimesinin kullanımına dikkat ediniz. Bu yöntem sayesinde asenkron işlemleri sanki standard kod yazarmışçasına kolay bir biçimde gerçekleştiriyor olacağız. async - await, C# 5.0 ile birlikte gelen yeni bir kolaylıktır. Şimdi Package.appxmanifest dosyasında, uygulamamızın Webcam kullanacağını bildireceğiz. Sağ tarafta yer alan Solution Explorer penceresinde bulunan Package.appxmanifest 'i tıklayalım. Page 31 of 33

32 Karşımıza gelen pencerede Capabilities sekmesine geçelim ve burada Webcam 'i seçerek işaretleyelim. Şimdi, Package.appxmanifest penceresini kapatalım ve son yapmış olduğumuz değişikliği kaydedelim. Sıra geldi uygulamamızı çalıştırıp test etmeye. Bu amaçla ekranın üst bölümünden Local Machine seçeneğini ele alalım ve Play simgesine tıklayarak veya F5 klavye kısayolunu kullanarak uygulamamızı çalıştıralım. Page 32 of 33

33 Uygulama çalıştığı anda tasarladığımız ekran karşımıza geliyor. Bu ekranın görünümü aşağıdaki gibi olacaktır. Fotoğraf Çek Butonuna dokunduktan sonra, kullanıcının karşısına, uygulamanın WebCam'i kullanmak istediğine dair bir onay mesajı geliyor. Kullanıcı Allow ile izin verdikten sonra, kodlar çalışacak ve WebCam'den alınan görüntü, uygulama içerisindeki ekrana getirilerek gösterilecektir. Page 33 of 33