Makale Özeti

Bu makalemde sizlere Windows 8 RT kontrollerinden PopupMenu'den bahsedeceğim. PopupMenu ekranın istediğimiz yerinde popup şeklinde bir menü açmamıza yarayan kontroldür, en yaygın kullanımı context menü olaraktır. PopupMenu nesnesinin ne gibi özellikleri olduğunu inceledikten sonra bu özelliklerin kullanımlarını gerek HTML/JavaScript gerek ise XAML/C# kullanarak yapacağımız örneklerle pekiştireceğiz.

Makale

 

Bu makalemde sizlere Windows 8 RT kontrollerinden PopupMenu'den bahsedeceğim.

PopupMenu ekranın istediğimiz yerinde popup şeklinde bir menü açmamıza yarayan kontroldür, en yaygın kullanımı context menü olaraktır. PopupMenu nesnesinin ne gibi özellikleri olduğunu inceledikten sonra bu özelliklerin kullanımlarını gerek HTML/JavaScript gerek ise XAML/C# kullanarak yapacağımız örneklerle pekiştireceğiz.

Metodlar :

ShowAsync(Point invocationPoint) : Bu metod ile hazırlamış olduğunuz PopupMenu'yü kullanıcıya belirtmiş olduğunuz nokta üzerinde gösterebilirsiniz. PopupMenu'nün gösterilmesi asenkron olarak başlayacaktır.

ShowAsync(Rect selection) : Bu metod ile hazırlamış olduğunuz PopupMenu'yü kullanıcıya belirtmiş olduğunuz alan üzerinde gösterebilirsiniz. PopupMenu'nün gösterilmesi asenkron olarak başlayacaktır.

ShowAsync(Rect selection,Placement preferredPlacement) : Bu metod ile hazırlamış olduğunuz PopupMenu'yü kullanıcıya belirtmiş olduğunuz alan üzerinde gösterebilirsiniz. Placement parametresi ise menü'nün seçtiğiniz diktörtgenin sağında, solunda, üstünde veya aşağısında gösterilmesini sağlar. PopupMenu'nün gösterilmesi asenkron olarak başlayacaktır.

Özellikler :

Commands: PopupMenu açıldığı zaman belirecek komutlar bu collection'da tutulmaktadır.

Ayrıca command'ları oluşturmak için UICommand nesnesini oluşturacağımız için bu nesneyi de inceleyelim.

UICommand nesnesinde Label, Id ve Invoked özellikleri vardır, Id kontrolün Id'si iken, Label kullanıcıya bu komut için gösterilecek metin, Invoked ise bu komut çalıştığı zaman tetiklenecek handler'dır.

Şimdi isterseniz PopupMenu'nün kullanımı ile ilgili bir örnek yapalım.

Örneğimizde bir TextBox üzerindeki metnin tümünü seçen, veya metni temizleyen bir context menüyü işlemlerini kendi yazacağımız PopupMenu ile yapmaya çalışalım.

XAML

 

<Page
    x:Class="PopupMenuXAML.MainPage"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PopupMenuXAML"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" >
        <TextBox x:Name="tb" HorizontalAlignment="Left" Height="18" Margin="243,37,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="381" ContextMenuOpening="tb_ContextMenuOpening"/>
    </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 PopupMenuXAML
{
    /// <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 tb_ContextMenuOpening(object sender, ContextMenuEventArgs e)
        {
            //Öncelikle TextBox'ın varsayılan context menüsünün açılmasını engelliyoruz.
            e.Handled = true;
            //Daha sonrasında kendi yazdığımız context menüyü açacağımız metodu kullanıcının tıkladığı nokta bilgisi ile çağırıyoruz.
            OpenContextMenu(new Point(e.CursorLeft,e.CursorTop));
        }

        private async void OpenContextMenu(Point p)
        {
            //PopupMenu kontrolümüzü oluşturuyoruz.
            Windows.UI.Popups.PopupMenu pm = new Windows.UI.Popups.PopupMenu();

            //PopupMenu kontrolümüze gerekli komutları ekliyor ve her komut için bir handler yazıyoruz.
            pm.Commands.Add(new Windows.UI.Popups.UICommand("Tümünü Seç", SelectAll));
            if (tb.SelectionLength > 0)
            {
                pm.Commands.Add(new Windows.UI.Popups.UICommand("Seçimi Temizle", ClearSelection));
            }
            pm.Commands.Add(new Windows.UI.Popups.UICommand("Temizle", Clear));
            //PopupMenu'yü kullanıcıya gösteriyoruz.
            var x=await pm.ShowAsync(p);
            if (x == null)
            {

                //Kullanıcı context menu'den birşey seçmedi demektir.
            }

        }
        private void SelectAll(Windows.UI.Popups.IUICommand command)
        {
            tb.SelectAll();
        }
        private void ClearSelection(Windows.UI.Popups.IUICommand command)
        {
            tb.SelectionStart=0;
            tb.SelectionLength = 0;
        }
        private void Clear(Windows.UI.Popups.IUICommand command)
        {
            tb.Text = "";
        }

    }
}

 

Şimdi isterseniz aynı kodu HTML ve JavaScipt ile yazalım ve ne kadar benzerlik gösterdiğine bakalım.

HTML

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>PopupMenuJavaScript</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>

    <!-- PopupMenuJavaScript references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <p>
        <input type="text" id="tb" value="TextBox" />
    </p>
</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() {
            //Nesnemizin context menü eventinda kendi metodumuzu çağrıyoruz. Event'i handle ediiyoruz.
        document.getElementById('tb').addEventListener('contextmenu', OpenContextMenu);
    }
    function OpenContextMenu(e) {
        //PopupMenu nesnemizi oluşturuyoruz.
        var pm = new Windows.UI.Popups.PopupMenu();

        //PopupMenu nesnemize komutlarımızı ekliyoruz.
        pm.commands.append(new Windows.UI.Popups.UICommand("Tümünü Seç", SelectAll));
        if (tb.selectionEnd > 0) {
            pm.commands.append(new Windows.UI.Popups.UICommand("Seçimi Temizle", ClearSelection));
        }
        pm.commands.append(new Windows.UI.Popups.UICommand("Temizle", Clear));

        var po = {x:e.clientX,
            y: e.clientY
        };
        //Kullanıcının tıklamış olduğu noktada PopupMenu'yü kullanıcıya gösteriyoruz.
        var x = pm.showAsync(po);
        x.then(function (cmd) {
            if (cmd == null) {
                // //Kullanıcı menuyu birşey seçmeden kapadı.
            }
        })

        }

        function SelectAll() {
            tb.selectionStart = 0;
            tb.selectionEnd = tb.value.length;
        }
        function ClearSelection() {
            tb.SelectionStart = 0;
            tb.selectionEnd = 0;
        }
        function Clear() {
            tb.value = '';
        }

        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();
    })();

Her iki uygulamayı da çalıştırdığımızda aynı ekran görüntüsünü elde edeceğiz. Elde edeceğimiz ekran görüntüsü aşağıdaki gibi olacaktır.

 

Bu makalemde Windows 8 Metro Style uygulama geliştirmede kullanabileceğiniz PopupMenu kontrolünün kullanımını incelemiş olduk.


Örnek Kodlar C#

Örnek Kodlar JavaScript