Makale Özeti

Silverlight 2.0 uygulamalarında ana gösterilen XAML dosyasını uygulama çalışırken değiştirerek daha geniş çaplı uygulamalar hazırlayabilir ve uygulamanın geliştirilme ortamını daha rahat bir şekilde yönetebilirsiniz. Bunu yapabilmek için ihtiyacınız olan taktiği bu yazıda inceliyoruz.

Makale

Bir Silverlight uygulamasında birden çok XAML dosyası kullanarak dosyalar arasında geçiş yapmak isteyebilirsiniz. Fakat bu noktada maalesef sizi ufak bir sorun bekliyor. Herhangi bir Silverlight uygulamasının ana görsel elementini maalesef ki değiştirme şansınız yok. Ana görsel element olarak bahsettiğimiz şey aslında Silverlight 2.0 uygulamasının XAML koduna ait "Root Element" oluyor. Söz konusu root element sadece uygulama ilk çalıştırılırken belirlenebiliyor. Peki bu durumda nasıl bir çözüm geliştirebiliriz?

Root Elementi bir Container olarak kullansak?

Uygulamamızın ana elementini bir Grid yapsak ve içerisinde XAML dosyalarımızı birer UserControl olarak yerleştirsek, böylece istediğimiz zaman Grid içerisindeki elementlerini değiştirerek farklı XAML dosyaları yükletemez miyiz? Güzel bir fikre benziyor. Deneyip görelim.

İlk olarak içerisinde basit bir şekilde iki adet XAML dosyası içeren yeni bir Silverlight 2.0 projesi yaratıyoruz. Bu dosyalardan birinde sadece bir TextBlock varken diğerinde bir TextBlock ve bir de Button olarak. İlk dosyadaki Button'a basıldığında ikinci dosyanın yüklenmesini sağlayacağız. Gelin önce dosyalarımızın XAML kodlarına hızlıca bir göz atalım.

[Page.xaml]

<UserControl

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

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

    x:Class="SilverlightApplication4.Page"

    Width="640" Height="480">

 

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

        <TextBlock x:Name="etiket" Margin="146,120,270,225" TextWrapping="Wrap" FontSize="72">

            <Run FontFamily="Portable User Interface" FontSize="14.666666984558106" FontStretch="Normal" FontStyle="Normal" FontWeight="Normal" Foreground="#FF000000" Text="1"/>

        </TextBlock>

        <Button Height="30" HorizontalAlignment="Left" Margin="169,0,0,78" VerticalAlignment="Bottom" Width="105" Content="Button" x:Name="Dugme"/>

    </Grid>

</UserControl>

[Page2.xaml]

<UserControl

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

    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"

    x:Class="SilverlightApplication4.Page2"

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

 

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

        <TextBlock Margin="154,113,206,172" TextWrapping="Wrap">

            <Run FontFamily="Portable User Interface" FontSize="14.666666984558106" FontStretch="Normal" FontStyle="Normal" FontWeight="Normal" Foreground="#FF000000" Text="2"/>

        </TextBlock>

    </Grid>

</UserControl>

Herhangi bir Silverlight 2.0 projesinde ilk açılacak olan XAML dosyasının sınıfı App.xaml ile beraber çalışan code-behind dosyasına belirlenir. Bu dosyayı  WPF uygulamalarında app.xaml'a veya ASP.NET uygulamalarındaki Global.asax'a benzetebilirsiniz. App.xaml uygulama ile ilgili global işlemlerin yapıldığı yerdir. İlk olarak app.xaml dosyasının code-behind kısmına geçerek uygulamanın OnStartUp durumuna özel bir kod yazacağız.

Private Sub OnStartup(ByVal o As Object, ByVal e As EventArgs) Handles Me.Startup

    Dim BirGrid As New System.Windows.Controls.Grid

    BirGrid.Children.Add(New Page)

    Me.RootVisual = BirGrid

End Sub

Yukarıdaki kod içerisinde ilk olarak bir Silverlight 2.0 Grid kontrolü yaratıyoruz. Unutmayın ki WPF'de de oluğu gibi Grid kontrolleri birer DataGrid değiller. Grid kontrolleri HTML'deki karşılığı ile table diyebileceğimiz container kontrollerinden sadece biri. Yarattığımız Grid kontrolü içerisine Page.xaml dosyamızı yüklemek için Page.xaml'a ait code-behind'daki sınıfından bir kopya yaratarak Grid'imizin children listesine ekliyoruz. Son olarak da uygulamamızın ana / root elementini Grid kontrolü olarak tanımlıyoruz. Böylece bundan sonra ana elementi değiştirmeden doğrudan Grid içerisindeki kontrolleri değiştirerek aslında tüm uygulama arayüzünü de değiştirmiş olacağız.

Gelelim Page.xaml dosyamızın code-behind kısmına ve bakalım Page.xaml içerisinde bulunan düğmemize basıldığında nasıl olacak da uygulama arayüzünden page.xaml'ı kaldırarak page2.xaml'ı yükleyeceğiz.

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

    Dim Root As Grid = CType(Me.Parent, Grid)

    Root.Children.Clear()

    Root.Children.Add(New Page2)

End Sub

Yapmamız gereken aslında şu an içerisinde olduğumuz Page.xaml dosyasının parent elementini bularak içerisindekileri silmek. Bunun için Me.Parent ile Gridimizi yakalıyoruz ve sonrasında children.clear ile sayfadaki herşeyi siliyoruz. Son olarak da Page2.xaml dosyamıdan bir kopya yaratarak aynı Grid'in içerisine ekliyoruz. Böylece Silverlight 2.0 uygulamamızın içerisinde artık başka bir XAML dosyası yüklemiş olduk.

Hepinize kolay gelsin.

Daron Yöndem
MVP, MCT, MCPD, MCITP, MCTS
MCSD, MCAD, MCDBA, MCP, ACP, ICSD
http://daron.yondem.com

*Bu makale Silverlight 2.0 Beta 1 kullanılarak yazılmıştır.