Silverlight 2.0 Beta 1 ile gelen yeni Silverlight kontrollerinden biri olan PopUp kontrolü ile beraber Silverlight uygulamaları içerisinde dahili PopUp sistemleri oluşturabiliyoruz. Özellikle farklı Silverlight kullanıcı kontrollerinin bulunduğu projelerde farklı arayüzler arası geçişleri sağlamak için PopUp kontrolleri büyük kolaylık sağlıyor.

Hemen bir PopUp kontrolü örneği yapmak için yeni bir Silverlight 2.0 Beta 1 projesi yaratarak uygulamamızın ana XAML'ı olan Page.XAML içerisine bir düğme yerleştiriyoruz. Söz konusu düğmeye basıldığında PopUp kontrolü açılacak.

[Page.xaml]

<UserControl x:Class="SilverlightApplication1.Page"

    xmlns="http://schemas.microsoft.com/client/2007"

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

    Width="800" Height="600">

    <Grid x:Name="LayoutRoot" Background="#FFFF0000">

        <Button Height="36" HorizontalAlignment="Left" Margin="26,40,0,0" VerticalAlignment="Top" Width="65" Content="POPUP&#xd;&#xa;AÇ" TextAlignment="Center" x:Name="Dugme"/>

    </Grid>

</UserControl>

Uygulamamızın ana sayfasını yukarıdaki şekilde tasarladıktan sonra sıra geldi PopUp kontrolü içerisinde kullanacağımız özel kullanıcı kontrolünü (User Control) hazırlamaya. Söz konusu User Control içerisinde de PopUp'ı kapatacak olan bir düğme ve bir de TextBlock yer alacak.

[UserControl1.xaml]

<UserControl

    xmlns="http://schemas.microsoft.com/client/2007"

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

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

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

    mc:Ignorable="d"

    x:Class="SilverlightApplication1.UserControl1"

    d:DesignWidth="640" d:DesignHeight="480">

    <StackPanel x:Name="LayoutRoot">

        <Canvas Height="323" Width="478" Background="#FF2DFF00">

            <TextBlock TextWrapping="Wrap" FontSize="72" FontWeight="Bold" Text="Popup Test" Height="232" Width="478" Canvas.Left="31" Canvas.Top="29"/>

            <Button Height="112" Content="POPUP Kapat" x:Name="Dugme" Width="171" Canvas.Left="132" Canvas.Top="159"/>

        </Canvas>

    </StackPanel>

</UserControl>

Üstteki şekli ile UserControl'ümüzü de tamamladıktan sonra artık XAML dosyalarımızı ve tasarımlarını bitirdiğimize göre Visual Studio ile kod yazma kısmına geçebiliriz. İlk olarak ana XAML dosyamızdaki Dugme'mizin arkasına PopUp kontrolünü yaratarak ekrana getirecek olan kodu yazalım.

Dim PopupKontrol As New System.Windows.Controls.Primitives.Popup

PopupKontrol.Child = New UserControl1

PopupKontrol.IsOpen = True

Kodumuzun ilk satırında System.Windows.Controls.Primitives NameSpace'i altında yer alan PopUp sınıfını kullanarak yeni bir PopUp kontrolü yaratıyoruz. Bir sonraki satırda ise UserControl olarak hazırladığımız ve adı UserControl1 olan kontrolümüzden bir kopya yaratarak PopUp kontrolünün Child özelliğine eşitliyoruz. İşlemleri tamamladıktan sonra artık PopUp kontrolümüzü ekrana getirebileceğimize göre IsOpen özelliğine True değerini vererek ilerleyebiliriz.

PopUp kontrolümüz ekranda gösterildiğine göre sıra geldi PopUp kontrolündeki UserControl1 içerisindeki düğmeye basıldığında söz konusu PopUp'ı ekrandan kaldırmaya.

Me.Visibility = Windows.Visibility.Collapsed

Yukarıdaki kod ile basit bir şekilde UserControl içerisindeki Düğme'nin Click durumunda UserControl'ümüzü görünmez hali getirerek sahneden kaldırıyoruz. Silverlight uygulamamızında code-behind dosyalarının son hali aşağıdaki şekilde;

[Page.xaml.vb]

Partial Public Class Page

    Inherits UserControl

    Public Sub New()

        InitializeComponent()

    End Sub

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

        Dim PopupKontrol As New System.Windows.Controls.Primitives.Popup

        PopupKontrol.Child = New UserControl1

        PopupKontrol.IsOpen = True

    End Sub

End Class

[Usercontrol1.xaml.vb]

Imports System

Imports System.Windows

Imports System.Windows.Controls

Imports System.Windows.Media

Imports System.Windows.Media.Animation

Imports System.Windows.Shapes

Partial Public Class UserControl1

    Inherits UserControl

    Public Sub New()

        ' Required to initialize variables

        InitializeComponent()

    End Sub

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

        Me.Visibility = Windows.Visibility.Collapsed

    End Sub

End Class

Hepinize kolay gelsin.