Makale Özeti

Bu makalemde sizlere Windows 8 Metro Style uygulama geliştirmede FlipView kontrolünün kullanımından bahsedeceğim.

Makale

Bu makalemde sizlere Windows 8 Metro Style uygulama geliştirmede FlipView kontrolünün kullanımından bahsedeceğim.

Flipview kontrolü sahip olduğu her nesneyi tam ekran olarak gösterir ve nesneler arası geçiş ekranın sağında ve solunda çıkan oklar veya dokunmatik ekranda dokunmatik olarak yapılır.

FlipView'in en güzel kullanıldığı alanlardan biri Internet Explorer'ın ileri ve geri butonlarının kullanımıdır. Aynı zamanda fotoğraf albümündeki fotoğraflar arasında dolaşmak üzere tasarlanmış halini birçok uygulamada görmemiz olasıdır.

Öncelikle HTML/JavaScript uygulamalarında FlipView'i nasıl kullanacağımızı inceleyelim;

FlipView kullanım bakımından listview'e çok benzer temel olarak bir ItemTemplate oluşturup bu Template'in FlipView'e atanması ve ardından FlipView'in datasource'una göstermek istediğimiz nesnelerin atanması şeklinde kodumuzu yazarız.

Örnek kodumuzu yazmadan önce isterseniz FlipView'in belli başlı özelliklerine bir göz atalım.

Event'ler
Datasourcechanged: Bu event FlipView kontrolünün datasource'u değiştiğinde tetiklenir.
PageCompleted: Bu event FlipView yeni bir sayfaya geçtiğinde ve o sayfanın render edilmesi tamamlandığında fırlatılır.
PageSelected: Bu event FlipView yeni bir sayfaya geçer geçmez çalıştırılır.
PageVisibilityChanged: Bu event bir sayfanın görünürlüğü değiştiğinde fırlatılır.

Metod'lar
Count(): FlipView içerisinde kaç nesne olduğunu döndürür.
Next(): Bir sonraki sayfaya programatik olarak geçmemizi sağlayan metoddur.
Previous(): Bir önceki sayfaya programatik olarak geçmemizi sağlayan metoddur.

Property'ler
CurrentPage: Mevcut sayfanın index'ini okuyabileceğimiz veya belirleyebileceğimiz özelliktir.
ItemDataSource: FlipView'e datasource olarak nesneleri verebileceğimiz özelliktir.
ItemSpacing: Nesneler arası boşluğu belirleyen özelliktir.
Itemtemplate: ItemDataSource da verilmiş her bir nesnenin ne şekilde render edileceğinin belirlendiği özelliktir. Sayfa üzerinde bir WinJS.Binding.Template kontrolünü verebilirsiniz.
Orientation: FlipView'in yatay mı dikey mi gösterileceğinin belirlendiği özelliktir.

Şimdi isterseniz ufak bir örnek yapalım.

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FlipViewJavaScript</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

    <!-- FlipViewJavaScript references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <div id="template" data-win-control="WinJS.Binding.Template">
        <img data-win-bind="src:image"/>
        <br /><br />
        <div data-win-bind="innerText:name"></div>
    </div>
    <div id="flip" data-win-control="WinJS.UI.FlipView" data-win-options="{itemTemplate:select('#template')}"></div>
</body>
</html>

JavaScript

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    WinJS.strictProcessing();

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
            loaded();
        }
    };

    function loaded() {
        var usersArray = [
           { image: '/images/user/1.jpg', name: 'Ayşe1' },
           { image: '/images/user/2.jpg', name: 'Ali1' },
           { image: '/images/user/3.jpg', name: 'Ahmet1' },
           { image: '/images/user/4.png', name: 'Mehmet1' },
           { image: '/images/user/5.png', name: 'Mustafa1' },
            { image: '/images/user/1.jpg', name: 'Ayşe2' },
           { image: '/images/user/2.jpg', name: 'Ali2' },
           { image: '/images/user/3.jpg', name: 'Ahmet2' },
           { image: '/images/user/4.png', name: 'Mehmet2' },
           { image: '/images/user/5.png', name: 'Mustafa2' },
        ]

        var dataList = new WinJS.Binding.List(usersArray);

        var flp = document.getElementById('flip').winControl;
        flp.itemDataSource = dataList.dataSource;
    }

    app.oncheckpoint = function (args) {
        // TODO: This application is about to be suspended. Save any state
        // that needs to persist across suspensions here. You might use the
        // WinJS.Application.sessionState object, which is automatically
        // saved and restored across suspension. If you need to complete an
        // asynchronous operation before your application is suspended, call
        // args.setPromise().
    };

    app.start();
})();

Uygulamamızın ekran görüntüsü aşağıdaki gibi olacaktır:

Şimdi ise XAML/C# tarafında FlipView kontrolünü inceleyelim.

XAML tarafına baktığınızda FlipView'in temel özellikleri çok benzerlik gösterse de çok daha fazla event, metod veya property ile karşılaşacaksınız.

Genel olarak kullanım mantığında ise hiçbir değişiklik yok. Önce sayfamızın üzerine FlipView kontrolünü sürükleyerek bırakıyoruz. Sonrasında FlipView kontrolümüze sağ tıklıyoruz ve Edit Additional Templates menüsünden ItemTemplate'i seçiyor ve daha sonra Create Empty diyoruz. Oluşturmuş olduğumuz bu ItemTemplate içerisinde her türlü kontrolü kullanmamız mümkün. Bir kontrolün bir özelliğine değer atamak istiyorsak ise Binding keyword'ünü kullanıyoruz. Örneğin bir TextBlock'un Text özelliğine datasource'da bulunan nesnenin bir özelliğini atamak istiyorsak syntax'ımız şu şekilde oluyor. Text={Binding PropertyAdi}.

İsterseniz şimdi bir örnek yaparak makalemizi sonlandıralım.

XAML

<Page
    x:Class="FlipViewXAML.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:FlipViewXAML"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="DataTemplate1">
            <Grid>
                <Image Source="{Binding image}"></Image>
                <TextBlock Text="{Binding name}"></TextBlock>
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <FlipView x:Name="flip" HorizontalAlignment="Left"  Height="768" VerticalAlignment="Top" ItemTemplate="{StaticResource DataTemplate1}"/>

    </Grid>
</Page>

C#

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238

namespace FlipViewXAML
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            List<User> insList = new List<User>();
            insList.Add(new User { name = "Ayşe", image = "Assets/user/1.jpg" });
            insList.Add(new User { name = "Ali", image = "Assets/user/2.jpg" });
            insList.Add(new User { name = "Ahmet", image = "Assets/user/3.jpg" });
            flip.ItemsSource = insList;
        }
    }
    public class User
    {
        public string name { get; set; }
        public string image { get; set; }
    }
}

Ekran görüntümüze bakacak olursak:

Örnek Kodlar C#

Örnek Kodlar JavaScript