Developing Windows 8 Metro Style Apps Basics with XAML & C# Part-II

In previous articles, I have described how to develop Windows 8 Metro Style apps with GridViews with XAML & C#. Now, it’s also time to add proper ApplicationBars along with Windows 8 Settings Charm in your application to make more OS customized & slater view.

1. Settings Charm in Windows 8 Metro Style Apps with Win RT Settings Components:

•  Windows 8 Metro Style Apps has the capability to add Win RT settings & interoperability with Win RT (Windows RunTime Component) Shells.
• With the help of this we can add customized Windows 8 RT Shell components with Metro app bars .

• The integration works with the addition of Application Bars which on click produce the interoperability with Core Windows RunTime (Network, Volume, Power etc) components.

2. Snapping in Windows 8 Metro Style Apps:

Snapping in Windows 8 Metro Style apps really enable to get snapped view of your app. Just like Personalized settings panel in Windows 8 Developer Preview environment. Snapping can be also enabled in your Metro Style apps & associate with Win RT components.

•  After implementing Snapping the app looks like this by pressing Windows + (.) key in preview mode.

• Snapping can be implemented by adding the following pieces of code in your Windows 8 Metro Style apps in XAML based on C#  .
• Import the following namespace :

using Windows.UI.ApplicationSettings;

•  Write the event in MainPage Constructor:

ApplicationLayout.GetForCurrentView().LayoutChanged += new TypedEventHandler<ApplicationLayout,

 ApplicationLayoutChangedEventArgs> (MainPage_LayoutChanged);

• Add the method body in MainPage.xaml.cs class body:

void MainPage_LayoutChanged(Windows.UI.ViewManagement.ApplicationLayout sender,

Windows.UI.ViewManagement. ApplicationLayoutChangedEventArgs args)

{

switch (args.Layout)

{

case Windows.UI.ViewManagement.ApplicationLayoutState.Filled:

this.Height = 1066;

this.Width = 768;

break;

case Windows.UI.ViewManagement.ApplicationLayoutState.FullScreen:

this.Height = 768;

this.Width = 1366;

break;

case Windows.UI.ViewManagement.ApplicationLayoutState.Snapped:

this.Height = 768;

this.Width = 320;

break;

default:

break;

}

}