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
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.