Makale Özeti

Bu makalemizde Windows MetroStyle uygulamalarda çoğunlukla karşımıza çıkan App Bar kontrolünün kullanımını inceleyeceğiz. Bu kontrolün kullanımını XAML/C# kullanarak inceleyeceğiz ve örnekler yapacağız.

Makale

Bu makalemizde Windows MetroStyle uygulamalarda çoğunlukla karşımıza çıkan App Bar kontrolünün kullanımını inceleyeceğiz.

Bu kontrolün kullanımını XAML/C# kullanarak inceleyeceğiz ve örnekler yapacağız.

Öncelikle App Bar kontrolünden bahsetmek gerekirse, App Bar fare kullanıyorsanız bir uygulamada sağ tuşa tıkladığınızda, dokunmatik ekran kullanıyorsanız ekranın en alt noktasından yukarıya doğru bir dokunma hareketi gerçekleştirdiğinizde açılacaktır. Bazı app bar örneklerine bakacak olursak;

Öncelikle isterseniz XAML/C# uygulamalarında AppBar'ın kullanımını inceleyelim.

Öncelikle Blank App olarak bir proje oluşturuyoruz.

Arkasından MainPage.xaml dosyamıza gelerek, AppBar kontrolümüzü ekranımıza ekleyebiliriz. Bu ekleme işlemini toolbox'tan sürükle bırakla yapabileceğimizi gibi kontrolü sıfırdan elle yazarak da yapabiliriz. App Bar'ların düzgün çalışabilmesi için Page nesnesinin TopAppBar veya BottomAppBar özelliğine atanmış olmaları gerekmektedir. Bunun için page nesnesini seçip özellikler penceresinden BottomAppbar veya TopAppBar özelliğinin yanında bulunan New button'una basarak da appbar oluşturabiliriz.

Oluşturduğumuz AppBar kontrolünün içerisine girerek buraya istediğimiz kontrolleri eklememiz mümkündür. Örnek olarak bir medya oynatıcısı uygulaması yaptığımızı ve appbar içerisinde Oynat, Duraklat, Dur komutları olduğu bir örnek üzerinden ilerleyelim.

Oluşturduğumuz AppBar kontrolünün adını bottomBar olarak tanımlıyoruz ve içerisine buttonları yan yana dizebilmemiz için StackPanel kontrolü koyuyor ve 3 tane button kontrolü ekliyoruz. Siz bu button'ları uygulamalarınıza metrostyle'ın alışılagelmiş formatı olarak bir çember içerisinde icon koyarak ekleyebilirsiniz. Bunun için hazır stilleri de kullanabilirsiniz. Örneğin Play için Style özelliğine {StaticResource PlayAppBarButtonStyle} değerini vererek alışılagelmiş şekilde gözükmesini sağlayabilirsiniz.

Kodumuz aşağıdaki gibi oluşuyor ve uygulamamızı çalıştırdığımızda ve AppBar'ı açtığımızda karşımıza aşağıdaki gibi bir örnek gelecektir:

<Page
    x:Class="XAMLSample.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XAMLSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <AppBar x:Name="bottomBar">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="btnPlay" Content="Oynat"></Button>
                    <Button x:Name="btnPause" Content="Duraklat"></Button>
                    <Button x:Name="btnStop" Content="Durdur"></Button>
                </StackPanel>

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

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    </Grid>

</Page>

Ancak bu butonlara tıklanıldığı zaman herhangi bir aksiyon alınmamaktadır. İsterseniz butonların çalışır hale gelmesini sağlayalım. Bunun için her button'umuzun click event'ini yazmamız gerekiyor. İsterseniz bu click event'i içerisinde ekranımıza koyduğumuz bir TextBlock'un değerini değiştirelim.

Bu işlemleri yaptığımızda XAML ve C# kodumuz aşağıdaki gibi olacaktır:

XAML

<Page
    x:Class="XAMLSample.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XAMLSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <AppBar x:Name="bottomBar">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="btnPlay" Content="Oynat" Click="btnPlay_Click"></Button>
                    <Button x:Name="btnPause" Content="Duraklat" Click="btnPause_Click"></Button>
                    <Button x:Name="btnStop" Content="Durdur" Click="btnStop_Click"></Button>
                </StackPanel>

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

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tb" HorizontalAlignment="Left" Margin="308,190,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="325" Width="811" FontSize="72"/>

    </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 XAMLSample
{
    /// <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)
        {
        }

        private void btnPlay_Click(object sender, RoutedEventArgs e)
        {
            tb.Text = "Müzik çalıyor";
        }

        private void btnPause_Click(object sender, RoutedEventArgs e)
        {
            tb.Text = "Müzik duraklatıldı";
        }

        private void btnStop_Click(object sender, RoutedEventArgs e)
        {
            tb.Text = "Müzik durduruldu";
        }
    }
}

Ekran görüntümüz ise aşağıdaki gibi olacaktır:

App bar kontrollerimizde button dışında kontroller de kullanmamız mümkündür. Bunun için farklı bir örnek yapalım. Bir textbox koyarak kullanıcıdan bilgi aldığımızı düşünelim. Bunun için yeni bir StackPanel ekliyorum ve uygulamanın altında açılan AppBar'ın sağ tarafında bu bilgiyi kullanıcıdan alıyorum ve biraz önce eklemiş olduğum TextBlock kontrolüne yazdırıyorum.

Bu işlemleri yaptığımızda XAML ve C# kodumuz aşağıdaki gibi olacaktır:

XAML

<Page
    x:Class="XAMLSample.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XAMLSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <AppBar x:Name="bottomBar">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="btnPlay" Content="Oynat" Click="btnPlay_Click"></Button>
                    <Button x:Name="btnPause" Content="Duraklat" Click="btnPause_Click"></Button>
                    <Button x:Name="btnStop" Content="Durdur" Click="btnStop_Click"></Button>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <TextBlock Text="Şarkı Adı" FontSize="36"></TextBlock>
                    <TextBox x:Name="txtSongName" Width="400" FontSize="36"></TextBox>
                    <Button x:Name="btnLoadSong" Content="Şarkıyı Yükle" Click="btnLoadSong_Click"></Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tb" HorizontalAlignment="Left" Margin="308,190,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="325" Width="811" FontSize="72"/>

    </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 XAMLSample
{
    /// <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)
        {
        }

        private void btnPlay_Click(object sender, RoutedEventArgs e)
        {
            tb.Text = "Müzik çalıyor";
        }

        private void btnPause_Click(object sender, RoutedEventArgs e)
        {
            tb.Text = "Müzik duraklatıldı";
        }

        private void btnStop_Click(object sender, RoutedEventArgs e)
        {
            tb.Text = "Müzik durduruldu";
        }

        private void btnLoadSong_Click(object sender, RoutedEventArgs e)
        {
            tb.Text = txtSongName.Text + " isimli şarkı yüklendi";
        }
    }
}

Ekran görüntümüz ise aşağıdaki gibi olacaktır:

Şimdi isterseniz 1-2 son ekleme ile örneğimizi bitirelim. Bu noktadan sonra yaptığım tüm örneklerin kodunu makalemin en sonunda paylaşıyor olacağım.

Şarkımızı yüklemeden önce Oynat, Duraklat, Durdur gibi komutları veremeyeceğimiz için uygulamamız açılırken bu button'ları disable yapabiliriz. Kullanıcı şarkıyı yüklediğinde bu button'ları aktif hale çevirebiliriz. Bunun için buttonlarımızın Isenabled property'lerini false olarak set edip kullanıcı şarkıyı yüklediğinde bu property'i true yapacağız.

Hemen bu işlemin arkasından kullanıcı App Bar'da bulunan bir button'a tıkladığında AppBar'ın otomatik olarak kapanmasını sağlayabiliriz. Bunun için de AppBar'ın IsOpen property'sini kullanabiliriz. Bu property'i aynı zamanda AppBar'ı programatik olarak açmak için de kullanabiliriz. Bunun için button'larımın click event'i sonrasında AppBar'ı kapatması için gerekli kodu yazıyorum.

Bir Appbar'ı yapışkan yapmanız mümkündür. Yani kullanıcı uygulamanızla iletişim içinde olduğunda bu appbar'ın açık kalmasını sağlayabilirsiniz. Yani kullanıcı uygulamada herhangi bir yere tıkladığında AppBar kaybolmayacaktır. Bunun örneğini ise ekranıma bir tane TopBar ekleyip IsSticky özelliğini true yaparak sağlıyorum. Kullanıcı Appbar'ı açtığında ekranla etkileşim kurduğunda altta bulunan appbar kapanırken yukarıda bulunan ve IsSticky property'sini true yaptığım Appbar kapanmayacaktır. Kullanıcı sağ tık yaptığında veya dokunmatik olarak AppBar'ı kapadığında kapanacaktır.

En son olarak isterseniz AppBar'ın belli başlı event'lerine bakalım. İki tane önemli event'i bulunuyor. Bunlar ise Opened ve Closed event'leri. İsimlerinden anlaşılabileceği gibi bir appbar açıldığında Opened kapandığında ise Closed event'i fırlayacaktır. Bununla ilgili ufak bir örneği kodumuza ekleyerek makalemi sonlandırıyorum.

Uygulamamızın nihai hali aşağıdaki gibi olacaktır:

XAML

<Page
    x:Class="XAMLSample.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:XAMLSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.BottomAppBar>
        <AppBar x:Name="bottomBar" Opened="bottomBar_Opened" Closed="bottomBar_Closed">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button x:Name="btnPlay" Content="Oynat" Click="btnPlay_Click" IsEnabled="false"></Button>
                    <Button x:Name="btnPause" Content="Duraklat" Click="btnPause_Click" IsEnabled="false"></Button>
                    <Button x:Name="btnStop" Content="Durdur" Click="btnStop_Click" IsEnabled="false"></Button>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <TextBlock Text="Şarkı Adı" FontSize="36"></TextBlock>
                    <TextBox x:Name="txtSongName" Width="400" FontSize="36"></TextBox>
                    <Button x:Name="btnLoadSong" Content="Şarkıyı Yükle" Click="btnLoadSong_Click"></Button>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
    <Page.TopAppBar>
        <AppBar IsSticky="true">
            Üst App Bar
        </AppBar>
    </Page.TopAppBar>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock x:Name="tb" HorizontalAlignment="Left" Margin="308,190,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="325" Width="811" FontSize="72"/>
        <TextBlock x:Name="tb2" HorizontalAlignment="Left" Margin="308,515,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Height="147" Width="811" FontSize="18"/>

    </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 XAMLSample
{
    /// <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)
        {
        }

        private void btnPlay_Click(object sender, RoutedEventArgs e)
        {
            tb.Text = "Müzik çalıyor";
            bottomBar.IsOpen = false;
        }

        private void btnPause_Click(object sender, RoutedEventArgs e)
        {
            tb.Text = "Müzik duraklatıldı";
            bottomBar.IsOpen = false;
        }

        private void btnStop_Click(object sender, RoutedEventArgs e)
        {
            tb.Text = "Müzik durduruldu";
            bottomBar.IsOpen = false;
        }

        private void btnLoadSong_Click(object sender, RoutedEventArgs e)
        {
            tb.Text = txtSongName.Text + " isimli şarkı yüklendi";
            btnPlay.IsEnabled = true;
            btnPause.IsEnabled = true;
            btnStop.IsEnabled = true;
        }

        private void bottomBar_Opened(object sender, object e)
        {
            tb2.Text = "AppBar Açıldı";
        }

        private void bottomBar_Closed(object sender, object e)
        {
            tb2.Text = "AppBar kapandı";
        }
    }
}

Ekran görüntümüz ise aşağıdaki gibi oluyor:

Örnek Kodlar