Windows 8 Metro UI'da AppBar Kullanımı

0 dakikada yazıldı

34817 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.