Silverlight 4'te desktop (Out-Of-Browser) uygulamalarının pencere tasarımını değiştirmek

0 dakikada yazıldı

7710 defa okundu

Düzenle

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.