Silverlight 4 Beta'da NotificationWindow kullanımı.

0 dakikada yazıldı

5470 defa okundu

Düzenle

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.