Before we dig into detail of Storyboard, make a note that Storyboard is tightly coupled with animation.

A storyboard is nothing but a resource containing a collection of timeline objects such as animations and each of which targets a specific property of a control. Like background color and visibility property of a button control.

In other word, suppose you want to change one or more properties of controls based on either a time constraint or some user interaction or some event. This can be achieved through an animations and you group these animation into a group, that can be called as storyboard.

Understand the scenario:

To understand this concept and keep it simple, we will be creating a circle/ball/ellipse using xaml and will move it from one corner to another corner and will change the color and size of the ball during this animation. We will be using Blend to create Storyboard and will create Universal Windows using Blank template.

Here are the requirement for storyboard. Think of a ball moving from one end to another in Universal window app.

1. Move a ball from the top left corner of the page to the bottom right  corner.
2. Change the color of the ball from green to red in midway of animation and then back to green at the end.
3. Change the size of the ball in midway (While ball is at the center of the page) and revert back the size to normal at the end of the animation.
4. Ball movement should look natural, like in the real world objects do not start instantly and nor they move in constant speed. They have escalation in speed after starting and de-escalation in speed while stopping. It means ball speed changes during the movement instead of constant speed. After this effect, ball movement will look more natural.

You can follow following steps to create storyboard in your local development environment or you can download the attached zip file which contain the solution, which was used to build this blog.

1) Launch a blend 2015 and click file->New-Project. Expend Visual c# tree and Select Universal. Under universal category select Blank App(Universal windows) and name it as Storyboard. Provide path to location field and click Ok.

2) This will create as blank app with empty grid in Mainpage.xaml page.

3) Next step is to create green circle at the top left corner. Drag and drop ellipse from the control window to the MainPage.xaml top left corner. You can follow red arrow shown in below screen to get ellipse from control section. Make sure after drag drop, you move it to top left corner of the page. You can change the size of the ellipse to look like a proper circle  and change the Fill color to green from the property windows. 

4) Go to Objects and TimeLine section and select Ellipse control and then press plus button as shown in below screen. You will get a popup with “Storyboard1” name. Keep it default and click ok.

5) Now we are in storyboard editing mode.  Everything we do, will get recorded in the storyboard. You are ready for your first animation. Move the yellow time pointer, as show in the following screen, to two second and then grab the green ball and drag it to bottom right corner. If you press the green play button, the animation can be viewed on the design surface.

Let’s see what Blend has created for us. If you notice inside Objects and Timeline window there is a small red icon on ellipse which indicate that it has storyboard effects. Indeed rendertransform with X and Y Translate has been created if you expend Ellipse tree.

Now, if you click green run button in the Storyboard, you can see ball is moving from top left corner to bottom right corner.

So far so good, lets explore render animation.

There are 5 type of render animation, which can be applied to any element. To understand type of render animation, go to Transform section of property of ellipse.

1) Translate: Simply move every pixel of the object.

2) Rotation: Rotate the object in specified angle

3) Scale: Enlarge the object (This is what is being used when you hover your mouse over button)

4) Skew: Used to skew the object.

5) Center Point: Allow to change center point of the object.

6) Flip : As name suggest, it flip the object.

These are called render transformation because they take place only after the layout cycle has been completed. You can test these transformation by applying them while moving the object. For example move the time line to mid and flip the ellipse and then run the storyboard. You can see the effect since ball flips midway.

As per the initial requirement, we have completed first requirement by moving ball from one corner to another. Lets work on second requirement of changing the color of ball.

Move the yellow time pointer to midway (1 sec) and it will move the ball to center location. Go to the property of the ellipse and change the FILL color property to red as shown in below screen.

Now If you run the storyboard, you can see the ball color changes midway.

Third requirement: Change the size of the ball in the midway (While ball is at the center of the page) and revert back the size to normal at the end of the animation.

Again, Move the yellow time pointer to midway (1 sec), it will move the ball to center location. Go to the transform section of ellipse property and set the value of scale property to 1.4 for both X and Y.

Now If you run the storyboard, you can see while moving ball change the FILL color to red in midway and gets enlarge.

Last requirement: Ball movement should look natural, like in the real world object wouldn’t start instantly and move in constant speed. They have escalation in speed after starting and de-escalation in speed while stopping.

This looks difficult but there is already a out of box feature available to achieve this

Just go to Object and Timelines window and select both while RenderTransform object under ellipse including TranslateX and TranslateY and check “easing” section of property and select Cubic (InOut) function value under EasingFunction property.

Now, If you run the storyboard using green button in the storyboard timeline section window, you can see the movement of ball follow cubic function, it means ball speed gradually increase and slow down before ending.  This gives ball a natural look and feel move.

Similarly there are other easing function available, feel free to try out other ease function to achieve different kind of movement under out of box easing options. All these ease function can be a big part of your application personality.

So we are done with storyboard, lets run the solution by pressing F5.

Is it running? No it is not what went wrong. We have follow all the required step but it still not running…….. nothing to worry, there is nothing wrong in the solution, if you have follow above steps correctly then we are very close to final run, but now it looks like we have to do little more work to enable storyboard.   Basically we need to launch the Storyboard along with application launch.

Stop the application. There are multiple way to launch the storyboard and we will use behavior.

Use of behavior to launch the storyboard

Behaviors are basically small bit of reusable code that can enhance how control behaves. They are like code which designer can apply on a control to change its behavior with out the help of code behind.

Inside blend, go to Assets tab and click on Behaviors and if you see “Install Behaviours’ NuGet Package” hyperlink then click on it.

After Installing behaviors Nuget Package, you can see different built in behavior. One of the behavior which control story boards is “ControlStoryboardAction”. Drag and drop this action behavior on Grid control in the Objects and timeline window. This create two object under Grid. These are EventTriggerBehavior and ControlStoryboardAction. The first one is the trigger, it initiates the action that are associated with it, based on the specific key pressed. You can see full list of event by going to property of EventTriggerBehavior in EventName dropdown. By default it is set to PointerPressed, it means whenever you click mouse the trigger will initiate the action which in turn call the storyboard.

Go to the property of ControlStoryboardAction and their you can control the storyboard launch options, like Play, stop Pause etc.  Most important point here it to set the value of Storyboard property to Storyboard1.

Lets launch the application by pressing the F5 and now if we click on the app, it will trigger the action, which in turn start the storyboard. Wow , it is working now. You can enable storyboard from code behind too but enabling through behavior is more clean and simple. isn't it?

I have also attached sample app which was used to build this blog and let me know If you need more help.

Storyboard.zip

My last week task was to copy shared folder content from one server to another server. This looks easy but it comes with following conditions:

• Copy content from Source to target folder( Ignore one folder (DfsPrivate) while copying content from source to target server)
• Copy source folder permission at all level while copying source to target folder and permission should not be restricted to source root folder. It means each source folder permission must match with target folder.
• Generate a report to cross verify source and target permission for all folder in source and target.
• Automate these step, so that it can be executed by end of every month (Should handle delta copy)

I decided to use PowerShell to automate these activities with Robocopy command.

You can download the .ps1 file attached below to skip further reading, however, if you are interested in knowing .ps1 file and wanted to tweak it based on your requirement then you have to read full blog

Following are the methods in the .ps1 file corresponding to the activity mentioned above.

CopyFTPFolder.ps1 file accept three parameter 1) SourceFolderPath 2) TargetFolderPath and 3) Log folder path as shown in above screen.

You can download the .ps1 file and open it in inside Powershell ISE editor.

CopyContent is the method which used robocopy to copy the content from source to target.

Here are details of parameter passed to robocopy. You can modify them based on your requirement.

1.  /mir is used to copy all the content of source to target
2. /Sec /Copy:DAT /DCOPY:T  is used to copy the security, parameter
3. /XD is used to exclude the copying of “DfsPrivate” folder. 
4. /MT[:32] will allow powershell script to use 32 thread while performing copying. You can set this value based on your server configuration.
5.  /Z will be used to perform delta copy.
6. /np | tee $logPath will be used to log Robocopy activity and also show them on screen, so that user is aware of each activity instead of opening log file.

CopyACL function will copy the “Access Control List” of source folder to target folder.

ExportPermission function will iterate through each folder in given path and export ACL permission into csv file

Finally the Main method which control the execution of this powershell script and calls above mentioned methods in a sequential order.

 Please fee free to comment and provide your value suggestion.

Note: This script must be executed from Source server only since regex used in Main method expect Drive path (G:\SomeFolderName) for source folder and network path (\\SomeServerName\SomeFolderName) for target path.

CopyFTPFolder.ps1

Objective of this blog is to demystify the deferred loading concept in XAML.

In order to understand this topic, reader must have basic understanding of XAML and C#.

What is deferred loading?

It is a process to reduce the number of XAML elements at startup. So you can deferred the loading of XAML elements which are not required at startup of your app or page load.

Why do we need this?

• To improve XAML Performance
• To improve user experience.
• To optimize initial loading.

Where do we need this?

Suppose you have a page which contains 50 controls however the end user only uses 10 control initially, so what is the point of loading rest of 40 control initially and delaying initial loading of your app. The point here is that you load the control when you need it and deferred loading is the technique to do this.

At this time you might be thinking, why not simplify the XAML at first place. I would say, that is easy to say but difficult to maintain in a moderate or complex project. XAML complexity grow along with functionality of the application.

Some of you might be thinking of injecting an elements into the visual tree at run time and improve the performance. I would say it is possible but the code you wrote is difficult to maintain, violate separation of concern principle as your code behind include UI element and you lose a lot of the declarative capability of XAML.

In deferred loading, you keep unwanted control out until their realize (required). Basically you are marking a part of your UI tree with a container or a series of elements that don’t show up until their realized (required). Realized is a manual or sometime an automatic process but basically it is not at the starting. In summary the UI element get realized when you need them, but not before.

Note: There is a cost involved in deferred loading also that is while marking a visual tree with placeholder instead of actual control. A very small lightweight placeholder is used instead of loading expensive big control. Also events are hooked up after realized and binding is completed after realized (Including x:Bind). In nut shell you get benefit if you use it correctly.

Following are the way to realize an element:

• FindName()
• EnsureElementRealized()
• GetTemplatedChild() (for ControlTemplate)
• Storyboard & VisualStates (because of FindName)

Enough theory ! Let’s use this concept in visual studio.

In order to demonstrate this concept, I have created a class “MyGrid” which is derived from Grid class.

Situation: There are five instance of “MyGrid” class and User only uses first Grid and rest 4 Grid required latter. So objective is to load only first grid at the starting.

Here is the class definition of “MyGrid”:

class MyGrid : Grid
{
    private static int count = 0;
    public MyGrid()
    {
        this.Height = this.Width = 100;
        this.Margin = new Windows.UI.Xaml.Thickness(10);
        this.Background = new SolidColorBrush(Colors.SteelBlue);
        Debug.WriteLine("Created " + count++);
    }
}

In this class we have created a static counter which gets increment on each instance of a class and Debug.WriteLine() is used to print the value of this counter. Note: You can see the outcome of Debug.WriteLine in output windows after running the solution.

Now lets go to xaml page (in my case it is MainPage.xaml) and add refere “MyGrid” control which was create at first place. First ad the namespace of MyGrid class. In my sample solution it is:

xmlns:Common="using:App1.Common"

Here is the XAML code where “MyGrid” class is referred.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <StackPanel> 
        <Common:MyGrid /> 
        <Common:MyGrid Visibility="Collapsed"/> 
        <Common:MyGrid Visibility="Collapsed"/> 
        <Common:MyGrid Visibility="Collapsed" /> 
        <Common:MyGrid Visibility="Collapsed"/> 
    </StackPanel> 
</Grid>

Press F5 and you will get below screen.

You can see in the output window that all 5 grid gets created at run time, although user only required first grid. Here comes the requirement of x:DeferLoadStrategy=”Lazy” attribute

Here is the modified xaml.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <Common:MyGrid x:Name="grid1" DoubleTapped="grid1_DoubleTapped"  />
            <Common:MyGrid x:Name="grid2" x:DeferLoadStrategy="Lazy"/>
            <Common:MyGrid x:Name="grid3" x:DeferLoadStrategy="Lazy"/>
            <Common:MyGrid x:Name="grid4" x:DeferLoadStrategy="Lazy" />
            <Common:MyGrid x:Name="grid5" x:DeferLoadStrategy="Lazy"/>
        </StackPanel>      
    </Grid>

Press F5 and you will see only one instance of MyGrid class gets created.

Note: In order to use DeferLoadStrategy attribute, you must define the name of the control, otherwise compiler will throw error. As you know the name will be used to realize the UI Element (Control).

So far we have understood that how to use DeferLoadStrategy attibute.

Now suppose you want to load second Grid on some event. Lets take grid1 doubleTapped event. So as soon as user double click on gird1 then load grid2.

To complete this requirement we will be using “FindName” method to load second grid instance at run time.

Here are the modification in xaml file.

<Common:MyGrid x:Name="grid1" DoubleTapped="grid1_DoubleTapped" />

Here are the modification in .cs file.

  private void grid1_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
        {
            FindName("grid2");
        }

Press F5 and then double click on grid1 control, you will see grid2 realized using “FindName” method. The results of output window are justfying that only two grid has been realized so far.

By now you have understood what is deferloading, where to use, how to use and how to realize deferloading control.

Note: Visibility and Opacity can not be used in place of deferloading as both of them create instance of the UI element in the background and you will not get true benefit of optimum loading which deferloading provide.

If you have any question or suggestion, please provide a comment. I am looking forward for your feedback.

Our objective is to get following information of a computer using WMI api in c#.

• Number Of Physical Processors
• Number Of Logical Processors
• Bitness
• Architecture
• Number Of Cores

Lets start !!

Create a console application project in Visual studio and right-click References on the right and select “Add Reference” and then select System.Management as shown in below screen.

Now include System.Management through “using” statement. Now you can use WMI classes reference in your code.

Here is the complete code to generate hardware information.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Management;

namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
             GetCpuDetails();
        }
        private static void GetCpuDetails()
        {
            foreach (var item in new System.Management.ManagementObjectSearcher("Select * from Win32_ComputerSystem").Get())
            {
                Console.WriteLine("Number Of Physical Processors: {0} ", item["NumberOfProcessors"]);
                Console.WriteLine("Number Of Logical Processors: {0} ", item["NumberOfLogicalProcessors"]);
            }

            var numberOfCores = 0;
            foreach (var item in new System.Management.ManagementObjectSearcher("Select * from Win32_Processor").Get())
            {
                numberOfCores += int.Parse(item["NumberOfCores"].ToString());
                Console.WriteLine("Bitness: {0}", item["AddressWidth"]);
                Console.WriteLine("Architecture: {0}", GetArchitectureDetail(int.Parse(item["Architecture"].ToString())));
            }

            Console.WriteLine("Number Of Cores: {0}", numberOfCores);

           
        }     

        private static string GetArchitectureDetail(int architectureNumber)
        {
            switch (architectureNumber)
            {
                case 0: return "x86";
                case 1: return "MIPS";
                case 2: return "Alpha";
                case 3: return "PowerPC";
                case 6: return "Itanium-based systems";
                case 9: return "x64";
                default:
                    return "Unkown";
            }
        }
    }
}

Here is the output of above program.

You can explore Win32_Processor WMI class as well as the Win32_ComputerSystem to get more details.

Hope this helps,

Avtar

Its very difficult to understand xaml without syntax highlighting. If you are also facing this issue then below command might help you to fix this issue.

go to run -> type -> devenv /resetuserdata

then press enter.

It will fix the XAML highlighting issue.

Before you start…

• You need Windows 8 or 8.1 OS
• Microsoft Visual Studio Express 2012 for Windows 8. To download them, see Get the tools.
• You also need a developer license. For instructions, see Get a developer license.

Abstract…

Here we will create a simple window 8 style app using C# and XAML and then we will investigate the XAML and code that Visual Studio 2012 generates when you create the solution. We will run the app and see that it uses sample data and its binding. On a high level, you will get a better understanding how the navigation within the app works and how binding is done. A deep understanding of this template will help you to design your application in a better manner plus you can decide whether this template is applicable to your window 8 app or not.

Let’s start…

• Launch Visual Studio 2012 by typing “Vis” and selecting visual studio.

• It will launch visual studio 2012.

• Click File - > New - > Project

• You should see the New Project dialog. Select Templates - > Visual C# and then select the Windows Store category. Select the Grid App (XAML) template.

• Type MyFirstApp for the name of the app and accept the defaults for everything else. Click OK to create your new project. NOTE: In Windows 8, all software development will require a Developer License. After starting Visual Studio, you might be prompted to license your machine for Development. Click I agree when prompted. If Visual Studio asks for a Microsoft account, type in your Hotmail or live account and click OK. For more information: http://msdn.microsoft.com/en-us/library/windows/apps/hh974578.aspx

• Notice that Visual Studio creates a directory structure for you:

1. The Properties folder contains the some assemblyinfo and project properties.
2. The References folder contains references to other assemblies that this project needs.
3. The Assets folder contains default logos and SplashScreen images and you can use this folder to add custom logo too which can be used by window 8.
4. The Common folder contains classes and XAML styles that simplify application development. You can add your converted classes to this folder and there are already two converter provided by Grid App (XAML) template. It also has BindableBase.cs class which should be used as a base class for all datamodel classes. Now you no need to implement INotifyPropertyChanged Interface for your data model since BindableBase.cs has implemented INotifyPropertyChanged Interface. You can read the ReadMe.txt in that folder for more information. Apart from common source and style this folder also include file by name “SuspensionManager.cs” file. SuspensionManager is a helper class that we use to simplify lifecycle management for the app. It handles several things for you. It saves and restores the navigation state of the Frame that hosts the app pages. Basically it serializes the page state data and writes it to an XML file in your app's local storage.
5. The DataModel folder contains a SampleDataSource.cs file. The code in this file generates sample data.
6. App.xaml contains the xaml and resources for the window 8 Style app. It initializes the singleton Application object.  This is the first line of authored code executed, and as such is the logical equivalent of main() or WinMain(). It also has method which gets called while application move to suspended stage or application is launched normally by end user. You can hook your custom action in these methods if you want to perform certain action while application move to suspended or launch stage.
7. GroupDetailPage.xaml displays a collection/Group and the items within it. Basically it enables a user to view group details on the left and items on the right, and select an item to navigate to the full-page item view and that is ItemDetailPage.xaml.
8. GroupedItemsPage.xaml is the first page that appears when you run this app. It displays collections and the items in them. Basically it is the home page. It enables a user to view the groups and items, and either selects an item to navigate to the full-page item view, or a select a group label to navigate to the group details page.

9. ItemDetailPage.xaml displays an individual item or full-page view for an item.

10. Package.appxmanifest.xaml is a special file that details your application package, its capabilities, and how your app is represented to the user. This file includes several image files, like splashscreen.png for the splash screen image, and SmallLogo.png and Logo.png.

• Let’s run the application and check how it looks like with default setting. Click Build ->Build Solution to build the solution and then press F5 to run the app.

• Now when you run your application you can see “Splash screen” which you mentioned in your Package.appmanifest file.

• After some time, actual app will be loaded and when the app launches, the main page displays collections and the items in them.There are six collections and you can scroll left and right to view them all.

• Select an ItemTitle: 1 by clicking its rectangle. You will see the detail page for Item Title: 1.

• Now if you want to move to Item2 then you can move/hover the mouse on the right and you should see a button with a right arrow.  Click that to scroll to the next item in the list. On the left hand side you can click the left arrow button to scroll backwards. Similarly on touch screen device you can flick horizontally to move to next item.

• Click or touch the back button in the upper left. You will go back to the main page.

• Now let’s go to Group Title 1 detail by clicking on “Group Title: 1” and now you will see the summary page for the Group.

• Now one thing you might ask: where is close button to close this application? ……. A window 8 style app is really a window that has no “chrome” hence we don’t’ have any close button in win 8 app. You can alt-tab back to Visual Studio. Do that now and click on the stop debugging icon. Note: Stop debugging will not close the window 8 app. To close window 8 app you have to press Alt-F4. It will close the app. When user press Alt-F4, behind the seen app goes to suspended state for 10 second and then move to terminate state.

• What is Simulator: Visual Studio 2012 offers several options to test your window 8 app. You can run the app in a simulator or you can run the app on the local machine, as you just did. To use the simulator, select Simulator from the drop-down list associated with the Run button.

• Press F5 to run the app in the Simulator. It will take some while to launch app in Simulator. Once loaded you can notice the toolbar on the right. Click some of the buttons to check the functionality. For example: some of the buttons will rotate app horizontally or vertically to simulate the experience which end user will have on touch screen device.

The Simulator is a Terminal Services session into the local machine. You can bring up Task Manager and select the Users tab. You will see a second session under the same login credentials start up.

Return to Visual Studio and press the stop debugging icon. Notice stop debugging doesn’t close the simulator, Simulator is still open. This can be a benefit to save time as you can keep it open across multiple debugging sessions. Now next question come up: How to close the simulator since there is no close button on simulator window: Since minimizing click does not exit the simulator. You can exit it by explicitly clicking exit in the task bar. Now close the simulator. Move back to Local Machine debugging by selecting Local Machine from the dropdown list associated with the Run button.

Till now you understand the structure of the solution and different file and their importance and how to launch app in visual studio 2012. Let’s move to next part where I will explain each file of this template.

• Let’s start with App.xaml: Open App.xaml file. Check how it includes a file “Common/StandardStyles.xaml”. This file contains styles used throughout the app. Once style file added to ResourceDictionary it is available to all files included in current solution. It’s like a global variable available to all, throughout the app.

• OpenApp.xaml.cs file. App.xaml.cs is the code-behind file for App.xaml and it is a partial calss. Together, the XAML and code-behind make a complete class. App.xaml.cs and is the entry point for your app. It contains a constructor that calls the InitializeComponent method. It's generated by Visual Studio, and its main purpose is to initialize the elements declared in the XAML file. App.xaml.cs also contains methods to handle activation and suspension of the app. It has two methods: OnLaunched and OnSuspending. As name suggesting OnLaunched gets called when app moves to Launch state and OnSuspending gets called when app moves to Suspended state.  
  

• As we understand we have SuspensionManager Class for navigation and in order to use its functionality, we have to register the main app Frame. We register the Frame in Onlaunched method

• LayoutAwarePage.cs file: As you know accelerometer is the feature used by tablets user which allow user to orient their tablets in any orientation they want. Developers have to handle these changes and in developer preview each page subscribed, in the code behind to the orientation event that gets fired but now this functionality has been moved to Layoutmanager.cs file. LayourManger class server as a base class of all code behind to provide dataViewModel functionality to them. Here are some of the methods that handle that:

•  #region Visual state switching

   

          ///<summary>

          /// Invoked as an event handler, typically on the <see cref="FrameworkElement.Loaded"/>

          /// event of a <see cref="Control"/> within the page, to indicate that the sender should

          /// start receiving visual state management changes that correspond to application view

          /// state changes.

          ///</summary>

          ///<param name="sender">Instance of <see cref="Control"/> that supports visual state

          /// management corresponding to view states.</param>

          ///<param name="e">Event data that describes how the request was made.</param>

          ///<remarks>The current view state will immediately be used to set the corresponding

          /// visual state when layout updates are requested.  A corresponding

          ///<see cref="FrameworkElement.Unloaded"/> event handler connected to

          ///<see cref="StopLayoutUpdates"/> is strongly encouraged.  Instances of

          ///<see cref="LayoutAwarePage"/> automatically invoke these handlers in their Loaded and

          /// Unloaded events.</remarks>

          ///<seealso cref="DetermineVisualState"/>

          ///<seealso cref="InvalidateVisualState"/>

          public void StartLayoutUpdates(object sender, RoutedEventArgs e)

          {

              var control = sender as Control;

              if (control == null) return;

              if (this._layoutAwareControls == null)

              {

                  // Start listening to view state changes when there are controls interested in updates

                  Window.Current.SizeChanged += this.WindowSizeChanged;

                  this._layoutAwareControls = new List<Control>();

              }

              this._layoutAwareControls.Add(control);

   

              // Set the initial visual state of the control

              VisualStateManager.GoToState(control, DetermineVisualState(ApplicationView.Value), false);

          }

   

          private void WindowSizeChanged(object sender, WindowSizeChangedEventArgs e)

          {

              this.InvalidateVisualState();

          }

   

          ///<summary>

          /// Invoked as an event handler, typically on the <see cref="FrameworkElement.Unloaded"/>

          /// event of a <see cref="Control"/>, to indicate that the sender should start receiving

          /// visual state management changes that correspond to application view state changes.

          ///</summary>

          ///<param name="sender">Instance of <see cref="Control"/> that supports visual state

          /// management corresponding to view states.</param>

          ///<param name="e">Event data that describes how the request was made.</param>

          ///<remarks>The current view state will immediately be used to set the corresponding

          /// visual state when layout updates are requested.</remarks>

          ///<seealso cref="StartLayoutUpdates"/>

          public void StopLayoutUpdates(object sender, RoutedEventArgs e)

          {

              var control = sender as Control;

              if (control == null || this._layoutAwareControls == null) return;

              this._layoutAwareControls.Remove(control);

              if (this._layoutAwareControls.Count == 0)

              {

                  // Stop listening to view state changes when no controls are interested in updates

                  this._layoutAwareControls = null;

                  Window.Current.SizeChanged -= this.WindowSizeChanged;

              }

          }

And apart from these handlers there is a DefaultViewModel property in the LayoutAwarePage class. This property will be used to bind data to xaml control. You can check code behind of GroupedItemPage.xaml.cs.

•  ///<summary>

          /// An implementation of <see cref="IObservableMap&lt;String, Object&gt;"/> designed to be

          /// used as a trivial view model.

          ///</summary>

          protected IObservableMap<String, Object> DefaultViewModel

          {

              get

              {

                  return this.GetValue(DefaultViewModelProperty) as IObservableMap<String, Object>;

              }

   

              set

              {

                  this.SetValue(DefaultViewModelProperty, value);

              }

          }

• GroupedItemsPage.xaml.cs: Open this page and you can see the collection of sample data group is added to the DefaultViewModel property bag.

•  protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)

          {

              // TODO: Create an appropriate data model for your problem domain to replace the sample data

              var sampleDataGroups = SampleDataSource.GetGroups((String)navigationParameter);

              this.DefaultViewModel["Groups"] = sampleDataGroups;        }                     

• Now go to GroupedItemsPage.xaml, you can see at the top inside Page.Resources tag, that it uses this “Groups” as the Source of the CollectionViewSource. The name of this source is groupedItemsViewSource

   <CollectionViewSource
                x:Name="groupedItemsViewSource"
                Source="{Binding Groups}"
                IsSourceGrouped="true"
                ItemsPath="TopItems"
                d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>

This page uses a GridView to display the collections and items. You can see the groupedItemsViewSource refer here which is bind to the ItemsSource property of GridView.

Inside GroupedItemsPage.xaml.cs file, when the user clicks an individual item, the code uses the Navigate method on the Frame again to go to the ItemDetailPage 

•   void ItemView_ItemClick(object sender, ItemClickEventArgs e)

          {

              // Navigate to the appropriate destination page, configuring the new page

              // by passing required information as a navigation parameter

              var itemId = ((SampleDataItem)e.ClickedItem).UniqueId;

              this.Frame.Navigate(typeof(ItemDetailPage), itemId);

          }

In that same GroupedItemsPage.xaml.cs file, when the user clicks a Group header, the code uses the Navigate method on the Frame to go to the GroupDetailPage                     

• void Header_Click(object sender, RoutedEventArgs e)

          {

              // Determine what group the Button instance represents

              var group = (sender as FrameworkElement).DataContext;

   

              // Navigate to the appropriate destination page, configuring the new page

              // by passing required information as a navigation parameter

              this.Frame.Navigate(typeof(GroupDetailPage), ((SampleDataGroup)group).UniqueId);

          }

• Open the ItemDetailPage.xaml file. This page uses a FlipView to enable scrolling back and forth through the items in a collection.

• Open the ItemDetailPage.xaml.cs file; it is inherited from LayoutAwarePage, which implements functionality such as GoHome and GoBack to navigate the stack of pages. Inside LoadState method it binds last clicked item and its group and group items.     

•  protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)

          {

              // Allow saved page state to override the initial item to display

              if (pageState != null && pageState.ContainsKey("SelectedItem"))

              {

                  navigationParameter = pageState["SelectedItem"];

              }

   

              // TODO: Create an appropriate data model for your problem domain to replace the sample data

              var item = SampleDataSource.GetItem((String)navigationParameter);

              this.DefaultViewModel["Group"] = item.Group;

              this.DefaultViewModel["Items"] = item.Group.Items;

              this.flipView.SelectedItem = item;

          }

                

• Open the GroupDetailPage.xaml file. This page displays the category’s/Groups’s image and text on the left and then uses a GridView to display the items in the category.

• Open the GroupDetailPage.xaml.cs file. It also inherits from LayoutAwarePage and gets the GoHome and GoBack methods from this parent. At the end open the SampleDataSource.cs file and move to the definition of the SampleDataSource class. This class creates collections and items using dummy data.                

• public sealed class SampleDataSource

      {

          private static SampleDataSource _sampleDataSource = new SampleDataSource();

   

          private ObservableCollection<SampleDataGroup> _allGroups = new ObservableCollection<SampleDataGroup>();

          public ObservableCollection<SampleDataGroup> AllGroups

          {

              get { return this._allGroups; }

          }

Summary…..

In this tutorial you learnt Grid View (XAML) template and understand the structure of the project and files included in the project and navigation between pages and how data is bound to the Grid Control. Hope this can help you get excite about window 8 development. Please feel free to comment and share your thoughts.

In my next article I will explain how to modify SampleDataSource to use real data.