Makale Özeti

Bu yazımızda Silverlight 4 uygulamalarının masaüstü tarafında "Full Trust" modunda çalışırkenki özelleştirme seçeneklerinizden uygulama penceresinin tamamen değiştirilmesi konusuna değiniyoruz.

Makale

Silverlight 4 ile beraber gelen "Full Trust Out Of Browser" modunun getirdiği ek özelliklerden biri de tarayıcı dışına alınan bir Silverlight uygulamasının host edildiği işletim sistemi penceresini de özelleştirebiliyor olmak. Aslında daha gerçekçi bir bakış açısı ile konuya bakarsak :) işletim sisteminin penceresini kullanmayıp kendi pencere yapınızı oluşturmanız gerekiyor fakat bu noktada da Silverlight içerisinde yeni API'ler gerçekten bu işi çocuk oyuncağına çeviriyor. Bu yazımıda sıfırdan bir Full Trust OOB uygulaması yaratıp uygulama penceresinin görünüşünde yapabileceğimiz değişikliklere göz atacağız.

Uygulamamızın penceresi ile ilgili yapabileceğimiz ayarlar.
Uygulamamızın penceresi ile ilgili yapabileceğimiz ayarlar.

Yeni yarattığımız uygulamaya sağ tuş ile Solution Explorer içerisinde tıklayıp ulaşabileceğimiz "Properties" ekranında ilk olarak uygulama bir "Out Of Browser" application yapabilmek için "Enable running application out of the browser" seçeneğini işaretliyoruz. Sonrasında "Out-Of-Browser Settings" bölümüne geçerek hemen full-trust moduna geçmek "Require elevated trust" kutucuğunu işaretliyoruz. Böylece "Windows Style" adındaki combo aktif hale gelerek bizim uygulamamıza ait işletim sistemi penceresini özelleştirebilmemizi sağlıyor. İlk olarak gelin uygulamamızda örnek amaçlı olarak ihtiyacımız olacak kontrolleri yaratalım.

[XAML]

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

        <Rectangle x:Name="recBar" Fill="Blue" Height="27" VerticalAlignment="Top"/>

        <Button x:Name="btnKapat" Content="Button" HorizontalAlignment="Right" Height="19" Margin="0,8,8,0" VerticalAlignment="Top" Width="23"/>

        <Rectangle x:Name="recKose" HorizontalAlignment="Right" Height="22" VerticalAlignment="Bottom" Width="31">

            <Rectangle.Fill>

                <LinearGradientBrush EndPoint="1.273,1.348" StartPoint="0.5,0">

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

                    <GradientStop Color="White"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <Button x:Name="btnUfalt" Content="Button" HorizontalAlignment="Right" Height="19" Margin="0,8,72,0" VerticalAlignment="Top" Width="23"/>

        <ToggleButton x:Name="btnBuyut" Content="ToggleButton" HorizontalAlignment="Right" VerticalAlignment="Top" Width="20" Margin="0,5,48,0"/>

    </Grid>

Uygulama ekranımızda iki adet ayrı Rectangle var. Bunlardan birini uygulama ekranını sağa sola taşıyabilmek için handle olarak kullanacağız. Diğer rectangle ise uygulama ekranın sağ alt köşesine yapıştırılmış durumda. Böylece bu rectangle da uygulama ekranının sağ alttan tutularak tekrar boyutlandırılabilmesini sağlayacak. Rectangle'lar haricinde iki button ve bir de ToggleButton'umuz var. Düğmelerden biri uygulamayı kapatmak için diğeri ise Windows Taskbar'a küçültebilmek için lazım. ToggleButton ise uygulamanın gerektiğine tam ekran yapılabilmesini veya eski haline geri alınabilmesini sağlayacak. Anlayacağız aslında kabaca normal bir Windows penceresi yapacağız ama tamamen kendi tasarımımız ve implementasyonumuz ile yapacağız.

Basit hali ile uygulama ekranımız.
Basit hali ile uygulama ekranımız.

Aslında bu noktaya kadar tasarımınızı tamamladınız ve "No Border" ayarını yaptıysanız uygulamanızın desktop modundaki penceresini bitirdiniz demektir. Fakat geriye kalır işlevsellikleri eklemek. Yani en basiti "Kapat" düğmesine basıldığında uygulama kapanmalı. Gelin şimdi bu gibi özellikler için kullanacağımız API'lere hızlıca göz atalım.

[VB]

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

        If App.Current.HasElevatedPermissions And App.Current.IsRunningOutOfBrowser Then

            App.Current.MainWindow.DragMove()

        End If

    End Sub

Yukarıdaki kod ile uygulama penceremizin taşınması ile ilgili gerekli işlevselliği projemize eklemiş olduk. Çok kolay değil mi? Tek yapmanız gereken handle olarak kullanacağınız bir UIElement'i sahneye eklemek (bu bizim örneğimizde bir rectangle) sonra da MouseLeftButtonDown eventinde DragMove metodunu çağırmak. Geriye kalan herşey otomatik olarak halloluyor. Artık uygulamamızın kendi tasarladığımız penceresindeki handle'dan tutup sağa sola taşıyabiliriz. Tabi eğer taşınan koordinatı kenara bir yere kaydetmek ve bir dahakine oradan açmak isterseniz kaydetme ve okuma işlemlerini IsolatedStorage'dan AppSettings ile sizin yapmanız gerekecektir.

[VB]

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

        If App.Current.HasElevatedPermissions And App.Current.IsRunningOutOfBrowser Then

            App.Current.MainWindow.DragResize(WindowResizeEdge.BottomRight)

        End If

    End Sub

Dikkatinizi çektiyse tüm API'leri kullanırken uygulamanın Desktop modunda olup olmadığını ve Full Trust bir uygulama olup olmadığını da kontrol ediyoruz. Çünkü aksi halde kullanıcıların bu API'leri tarayıcı içerisinde de çağırabilirlerde ve tek alacakları şey de garip hatalar olurdu. Konumuza dönecek olursak. Bir sonraki adımda hedefimiz uygulama penceremizin boyutunun kullanıcı tarafından değiştirilebilmesini sağlamak. Bunun için zaten uygulama ekranında ek bir Rectangle nesnesini ekranın sağ altına yerleştirmiştik. Böylece kullanıcıların o Rectangle üzerinden tıklayarak uygulama penceresini boyutlandırabilecekti. İşte bunu da yapabilmek için söz konusu Rectangle'ın MouseLeftButtonDown durumunda DragResize metodunu çağırıyoruz. Metodumuzu çağırırken ayrıca uygulamanın neresinden Resize edildiğini de parametre olarak vermemiz gerekiyor. Bizim Rectangle sağ altta olduğunda göre BottomRight parametresi doğru olacaktır. Başka herhangi birşey yapmamız gerekmiyor. Artık penceremiz hem taşınabilir hem de boyutlandırılabilir oldu.

[VB]

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

        If App.Current.HasElevatedPermissions And App.Current.IsRunningOutOfBrowser Then

            App.Current.MainWindow.Close()

        End If

    End Sub

 

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

        If App.Current.HasElevatedPermissions And App.Current.IsRunningOutOfBrowser Then

            App.Current.MainWindow.WindowState = WindowState.Minimized

        End If

    End Sub

 

    Private Sub btnBuyut_Checked(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnBuyut.Checked

        If App.Current.HasElevatedPermissions And App.Current.IsRunningOutOfBrowser Then

            App.Current.MainWindow.WindowState = WindowState.Maximized

        End If

    End Sub

 

    Private Sub btnBuyut_Unchecked(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnBuyut.Unchecked

        If App.Current.HasElevatedPermissions And App.Current.IsRunningOutOfBrowser Then

            App.Current.MainWindow.WindowState = WindowState.Normal

        End If

    End Sub

Yukarıdaki dört durumu çok basit bulduğum için topluca değerlendirmeyi uygun buldum. Kodlarımızdan ilki Close metodu ile programı kapatıyor. Diğer metodlar ise özünde hem Winforms hem de WPF'ten alışık olduğumuz WindowsState'i değiştiriyor. Yani uygulama penceresini tam ekran yapabiliyor, normal haline alabiliyor veya taskbara ufaltabiliyoruz. Tüm bunları uygun kontrollere de atayınca olay bitiyor.

Gördüğünüz gibi kendi özel pencerelerini tasarlayarak Silverlight Desktop uygulamalarınızı da apayrı görselliklerle sunabilirsiniz ;)

Hepinize kolay gelsin.