Makale Özeti

Bu yazımızda Silverlight 4 Beta'da yeni gelen OOB (Out Of Browser) modunda kullanılabilen NotificationWindow yapısına göz atarken görsel olarak yapılabilecek değişiklikleri de inceliyoruz.

Makale

Notification deyince aklınıza büyük ihtimal ile Outlook'un veya Live Messenger'ın alttan çıkan minik pencereleri gelecektir. Çok sıklaşmaması halinde gerçekten güzel bir kullanıcı deneyimi sağlayan Notification pencerelerini Silverlight 4 ile beraber de isterseniz OOB (Out Of Browser) modunda kullanabiliyorsunuz. Hem de tamamen özelleştirilebilir bir tasarımla.

Notification sınıfı....

Silverlight içerisinde gelen hazır notification sınıfı elinizdeki herhangi bir content'i Notification olarak gösterebilmemizi sağlıyor fakat bu sınıfın içerisinde hazır herhangi bir tasarım gelmiyor. O nedenle yarattığımız her Notification için vereceğimiz Content aslında tüm kontrolün kendi tasarımını barındıracak.

[VB]

    Private Sub btnTikla_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnTikla.Click

        Dim Uyari As New NotificationWindow

        Uyari.Content = New TextBlock With {.Text = "Deneme"}

        Uyari.Show(2000)

    End Sub

Yukarıdaki gibi basit bir şekilde yaratılabilen NotificationWindow'lar Content'leri verildikten sonra Show metodları ile gösterilebiliyorlar. Show metodu parametre olarak notification'ın gösterileceği süreyi milisaniye olarak alıyor. Yani bizim örneğimizde Notification tam 2 saniye boyunca gösterilecek. Aynı anda maalesef tek bir notification gösterebiliyoruz. Eğer aynı anda birden çok NotificationWindow yaratılır ve Show metodları çağrılırsa her zaman en son çalışan gösterilecektir. Bu nedenle belki bu konuda bir kuyruk/helper sistemini elle yazıp implemente etmeniz mantıklı olabilir.

Varsayılan ayarları ile basit bir NotificationWindow.
Varsayılan ayarları ile basit bir NotificationWindow.

Tabi hiçbir zaman yukarıdaki gibi basit bir NotificationWindow işinizi görmeyecektir. İşin güzel tarafı NotificationWindow sınıfının Content Property'sine herhangi bir UIElement'i verebiliyoruz. Haricen yaratılmş bir UserControl bunun için en uygun aday olabilir. Söz konusu UserControl kendi içerisine apayrı bir tasarım saklayabilir, hatta kendi içerisinde farklı Button'lar vs interaksyon kontrolleri de barındırabilir böylece kullanıcılar NotificationWindow'larda belirli yerlere tıklayarak uygulamanıza mesaj da gönderebilir.

Bu amaçla gelin beraber sıfırdan bir UserControl tasarlayalım. Söz konusu UserControl'ü Blend içerisinde istediğiniz gibi tasarlayabilirsiniz. Bizim örneğimizde önemli olan bu UserControl'ün içerisinde olası bir mesajı gösterecek bir TextBlock'un ve bir de tıklanabilir Button'un bulunması.

[XAML]

<UserControl x:Class="SilverlightApplication31.SilverlightControl1"

   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   mc:Ignorable="d"

   d:DesignHeight="300" d:DesignWidth="400" Width="400" Height="100">

 

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.RowDefinitions>

            <RowDefinition Height="0.13*"/>

            <RowDefinition Height="0.6*"/>

            <RowDefinition Height="0.27*"/>

        </Grid.RowDefinitions>

        <Rectangle Grid.RowSpan="1">

            <Rectangle.Fill>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Black" Offset="1"/>

                    <GradientStop Color="#FFC6C6C6"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <Rectangle Grid.RowSpan="2" Grid.Row="1">

            <Rectangle.Fill>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="#FF8B8B8B"/>

                    <GradientStop Color="#FFC6C6C6" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <Button x:Name="btnOK" Content="OK" HorizontalAlignment="Right" Width="75" d:LayoutOverrides="Height" Grid.Row="2" Margin="5,0,5,5"/>

        <TextBlock x:Name="txtMesaj" Margin="10" TextWrapping="Wrap" Text="TextBlock" d:LayoutOverrides="Height" Grid.Row="1"/>

    </Grid>

</UserControl>

Yukarıdaki XAML kodu giriş seviyesi bir tasarım için yeterli olacaktır. UserControl içerisinde önemli olan bir OK düğmesinin ve bir de txtMesaj adında TextBlock'un bulunması. Bu kontrollerin işlevselliği ayrıca programlayacağız.

[VB]

Partial Public Class SilverlightControl1

    Inherits UserControl

 

    Public Sub New

        InitializeComponent()

    End Sub

 

    Private PMesaj As String

    Public Property Mesaj() As String

        Get

            Return PMesaj

        End Get

        Set(ByVal value As String)

            PMesaj = value

            txtMesaj.Text = PMesaj

        End Set

    End Property

 

    Public Event OK()

 

    Private Sub btnOK_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnOK.Click

        RaiseEvent OK()

    End Sub

End Class

UserControl'ümüzün arkasındaki kodu baktığımızda Mesaj adında bir Property ve OK adında bir de event görüyoruz. Mesaj Property'si dışarıdan alınan bir mesaj metninin içerideki TextBlock'a aktarılması için kullanılıyor. OK event'ı ise içerideki Button kontrolünün Click eventını dışarıya haber veriyor. Bu özellikler duruma göre zenginleştirilebilir. Örneğin konsept seviyesinde kalması için çok üzerinde durmaya şimdilik gerek yok.

Sıra geldi artık bu UserControl'ü NotificationWindow ile beraber kullanmaya. Tek yapmamız gereken bu UserControl'den bir kopya alıp NotificationWindow sınıfına content olarak vermek.

[VB]

    Private Sub btnTikla_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnTikla.Click

        Dim Uyari As New NotificationWindow

        Dim X As New SilverlightControl1

        X.Mesaj = "Bu bir uyarı mesajıdır"

        AddHandler X.OK, Sub()

                             MessageBox.Show("OK")

                         End Sub

        Uyari.Content = X

        Uyari.Show(2000)

    End Sub

Kod içerisinde de gördüğünüz üzere Mesaj değerini aktardıktan sonra bir de OK eventına event-listener ataçlıyoruz. NotificationWindow içerisinde OK düğmesine basıldığında şimdilik basit bir MessageBox göstereceğiz.

NotificationWindow özel tasarımı ile karşınızda.<
NotificationWindow özel tasarımı ile karşınızda./p>

Gördüğünüz gibi ufak bir tasarım değişikliği bile NotificationWindow'u çok daha profesyonel hale dönüştürebiliyor. UserControl içerisinde kullanabileceğiniz animasyonlardan tutun diğer işlevselliklere kadar bu deneyimi çok daha zenginleştirmeniz mümkün.

Hepinize kolay gelsin.