Windows 8 Metro UI'da AppBar Kullanımı

0 dakikada yazıldı

34836 defa okundu

Düzenle

Windows 8 ile beraber Metro UI'da gelen uygulamalarda ekranı
olabildiğince temiz tutabilmek adına uygulama komutlarının ciddi bir
kısmının AppBar adı verilen barlarda saklanması söz konusu. Bu barlar
ekranın üst ve alt kısımlardan kullanıcı istediği zaman ekrana bir
animasyonla gelip bir toolbar gibi komutları listeyebiliyorlar.

AppBar işte böyle birşey :)
AppBar işte böyle birşey :)

Yukarıdaki ekran görüntüsünde örnek bir uygulama olarak Tweet@rama'yı
görüyorsunuz. Bu uygulama basit bir twitter istemcisi. İstemci
içerisindki verilerin yenilenmesi için kullanılacak Refresh ve
Logout düğmesi appbar içerisin yerleştirilmiş. AppBar'lar normald
uygulama başladığında görünmüyorlar. Ekranın alt ve varsa üstündn
AppBar'ların ekrana gelmesi için kullanıcının parmağı ile ekranın
dışından içeriye doğru üsttn veya alttan bir sürükleme işlemi yapması
AppBar'ın gözükmesi için yeterli. Touch olmayan cihazlarda ise ekranda
herhangi bir yerde fareye sağ tuşla tıklamak veya Ctrl+Alt+A kısayolu
AppBar'ın gözükmesini sağlıyor.

[XAML]

    <Grid x:Name="LayoutRoot" Background="#FFFFFF">
        <ApplicationBar x:Name="AppBarUst" Height="88" VerticalAlignment="Top" />
    </Grid>

Uygulamanıza bir AppBar eklemenin basit yolu yukarıdaki gibi XAML
tarafında bu işlemi tamamlamak. VerticalAlignment'ta Top verdiğiniz
AppBar'ınız ekranın üstünden, Bottom verdiğinizde ise altından
gelecektir. Varsayılan tasarım konseptinde AppBar'lar 88 piksel
yüksekliğinde fakat tabi ki bunu değiştirebilirsiniz. Fakat unutmayın
Touch için uygun olması açısından en azından AppBar'ın minimum bu
yükseklikte olmasının faydası var.

Yukarıdaki kodumuz bize boş bir AppBar verdi. Şimdi sıra geldi onun
içine birşeyler koymaya. Aslında bu noktadan sonrası normal bir
XAML/C#/VB ilişkisinden farklı değil.

[XAML]

    <ApplicationBar x:Name="AppBarUst" Height="88" VerticalAlignment="Top" >
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Content="Back" 
                    Style
="{StaticResource BackButtonStyle}"
                   
HorizontalAlignment="Left" VerticalAlignment="Top"/>
        </Grid>
    </ApplicationBar>

ApplicationBar içerisin koymak istediğimiz düğmeleri doğrudan bir Grid
içerisine alıp AppBar'ın içine yerleştirebiliyoruz. Burada sadece ufak
bir uyarıda bulunmam gerek. Metro Style gereği tavsiye edilen
AppBar'daki düğmelerin ya ekranın sağına ya da soluna yapışık dizilmesi.
AppBar'ı ortalayarak düğme koymak doğru değil. Bunun özünd yatan neden
ise insanların ellerinde tablet tuttuklarında ekranın ortasına
ulaşmalarının zor olması :) Oysa ekran kenarlarına dokunmak çok daha
kolay olacaktır özellikle tableti iki elinizle kenarlardan tuttuğunuzu
düşünürsek.

Bu örnekte ben basit Button yerleştirdim. Button'umuzun Stlye'ını da
aşağıda paylaşıyorum.

[XAML]

<Style x:Key="BackButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="FontFamily" Value="Segoe UI"/>
    <Setter Property="FontSize" Value="9"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ColorAnimation Duration="0" 
                                        To
="White" 
                        Storyboard.TargetProperty
="(Ellipse.Fill).(SolidColorBrush.Color)"
                       
Storyboard.TargetName="ButtonEllipse" />
                                    <ColorAnimation Duration="0" To="Black" 
                    Storyboard.TargetProperty
="(TextBlock.Foreground).(SolidColorBrush.Color)"
                    Storyboard.TargetName
="Glyph" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <StackPanel Orientation="Vertical">
                        <Grid Margin="0,14,0,5" >
                            <Ellipse x:Name="ButtonEllipse" Height="40" Width="40" 
                                    Fill
="Transparent" HorizontalAlignment="Center"
                                  
Stroke
="White" 
                                    StrokeThickness
="2" VerticalAlignment="Center"/>
                            <TextBlock x:Name="Glyph" Text="ç" FontFamily="Wingdings" 
                                        FontSize
="25" HorizontalAlignment="Center"
                                       VerticalAlignment="Center" />
                        </Grid>
                        <TextBlock Text="{TemplateBinding Content}" HorizontalAlignment="Center"
                                 
FontFamily
="Segoe UI" FontSize="12"/>
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Sonuç olarak uygulamamızı bu şekli ile çalıştırdığıp AppBar'ımız görünür
hale getirdiğimizde aşağıdaki manzara ile karşılaşıyoruz.

"Back" düğmemiz AppBar'da yerini aldı.
"Back" düğmemiz AppBar'da yerini aldı.

Appbar'daki düğmeler normal Button'lar olduğu için doğal olarak onları
normal button olarak kullanıyoruz :) Yani Click eventleri vs eskisi ile
tamamen aynı.

[C#]

            AppBarUst.IsPersistent = true;

Eğer herhangi bir AppBar'ın sürekli gözükmesini isterseniz IsPersistent
özelliğine True vermeniz yeterli. Böylece uygulamanın ilk açıldığı andan
itibaren AppBar sürekli gözükür olacaktır. Opsyonel komutlar değil de
hep kullanılacak komutlar yerleştirecekseniz AppBar içerisine bu mantık
uygun olabilir.

Son olarak AppBar'ın ekranda çıkıp yok olma senaryosunda da değişikler
yapabilirsiniz. Normalde AppBar bir parmak sürtme :) işlemi ile ekrana
geldikten sonra tekrar ancak aynı parmak sürtme işlemi ile ekrandan
kaldırılabiliyor. Yani şu ekranın üst veya altından ekrana doğru bir
parmak sürtme işlemi vardı ya? onu tekrar yapmanız gerekiyor AppBar'ın
ekrandan kalkması için. Bu senaryoyu isterseniz DismissMod özelliği
ile değiştirebiliyorsunuz.

[C#]

            AppBarUst.DismissMode = ApplicationBarDismissMode.EdgeSwipe;  

AppBar'ın DismissMode özelliğine verebileceğiniz değerlerden biri
EdgeSwipe. Bu zaten normal şartlardaki AppBar'ın çalışma şekli.
Bunun haricinde isterseniz LightDismiss değerini vererek AppBar'ın
ekranda herhangi bir yere dokunulduğunda ekrandan direk gitmesini
sağlayabilirsiniz. Son olarak DismissMode'a verebileceğiniz bir diğer
değer ise TimeDelay. Bu durumda ise AppBar'ın belirli bir süre sonra
kendiliğinden yok olmasını ayarlayabiliyorsunuz. Süre olarak istediğiniz
süreyi de AppBar'ın Delay Property'sine mili saniye olarak
aktarabilirsiniz.

[C#]

            AppBarUst.DismissMode = ApplicationBarDismissMode.TimeDelay;
            AppBarUst.Delay = 6000;

Hepinize kolay gelsin!

Bu makale Visual Studio 11 Express for Windows Developer Preview
ve Windows 8 Developer Preview Build 8102 kullanılarak yazılmıştır.