Windows Phone cihazını sağa veya sola yatırdığınız vakit uygulamanın da aynı şekilde yön değiştirmesini isteyebilirsiniz.

Bazı uygulamalarda ekranı yatay şeklinde kullanarak daha çok alandan istifade edilebilir. Uygulamanızın ekranı döndürüldüğünde yönünün değişmesini de istemiyor olabiliriz. Bu tamamen geliştiriciye bağlıdır. Ama kimi zaman ekranın döndürülmesi kullanıcının kendini daha güvende olduğunu hissedebilir. Onu düşündüğümüzü görmesi ve ona hitaben bir şeyler koymak uygulamanızda çığır açacağına inanıyorum. Bir uygulamayı açtığında kenarında veya köşesinde adınızın yer aldığını ve size ait bilgilerinizin olduğunu görmesi onu mutlu eder ve uygulamada daha çok kendini bulmak ister. Bizde bu uygulamalarda ekranın ne kadar çok önemli bir yer olduğunu vurgulamak istedik.

Uygulamanızın yalnızca yatay(Landscape), yalnızca dikey(Portrait) veya hem yatay hem de dikey(PortraitOrLandscape) şeklinde kullanılmasını tercih edebilirisiniz. Bunun için tagleri arasında yer alan SupportedOrientations özelliğini değiştirerek yapabilirsiniz.

SupportedOrientations=”Portrait” // Yalnızca dikey mod

SupportedOrientations=”Landscape” // Yalnızca yatay mod

SupportedOrientations=”PortraitOrLandscape” // Hem yatay hem de dikey mod

Bu şekilde uygulamanızın yönünü değiştirmeyi öğrendik. Uygulamayı her iki ekranda da desteklemesini istiyorsak birkaç önemli noktalara değinmemiz gereklidir. Eğer bu ayar yapılmazsa bazı kontroller ekranda görülmeye de bilir. Bunun için ekranımızı grid şeklinde tasarlamalıyız. Gridlere pozisyon vermek hem daha kolaydır hem de görünüm olarak daha verimlidir.

Örnek olarak aşağıdaki şekil üzerinden neler yapabileceğimizi görelim.

9428261020142224209428 3367261020142224363367

<Grid Grid.Row="1" x:Name="grdContent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
        </Grid>

Burada ekranımızın Content bölümünü iki satır ve iki sutun olarak ayırdık. RowDefinition kontrolü satır aralığını yüksekliğini ColumnDefinition kontrolü ise sütun aralığının genişliğini tanımlar. Burada Auto ve * değişkenlerini kullanıldığına dikkat edelim. Auto özelliği oraya koyduğunuz kontrolün boyutlarını alır ve * özelliği de ekranda geri kalan kısmını bu kontrolümüz için ayırır. Şimdi grdContent isimli gridimize bir image bir de TextBlock kontrolünü yerleştirelim.

<Grid Grid.Row="1" x:Name="grdContent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Image x:Name="imgResim" HorizontalAlignment="Center" VerticalAlignment="Center"   Grid.Row="0" Grid.Column="0"  Source="/Assets/ApplicationIcon.png" Stretch="Fill"/>
            <TextBlock x:Name="txtYazi" HorizontalAlignment="Center" Text="deneme" TextWrapping="Wrap" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" />
        </Grid>

Gridlerde sayılar 0 dan başlar her bir satırda 1er artara numaralandırma işlemi yapılır. Aynı durum sütün için de geçerlidir.

Grid.Row=”0” demek ilk satıra bu kontrolü yerleştir demektir.

Grid.RowSpan=”2” iki satırı birleştir anlamına gelir.

Grid.Column=”1” ikinci sütuna bu kontrolü yerleştir demektir.

Grid.ColumnSpan=”3” 3 sütunu birleştir demektir.

HorizontalAlignment=”Center” ve VerticalAlignment=”Center” kontrolleri sizin kontrolünüzü ekranda tam ortalamaya yarar. Dilerseniz diğer Center yerine Left veya daha farklı versiyonlarını deneyerek görebilirsiniz.

x:Name özelliği bulunduğu kontrole isimlendirme sağlar.

Source özelliği image de kullanıldı ve image’in resim kaynağının nereden aldığını gösterir.

Kullanılan kontrollerin özelliklerini verdikten sonra şimdi ekranın değişmesi anında yapılacak değişikliğin metodunu yazmaya geldi.

Bunun için Properties penceresinden OritentedChanged metodunu tıklayalım. .cs dosyasında oluşan metodun içine aşağıdaki kodu yerleştirelim.

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if((e.Orientation & PageOrientation.Portrait)==(PageOrientation.Portrait))
            {
                Grid.SetRow(txtYazi,1);
                Grid.SetColumn(txtYazi,0);
            }

            else
            {
                Grid.SetRow(txtYazi,0);
                Grid.SetColumn(txtYazi,1);
            }
        }

Fark edildiği gibi applicationbar kontrolümüzde ekranımızda yer değiştirdi. Bu şekilde daha geniş ekran kullanabilme imkanı sunuyor.

Written by Sümeyra Akbıyık
hakkımdaki her şeyi bu blogda bulabilirsin. Haydi sende bir göz gezdirmeye ne dersin?

Leave a Comment