Makale Özeti

Bu makalemizde Silverlight 2.0 uygulamalarında tarayıcı içerisinde gözüken varsayılan sağ tuş menüsünü iptal ederek kendi özel menülerimizi oluşturup göstermeyi inceliyoruz.

Makale

Silverlight uygulamalarında sağ tuş uygulamaya tıkladığımızda karşımıza Silverlight'a ait özel "Silverlight Configuration" menüsü gelir. Bu menüden kullanıcıların Silverlight uygulaması ile ilgili ayarları yapabilecekleri bir arayüze ulaşılır. Fakat bazı durumlarda farenin sağ tuşunu biz de kullanmak isteyebiliriz. Bu ister global anlamda tüm sayfayı kapsayacak şekilde olsun ister belirli Silverlight kontrolleri için olsun istersek sağ tuş ile gelen menüyü değiştirme şansımız var.

Menümüzü ve animasyonları hazırlayalım.

Silverlight uygulamamızda sağ tuş ile tıklandığında gösterilmek üzere hızlıca bir menü hazırlayalım. Menümüzde birden çok düğme bulunacak. Düğmeleri dikey olarak sahnede sıralamak için Menu'ye ait kök element olarak bir StackPanel kullanacağız.

        <StackPanel Height="248" Width="160" Background="#FFFF0000" x:Name="Menu1" Canvas.Top="24" Canvas.Left="48" Opacity="0">

            <Button Content="Button"/>

            <Button Content="Button"/>

            <Button Content="Button"/>

            <Button Content="Button"/>

            <Button Content="Button"/>

        </StackPanel>

Yukarıdaki XAML kodu içerisinde Menu1 adında bir StackPanel bulunuyor. StackPanel içerisinde tüm düğmeler dikey olarak hizalanacak. Bu StackPanel'i duruma göre sahnede gösterecek veya saklayacak olan animasyonlarımızı da hazırlayalım. Animasyonlar basit bir şekilde StackPanel'in Opacity özelliğini değiştirecekler.

        <Storyboard x:Name="MenuGel">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Menu1" Storyboard.TargetProperty="(UIElement.Opacity)">

                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="1"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

        <Storyboard x:Name="MenuGit">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Menu1" Storyboard.TargetProperty="(UIElement.Opacity)">

                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

Sıra kodlamada...

Uygulayacağımız taktik aslında çok basit; Silverlight uygulamasının içerisinde bulunduğu sayfanın oncontextmenu event'ını yakalayarak normal çalışma şeklini iptal edip menü gösterme işlemini biz üstleneceğiz. İlk olarak söz konusu event'ı uygulama açılışında yakalayalım.

[VB]

    Public Sub New()

        InitializeComponent()

        System.Windows.Browser.HtmlPage.Document.AttachEvent("oncontextmenu", AddressOf SagTus)

    End Sub

[C#]

        public Page()

        {

            InitializeComponent();

            System.Windows.Browser.HtmlPage.Document.AttachEvent("oncontextmenu", SagTus);

            this.MouseLeftButtonDown += new MouseButtonEventHandler(Page_MouseLeftButtonDown);

        }

Kodumuz içerisindeki SagTus adındaki event-handlerımızı da hemen yazalım.

[VB]

    Private Sub SagTus(ByVal sender As Object, ByVal args As Browser.HtmlEventArgs)

        Menu1.SetValue(Canvas.LeftProperty, CDbl(args.OffsetX))

        Menu1.SetValue(Canvas.TopProperty, CDbl(args.OffsetY))

        MenuGel.Begin()

        args.PreventDefault()

    End Sub

[C#]

        void SagTus(object sender, System.Windows.Browser.HtmlEventArgs args)

        {

            Menu1.SetValue(Canvas.LeftProperty, (double)args.OffsetX);

            Menu1.SetValue(Canvas.TopProperty, (double)args.OffsetY);

            MenuGel.Begin();

            args.PreventDefault();

        }

Kodumuzda ilk olarak args üzerinden farenin konumuzu alıyoruz ve söz konusu konuma Menu1 adındaki StackPanel'imizi taşıyoruz. Bizim örneğimizdeki Silverlight uygulamasının kök elementi bir Canvas olduğu için taşıma işlemini StackPanel'in Canvas.Left ve Canvas.Top özelliklerini değiştirerek halledebiliriz. Bir sonraki adımda menüyü görünür hale getirecek olan MenuGel animasyonunu çalıştırıp, args üzerinden PreventDefault metodunu çalıştırarak söz konusu event-handler'ın tarayıcı tarafından değerlendirilmesini engelliyoruz. Böylece tarayıcı bu event çalıştığında herhangi bir menü göstermeyecek.

[VB]

    Private Sub Page_MouseLeftButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Me.MouseLeftButtonDown

        MenuGit.Begin()

    End Sub

[C#]

        void Page_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

        {

            MenuGit.Begin();

        }

Son olarak uygulamanın herhangi bir yerine tıklandığında menüyü saklayacak olan MenuGit animasyonunu çalıştırıyoruz. Böylece istediğimiz gibi sağ tuş ile gelecek olan menüyü ayarlayabilir, tasarımını değiştirebiliriz.

Hepinize kolay gelsin.

Daron Yöndem
MVP, MCT, MCPD, MCITP, MCTS
MCSD, MCAD, MCDBA, MCP, ACP, ICSD
Blog: http://daron.yondem.com
Sorularınız için: http://daron.yondem.com/tr/sorusor