Windows 8 ile birlikte gelen en büyük yeniliklerden biri Windows Phone 7‘den alışık olduğumuz Metro UI Metro UI konseptinde uygulamalar geliştirebilmemiz için Visual Studio bize çeşitli Metro UI şablonları sunuyor.

Visual Studio 11 ile gelen şablonlar

İlerleyen yazılarda bu şablonları tektek inceliyor olacağız bunları şimdilik böyle bırakıp; basit, düz bir Metro Application’ı alalım elimize. Yeni bir proje oluşturduğumuzda ilk fark ettiğimiz şey XAML bizim bildiğimiz XAML. Hani Silverlight ve WPF ile projeler yaparken gördüğümüz, bildiğimiz XAML. Bu sevindirici bir şey çünkü Metro UI ile birşeyler yaparken çok fazla yorulmamıza gerek kalmıyor. Şimdi gelelim Layout’a Windows 7‘de uygulama geliştirirken bizim Layout’umuzun uyması gereken durum sayısı aslında kısıtlıydı. Uygulama penceresinin boyutuna göre güzel bir Grid tasarladığımız zaman uygulama her pencere boyutunda güzelce çalışabilir duruma geliyordu. Ancak Windows 8‘de bu durum biraz farklı artık uygulamamızın güzel bir kullanıcı deneyimi yaratabilmesi için Layout‘un uyması gereken 3 tip durum var. Bunlar:

Full Screen, Snapped ve Filled olmak üzere 3 durum söz konusu.

Bunlardan Full Screen adından da anlaşılacağı gibi uygulamanın tam ekran çalışma durumu. Snapped kullanıcını ekranın yanlarında herhangi bir başka uygulamayı aynı anda görmesi durumu. Filled ise ekranın yaklaşık 3′te 4′ünü kullanan programın bulunduğu durum (State). Bizler artık uygulama geliştiriciler olarak bu 3 durumu ayrı ayrı göz önünde bulundurmalıyız. Ayrıca bunların yanında Windows 8 hali hazırda bulunan arayüzü sayesinde Tablet‘ler içinde kullanılacak dolayısı ile tablet PC’ler ve akıllı telefonlar ile hayatımıza giren Orientation kavramınıda uygulamalarımızda kullanmamız büyük önem taşıyor. Burda da 4 durum söz konusu LandScape, LandScapeFlipped, Portrait ve PortraitFlipped hemen gözünüz korkmasın aslında bu durumlara ayak uydurmak çok kolay. Şimdi bunlarla ilgili küçük bir örnek yapalım:

Metro UI style’ların arasından Application seçeneğine tıklayıp açıyoruz ve karşımıza LayoutRoot olarak adlandırılmış bir Grid çıkıyor.

[sourcecode language="XML"]
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
<StackPanel x:Name="MainPanel">
<Border x:Name="MainBorder"
Background="Pink"
Width="600" Height="600"
HorizontalAlignment="Center"
VerticalAlignment="Center">

<TextBlock x:Name="MainText"
Text="Hello World"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe UI"
FontSize="72" />
</Border>
</StackPanel>
</Grid>
[/sourcecode]

Uygulama ekranımıza Hello World yazdıkdıktan sonra yukarıda saydığımız durumlar (aslında bunlar State’ler oluyor) herbiri için birer State belirleyebiliriz.

[sourcecode language="XML"]
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">

<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="OrientationStates">
<VisualState x:Name="FullScreen" />
<VisualState x:Name="Filled" />
<VisualState x:Name="Snapped" />
<VisualState x:Name="Portrait" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<StackPanel x:Name="MainPanel">
<Border x:Name="MainBorder"
Background="Pink"
Width="600" Height="600"
HorizontalAlignment="Center"
VerticalAlignment="Center">

<TextBlock x:Name="MainText"
Text="Hello World"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe UI"
FontSize="72" />
</Border>
</StackPanel>
</Grid>
[/sourcecode]

Peki cihazın ve/veya uygulamanın ne durumda olduğunu nasıl anlayacağız? İşte bu noktada arka tarafa geçip ufak bir kod yazmamız gerekiyor.

[sourcecode language="Csharp"]
namespace Application1
{
partial class MainPage
{
public MainPage()
{
InitializeComponent();

ApplicationLayout.GetForCurrentView().LayoutChanged
+= new TypedEventHandler<ApplicationLayout,
ApplicationLayoutChangedEventArgs>(MainPage_LayoutChanged);
}

void MainPage_LayoutChanged(ApplicationLayout sender,
ApplicationLayoutChangedEventArgs args)
{

}
}
}
[/sourcecode]

Yarattığımız bu EventListener ile Layout’un durumunda bir değişiklik olduğunda gereken State’te geçmesini söyleyeceğiz. Aslında bunun içinde cihazın layout’un geçtiği State’in adını bilmemiz gerekiyor.

[sourcecode language="Csharp"]
namespace Application1
{
partial class MainPage
{
public MainPage()
{
InitializeComponent();

ApplicationLayout.GetForCurrentView().LayoutChanged
+= new TypedEventHandler<ApplicationLayout,
ApplicationLayoutChangedEventArgs>(MainPage_LayoutChanged);
}

void MainPage_LayoutChanged(ApplicationLayout sender,
ApplicationLayoutChangedEventArgs args)
{
VisualStateManager.GoToState(this, hangiState(), false);
}
public static string hangiState()
{
var orientation = DisplayProperties.CurrentOrientation;

// portrait

if (orientation == DisplayOrientations.Portrait || orientation == DisplayOrientations.PortraitFlipped)
return "Portrait";

// else hangi state oldugunu soyle bana
return ApplicationLayout.Value.ToString();
}
}
}
[/sourcecode]

Artık State’in adınıda bildiğimize göre tek yapmamız gereken State’i istediğimiz gibi tasarlamak olacaktır.
Herkese kolay gelsin.