Channel 9 - Entries tagged with Microsoft Design StyleMicrosoftMicrosoftnohttps://sec.ch9.ms/content/feedimage.pngChannel 9 - Entries tagged with Microsoft Design Stylehttps://channel9.msdn.com/Tags/microsoft+design+style
Channel 9 is a community. We bring forward the people behind our products and connect them with those who use them. We think there is a great future in software and we're excited about it. We want the community to participate in the ongoing conversation. This is the heart of Channel 9. We talk about our work but listen to the customer.https://channel9.msdn.com/Tags/microsoft+design+style
enThu, 22 Feb 2018 05:19:52 GMTThu, 22 Feb 2018 05:19:52 GMTRev945225Features and Contracts in Windows Store Apps

While the goal of these quickstarts is to discuss the issues and solutions involved in porting our Windows Phone 7 app to a Windows Store app, there are some features and requirements in Windows 8 we wanted to address: snapping and appcontracts.

Windows 8 Contracts provide OS level functionality and can significantly extend the power of your app when implemented properly. In this video, we will look at two contracts we implemented, the Search Contract and the Share Contract. But first, let us look at how snapping is handled in a Windows Store app.

Handling Window Snapping

As we discussed in the last Quickstart, snapping can have a significant impact on how you choose to present your app interface. In a typical template project page, we will find a GridView and ListView element both positioned in Grid.Row="1" under the navigation and page header row of our root grid.

It is the VisualStateManager that controls the visibility of these elements. Since PageHub.xaml inherits from Common\LayoutAwarePage.cs, we already have the orientation and positioning handlers taken care of. When the app is "snapped" to the screen and has its visual footprint significantly reduced, the VisualStateManager will toggle the visibility of the main GridView to Collapsed while making the thinner ListView based interface visible as shown below:

One other thing to note in this discussion is that while the ListView and GridView are both showing the same data, they would most likely need to reference different data templates and styles.

In the Khan Academy app, the ListView control that handles the snapped layout shares the same CollectionViewSource as the larger GridView control, but points to its own ItemTemplateSelector so that it will pull in the snapped styles accordingly.

The Search Contract

The Search Contract allows your app to register with the operating system as being searchable from the Windows 8 Search charm.

To set this up, we need to add some code to the LaunchApp() method in App.xaml.cs as shown below:

First, we get the SearchPane object for the current app. Once we have a handle to the instance of the pane, we can set some properties to make the search experience a bit more tailored to our app. Namely, we set the PlaceholderText property to the string “Search Khan Academy”. Finally, we hook the QuerySubmitted event off the SearchPane object, which will be called once the user presses the Enter key or clicks/taps the magnifying glass icon to the right of the search box. In the event handler, the SearchResultsPage is activated and displayed with the user’s query text passed to the page.

The Search pane can also handle real-time suggestions based on the query the user is typing. To do this, we just need to handle the SuggestionsRequested and ResultSuggestionChosen events as shown:

In the SuggestionRequested event handler, we use a LINQ query to find the first 3 results that match what the user is typing and add them to the suggestions list using the AppendQuerySuggestion method off the SearchSuggestionCollection object. In addition, we also use LINQ to find the closest match to what the user is typing to display and display that after a line separator.

The line gets added with the AppendSearchSeparator method, and the single result gets added with the AppendResultSuggestion method. The specific result suggestion can include an icon, and we get the stream for that icon using the CreateFromUri method off the RandomAccessStreamReference object, passing in the path to the image we want to use as the icon. This returns the IRandomAccessStreamReference required by the AppendResultSuggestion method.

In the ResultSuggestionChosen method, we determine which suggestion the user selected and then navigate to the VideoPage to show the video to the user.

The Share and Devices Contracts

The Share Contract allows the user to share a piece of data from the current app to another app which knows how to receive the data. For our app, we wanted to allow the user to share a link to the video they are watching to other apps. This works great with the Windows 8 mail app.

To accomplish this, we override the DataRequested method on the VideoPage class as shown:

In this method, we get the VideoItem that is currently being played, and use its properties to fill out the Data object property of the Request object. The SetUri method is used to pass the actual Uri to the Khan Academy website.

Finally, we wanted to enable PlayTo functionality so the user can quickly and easily send the video output to a TV or other media device on the network. The user can choose to do this while watching the video by selecting the Devices charm. Any PlayTo-enabled devices on the network will show up in this device list.

In code, we handle this scenario in the OnNavigatedTo and OnNavigatedFrom overridden methods.

In the OnNavigatedTo method, we get an instance of the PlayToManager and hook the SourceRequested event. We also grab an instance of the current Dispatcher. In the SourceRequested event handler, we request a deferral. This tells the PlayTo manager to wait until we give it the PlayTo source so the request doesn’t time out. We then, using the dispatcher, set the source of the PlayTo request to the video player’s PlayToSource property, and then complete the deferral. At this point, the PlayTo request is sent and the media player talks to the OS to make the magic happen. Note that in the OnNavigatedFrom method we unhook the SourceRequested event handler since it is no longer needed once the user navigates away from this page.

So at this point, we have come up with a migration strategy for porting our Windows Phone 8 to Windows 8, handled changes to how we handle asynchronous data requests and have a well styled, data bound interface that leverages the newest features of Windows 8. From here, the next step would be submitting to the store for distribution.

Hopefully, this set of quickstarts has covered some key areas of interest in getting your app up and running on Windows 8.

I would like to extend a tremendous amount of gratitude for Joel Martinez and all his tireless work as well as opening up the Viewer for Khan Academy app to serve as a Coding4Fun Community project here on Channel 9.

The source code for the Windows 8 Khan Academy app is available for download:

If you have any questions, comments, or feedback feel free to join in the discussion.

]]>https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Features-and-Contracts-in-Windows-Store-Apps While the goal of these quickstarts is to discuss the issues and solutions involved in porting our Windows Phone 7 app to a Windows Store app, there are some features and requirements in Windows 8 we wanted to address: snapping and appcontracts. Windows 8 Contracts provide OS level functionality and can significantly extend the power of your app when implemented properly. In this video, we will look at two contracts we implemented, the Search Contract and the Share Contract. But first, let us look at how snapping is handled in a Windows Store app. Handling Window SnappingAs we discussed in the last Quickstart, snapping can have a significant impact on how you choose to present your app interface. In a typical template project page, we will find a GridView and ListView element both positioned in Grid.Row=&quot;1&quot; under the navigation and page header row of our root grid. It is the VisualStateManager that controls the visibility of these elements. Since PageHub.xaml inherits from Common\LayoutAwarePage.cs, we already have the orientation and positioning handlers taken care of. When the app is &quot;snapped&quot; to the screen and has its visual footprint significantly reduced, the VisualStateManager will toggle the visibility of the main GridView to Collapsed while making the thinner ListView based interface visible as shown below: One other thing to note in this discussion is that while the ListView and GridView are both showing the same data, they would most likely need to reference different data templates and styles. In the Khan Academy app, the ListView control that handles the snapped layout shares the same CollectionViewSource as the larger GridView control, but points to its own ItemTemplateSelector so that it will pull in the snapped styles accordingly. The Search ContractThe Search Contract allows your app to register with the operating system as being searchable from the Windows 8 Search charm. To set this up, we need to add some code to881https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Features-and-Contracts-in-Windows-Store-Apps
Wed, 26 Sep 2012 19:53:32 GMThttps://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Features-and-Contracts-in-Windows-Store-AppsBrian Peek, Rick BarrazaBrian Peek, Rick Barraza0https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Features-and-Contracts-in-Windows-Store-Apps/RSSWindows PhoneWindows Store AppMicrosoft Design StyleWindowsContentCustom Styling in Windows Store Apps

Now that we have the data properly formatted and bound to the controls, this video will focus on custom styling and interface elements in our app.

Setting up Custom Styles

As we've discussed in the previous Quickstarts, by basing our migration effort on one of the Windows 8 Templates in Visual Studio 2012, our project came with a Common and Data folder filled with classes and resources ready to use. The Common\StandardStyles.xaml file provides the default styling for all the elements in the template and is a great place to start when customizing your own interface.

However, to keep things organized, we created a new file and also placed it in the Common folder called CustomStyles.xaml. By using inheritance, we are able to keep most of our custom edits in CustomStyles.xaml and leave StandardStyles.xaml relatively unchanged.

It may be designer preference, but one exception to this separation between CustomStyles.xaml and StandardStyles.xaml was the inclusion of custom of global colors, which we put at the very top of the StandardStyles.xaml file since we would want them to affect all subsequent styles, including the defaults.

In this way, custom styles we define in CustomStyles.xaml can be BasedOn template styles already defined in StandardStyles.xaml with only minimal change, if we only intend to customize a few properties of an existing template:

Notice that the DataTemplate shown above is assuming bindable properties of the elements it will be formatting, which we already reviewed in the Data Binding Quickstart.

Since CustomStyles.xaml is already merging in StandardStyles.xaml as a Resource Dictionary, we only need to reference CustomStyles.xaml directly in App.xaml to get access to the entire collection of custom and standard styles.

Working with Template Selectors

As discussed in our Data Binding Quickstart, we wanted to implement a Hub type experience for the Khan Academy landing page. This meant that the interface would be displaying both collections of Playlists and individual playlist collections of Videos. These two types of objects would look different from each other, since Videos have a thumbnail graphic and Playlists only display their title and description.

The challenge was that our single Grid View would need to display both types of objects, but using different styling for each.So we needed a solution to switch templates based on object type.

If we look at the way the default Grid View Template Project works, we see that its ItemTemplate property references a specific StaticResource. In this case, the Standard250x250ItemTemplate description found in Common\StandardStyles.xaml:

That is the way it often works. You use a specific, StaticResource reference on the ItemTemplate property of the container you have bound to your data.

But in the Khan Academy project, if you look at the GridView setup on Hub.xaml, you'll see that we are not using a StaticResource on the ItemTemplate property, but setting a value for the GridView’s ItemTemplateSelector property instead:

Based on the return type of HubItemSelector, this ItemTemplateSelector will redirect the template to whatever template you define in the look up. So what does the class HubItemSelector actually look like?

This technique can definitely come in handy if you are experimenting with Hub style interfaces and find yourself in a similar situation with your own app.

Semantic Zoom

Like Windows Phone, modern Window 8 apps are Touch ready. As such, Semantic Zoom is a powerful new control we can leverage in our apps. Semantic Zoom allows the user to switch views on a large body of data with a simple pinch gesture.

This gives us a great high level, low level metaphor we can leverage in our apps, and is very effective when we want to provide the experience of "zooming out" on a data set and simplifying or aggregating the smaller pieces of content. Here is how it works.

If we look at the default landing page of a Grid App template project, we see the following structure:

After the Page is declared and has its Resources defined, the LayoutRootStyle grid is created with two main rows: a row for the header that meets the Windows 8 app styling guidelines, and a row for our content.

The template defines two elements that want to occupy Grid.Row="1". A GridView that is visible when the app is at normal size, and a ListView that is visible when the app is snapped. We will look at snapping in the next quickstart, but for now just realize that this collapsing of visibility is taken care of by the VisualStateManager also on the page.

If we look at HubPage.xaml in the Khan Academy app, though, we can see where SemanticZoom fits into the entire page structure.

With this change, we make SemanticZoom is the primary element in Grid.Row="1" as long as the app isn't snapped. The GridView element that used to be there can now be nested under the SemanticZoom.ZoomedInView property and will appear as expected. However, you now have a SemanticZoom.ZoomedOutView element you can fill with whatever you want.

The control is setup to support gestures automatically. By pinching the screen closed, the user will zoom out and the control will transition between the two containers automatically. While in a zoomed out state, if the user pinches outward, they will return to the default Zoomed In view.

But what about all that business with snapping we quickly brushed over? Snapping and other OS features will be the subject of our next quickstart.

If you have any questions, comments, or feedback feel free to join in the discussion.

]]>https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Custom-Styling-in-Windows-Store-Apps Now that we have the data properly formatted and bound to the controls, this video will focus on custom styling and interface elements in our app. Setting up Custom StylesAs we've discussed in the previous Quickstarts, by basing our migration effort on one of the Windows 8 Templates in Visual Studio 2012, our project came with a Common and Data folder filled with classes and resources ready to use. The Common\StandardStyles.xaml file provides the default styling for all the elements in the template and is a great place to start when customizing your own interface. However, to keep things organized, we created a new file and also placed it in the Common folder called CustomStyles.xaml. By using inheritance, we are able to keep most of our custom edits in CustomStyles.xaml and leave StandardStyles.xaml relatively unchanged. It may be designer preference, but one exception to this separation between CustomStyles.xaml and StandardStyles.xaml was the inclusion of custom of global colors, which we put at the very top of the StandardStyles.xaml file since we would want them to affect all subsequent styles, including the defaults. StandardStyles.xaml
&lt;ResourceDictionary
xmlns=&quot;https://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
xmlns:x=&quot;https://schemas.microsoft.com/winfx/2006/xaml&quot;
xmlns:vsm=&quot;using:Windows.UI.Xaml&quot;
&gt;
&lt;!-- Non-brush values that vary across themes –&gt;
&lt;ResourceDictionary.ThemeDictionaries […] &gt;
&lt;!-- System Wide Overrides --&gt;
&lt;SolidColorBrush x:Key=&quot;ApplicationForegroundThemeBrush&quot;
Color=&quot;#FF222E3D&quot; /&gt;
&lt;SolidColorBrush x:Key=&quot;ApplicationPageBackgroundThemeBrush&quot;
Color=&quot;#FFD4DEB7&quot; /&gt;
&lt;SolidColorBrush x:Key=&quot;ApplicationPointerOverForegroundThemeBrush&quot;
Color=&quot;#FFFFFFFF&quot; /&gt;
&lt;SolidColorBrush x:Key=&quot;ApplicationPressedForegroundThemeBrush&quot;
Color=&quot;#FFFFFFF1171https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Custom-Styling-in-Windows-Store-Apps
Wed, 26 Sep 2012 19:53:26 GMThttps://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Custom-Styling-in-Windows-Store-AppsRick BarrazaRick Barraza1https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Custom-Styling-in-Windows-Store-Apps/RSSWindows PhoneWindows Store AppMicrosoft Design StyleWindowsContentBinding the Interface in Windows Store apps

In the previous Quickstarts, we have introduced the app and looked at handling data requests and formatting. In this next video, we will look at binding that data to the interface.

Binding and Windows 8 Templates

Data binding plays a central role in the Windows Store project templates available in Visual Studio 2012. For our project, we used the Grid App template available in Visual Studio 2012 as our base for the Khan Academy app. So let's see how this template is setup.

As we discussed in the first Quickstart of this series, creating a new project based on the Grid template will populate your project with sample pages and assets, a common folder of useful classes, and a data folder with a view model all ready to go. The default XAML pages such as GroupedItemsPage.xaml will also be wired up as they will inherit from LayoutAwarePage.cs in the Common folder to common system events of initialization, navigation and orientation.

But also notice the inclusion of a new class called BindableBase.cs in the Common folder. The default Data Model comes with every Template project inherits its collection elements from this class and by studying how the sample pages are wired up to the default Data Model is a great way to get up to speed quickly on Data Binding basics in Windows 8.

Let’s take a closer look at the Data Model for a Grid App Template project, DataModel\SampleDataSource.cs. This class has a collection of Groups in an ObservableCollection called AllGroups. Each group in AllGroups contains an ObservableCollection of DataItems. Both the SampleDataGroup and SampleDataItem inherit from the SampleDataCommon class.

The SampleDataCommon class, in turn, inherits from Common\BindableBase.cs, which we introduced above, and which allows all the objects to be bound by the UI controls.

SampleDataSource.cs

public abstract class SampleDataCommon : AppName.Common.BindableBase

In this Grid App Template, when the app first starts and App.xaml loads the landing page called GroupedItemsPage.xaml, the following code is run:

In this template sample, we create our Data Model by calling the SampleDataSource’s GetGroups() function, which returns an IEnumerable of SampleDataGroup values. This bindable collection of Groups is then assigned to the DefaultViewModel's Group element.

But what is a DefaultViewModel[“Groups”] element anyway? Remember, these UI Pages we are exploring in the Template project all inherit from Common\LayoutAwarePage.cs:

And here we see the true power of leveraging the Windows Store Project Templates as a basis for projects. LayoutAwarePage.cs is a robust implementation of a Windows 8 app page that provides several important conveniences: app view state to visual state mapping, page navigation event handlers and mouse and keyboard shortcuts, state management for navigation and process lifetime management, and most relevant to us right now, a default view model too:

Here, a CollectionViewSource is being bound to the Groups element of the DefaultViewModel, which we just set to the response of SampleDataSource.GetGroups(). A CollectionViewSource allows you to sort, filter and group the underlying data without directly manipulating the data.

Finally, the control on the page that will display the information has its ItemsSource property bound to the groupedItemsViewSource, which is a CollectionViewSource.

Since there are no custom styles yet, the Item Template pulls from some standard templates also found in the Common folder to make everything work. If the CollectionViewSource has properly grouped data and the IsSourceGrouped property is set to true, the GridView takes care of the rest.

The Khan Academy View Model

In the Khan Academy app, we follow a very similar pattern with a couple of changes.

First, as we’ve seen in the previous two Quickstarts, we are instantiating our KhanDataSource View Model from App.xaml directly in it’s LaunchApp() handler and then passing it along when we navigate to our landing page of choice.

Another difference between the KhanDataSource and the default SampleDataSource that comes with Template projects is an additional tier of data. Instead of having a simple collection of groups that contain items, the data returned from Khan Academy is organized by the app into top level Topics ( such as Math, Science, Hummanities, etc.), which each contain a collection of playlists ( Algebra, Arithmetic, Calculus, etc..). Each of these playlists is made up of a series of VideoItems that play the actual lessons.

To add an additional layer of complexity, to achieve a Hub experience in our welcoming page, we wanted to display multiple types of content to give the user a richer selection of items. However, having multiple types of content on the same container creates both a visual and navigational challenge.

For example, most of the groups displayed in HubPage.xaml are made up of playlist objects that have a title and description but no associated graphic.

Selecting a playlist object should take you to the ItemDetail.xaml page.

But we also wanted to feature at a top level videos from two specific playlists, New & Noteworthy and Talks & Interviews. These videoItems do have a associated thumbnail of the video they represent and clicking on these elements should take you to the VideoPage.xaml instead of the ItemDetail.xaml page.

We will discuss how we visually differentiate the styling of these two different types of objects in the next Quickstart. But for now, let us look at how we handle the Items being selected:

Since we are sharing a data binding between two different types of content, we query the type of the item and pass the clicked item to the appropriate page.

If the user selected a video, we would go to the video player page which uses the video player from the Microsoft.Metro.PlayerFramework referenced in the Project. Selecting a playlist, though, takes you to the ItemDetailPage.xaml to show you the list of videos in that list. The data binding on the ItemDetailPage.xaml page works the same way once it receives the serialized ClickedItem as a navigationParameter in its LoadState() method.

The other pages in the Khan Academy app follow the same pattern. An item is selected, the app's Frame then Navigates to the appropriate Page, passing the selected item as a parameter, and finally the loaded Page parses the passed in object, and populates its local View Model with the appropriate data.

Now that our components are displaying the appropriate data and navigating to the correct Pages, it's time to add visual identity. In the next Quickstart, we will look at custom styling.

If you have any questions, comments, or feedback feel free to join in the discussion.

]]>https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Binding-the-Interface-in-Windows-Store-apps In the previous Quickstarts, we have introduced the app and looked at handling data requests and formatting. In this next video, we will look at binding that data to the interface. Binding and Windows 8 TemplatesData binding plays a central role in the Windows Store project templates available in Visual Studio 2012. For our project, we used the Grid App template available in Visual Studio 2012 as our base for the Khan Academy app. So let's see how this template is setup. As we discussed in the first Quickstart of this series, creating a new project based on the Grid template will populate your project with sample pages and assets, a common folder of useful classes, and a data folder with a view model all ready to go. The default XAML pages such as GroupedItemsPage.xaml will also be wired up as they will inherit from LayoutAwarePage.cs in the Common folder to common system events of initialization, navigation and orientation. But also notice the inclusion of a new class called BindableBase.cs in the Common folder. The default Data Model comes with every Template project inherits its collection elements from this class and by studying how the sample pages are wired up to the default Data Model is a great way to get up to speed quickly on Data Binding basics in Windows 8. Let’s take a closer look at the Data Model for a Grid App Template project, DataModel\SampleDataSource.cs. This class has a collection of Groups in an ObservableCollection called AllGroups. Each group in AllGroups contains an ObservableCollection of DataItems. Both the SampleDataGroup and SampleDataItem inherit from the SampleDataCommon class. The SampleDataCommon class, in turn, inherits from Common\BindableBase.cs, which we introduced above, and which allows all the objects to be bound by the UI controls. SampleDataSource.cs
public abstract class SampleDataCommon : AppName.Common.BindableBase
In this Grid App Template, when the app first starts and App.xaml loads the landing page called Group1131https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Binding-the-Interface-in-Windows-Store-apps
Wed, 26 Sep 2012 19:52:54 GMThttps://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Binding-the-Interface-in-Windows-Store-appsRick BarrazaRick Barraza0https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Binding-the-Interface-in-Windows-Store-apps/RSSWindows PhoneWindows Store AppMicrosoft Design StyleHandling Asynchronous Data in Windows Store Apps

This video covers the basics of working with data in the Windows 8 Khan Academy app. We go over the new asynchronous pattern in WinRT for handling requests to and from the server, as well as putting together the Data Model for our app.

If you have never worked with async patterns before, the following async overview may be helpful before proceeding with our Khan Academy samples.

An Overview of Async / Await

As referenced above, asynchronous APIs are found all over the Windows 8 runtime and they are a key concept in Windows 8 app development. We have already seen the async / await pattern in action in the first Quickstart of this series when discussing the LaunchApp() method on startup:

Notice the use of the async keyword in the method’s declaration. Since this method is going to use an await operator for an asynchronous task, we need to use the async keyword in the declaration. In our case, we use await after we create our Data Model named DataSource and request it to populate itself by calling its LoadAllData() function. LoadAllData() handles both local and remote requests for Khan Academy video playlist data.

The Windows 8 Khan Academy video app ships with a cached snapshot of the entire playlist library stored locally. This keeps the UI fast and fluid since the app doesn’t need to request and parse the entire collection of videos from the internet before launching for the first time. Each time the app runs, though, the KhanDataSource.LoadAllData() function in our Data Model also makes a call to the Khan Academy server and updates the local cache with any updates behinds the scenes, before reloading the local data to update any bindings.

LoadRemoteData() is also implements the async/await pattern and is shown below:

LoadRemoteData() first creates and qualifies an HttpClient object but then needs to await the asynchronous HttpResponseMessage from the server before continuing. So far, this is a straightforward async/await pattern.

But some tasks may require a nesting of await commands to complete the desired transaction. We can see this in the code once we want to write the response locally. In order to write to the local cache, which is itself an async operation, we first need to read the response as a string, which also requires an await command:

Once the local cache has been updated with the most recent data retrieved from the Khan Academy web servers, we refresh the local Data Source from this updated cache.

In the Khan Academy Windows 8 app, the majority of code that handles the asynchronous data is contained in the KhanDataSource.cs file and follows the similar structure as shown above.

Handling the JSON Response

As we saw in the previous section, the Khan Academy app keeps the local cache of app data up to date by overwriting the local cache with updated JSON data from the Khan Academy servers.

With Windows 8, there are multiple ways of processing JSON data, based on your needs and situation. For our scenario, we knew the shape of the data being returned by Khan Academy, so we first created a custom class that would represent each logical node of the response:

As you can see, ReadLocalCacheAsync creates a new DataContractJsonSerializer of the type specified. The string result of reading the local cache file is wrapped in a MemoryStream and passed to the JSON serializer. Once serialized, we have an object representation of the cached text data. The cached response is then sent to the PopulateGroups() function to update our Data Model.

If we look at the first part of the PopulateGroups() function, you'll see how we are using LINQ to pull out a properly formatted collection of elements for use in our Data Model.

Populating the Data Model

The Khan Academy API returns a series of playlists, made up of video items. However, the content of these playlists spans many different academic topics, so we want to make sure we further organize the playlists according to these topics. Here is a part of the Class Diagram to illustrate the relationship.

If we look at the last part of the PopulateGroups() method , the videos are subsequently organized under their individual playlists. This ungrouped collection of populated playlists is then sent to CreateGroups() which organizes them into their respective Topics. The relevant code looks like this:

In this way, we are able to get unsorted JSON data from Khan Academy and organize it into a series of classes that represent the actual videos, their topical playlist and their high level, academic grouping of topics. All this information is stored in ObservableCollections which we will bind to the UI in the next Quickstart.

If you have any questions, comments, or feedback feel free to join in the discussion.

]]>https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Handling-Asynchronous-Data-in-Windows-Store-Apps This video covers the basics of working with data in the Windows 8 Khan Academy app. We go over the new asynchronous pattern in WinRT for handling requests to and from the server, as well as putting together the Data Model for our app. If you have never worked with async patterns before, the following async overview may be helpful before proceeding with our Khan Academy samples. An Overview of Async / AwaitAs referenced above, asynchronous APIs are found all over the Windows 8 runtime and they are a key concept in Windows 8 app development. We have already seen the async / await pattern in action in the first Quickstart of this series when discussing the LaunchApp() method on startup: App.xaml.cs
public async void LaunchApp(
ApplicationExecutionState previousExecutionState)
{
DataSource = new KhanDataSource();
await DataSource.LoadAllData();
Notice the use of the async keyword in the method’s declaration. Since this method is going to use an await operator for an asynchronous task, we need to use the async keyword in the declaration. In our case, we use await after we create our Data Model named DataSource and request it to populate itself by calling its LoadAllData() function. LoadAllData() handles both local and remote requests for Khan Academy video playlist data. The Windows 8 Khan Academy video app ships with a cached snapshot of the entire playlist library stored locally. This keeps the UI fast and fluid since the app doesn’t need to request and parse the entire collection of videos from the internet before launching for the first time. Each time the app runs, though, the KhanDataSource.LoadAllData() function in our Data Model also makes a call to the Khan Academy server and updates the local cache with any updates behinds the scenes, before reloading the local data to update any bindings. LoadRemoteData() is also implements the async/await pattern and is shown below: C#
private async void LoadRemoteData()
{
HttpClient clie938https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Handling-Asynchronous-Data-in-Windows-Store-Apps
Wed, 26 Sep 2012 19:52:40 GMThttps://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Handling-Asynchronous-Data-in-Windows-Store-AppsRick BarrazaRick Barraza0https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Handling-Asynchronous-Data-in-Windows-Store-Apps/RSSWindows PhoneWindows Store AppMicrosoft Design StyleSetting Up Your Windows Store App Project This video covers the basics of setting up a Windows Store app project in Visual Studio 2012 for the Windows Phone 7 app we are going to migrate. We also discuss the migration strategy, scoping the features within the port, and the advantages of using a Windows Store project template as our solution base. For more information on migration, please visit the Migrating a Windows Phone 7 app to a Windows Store app guidance.

Installing the Developer Tools

You can download and install everything necessary to follow along as we build the Windows Store project in this series. However, you must first install a copy of Windows 8. To view and build the project files, you will also need to download Microsoft Visual Studio Express 2012 for Windows 8.

The Khan Academy Phone App

To show the migration in action, we will use the open source Khan Academy Windows Phone 7 app, developed by Joel Martinez. This app retrieves a list of video playlists from the Khan Academy website and lets the user watch them. Our Windows 8 Store app will be called “Viewer for Khan Academy”.

If you’re not familiar with Khan Academy, they are a “not-for-profit organization with the goal of changing education for the better by providing a free world-class education for anyone anywhere.” Their website, www.khanacademy.com hosts thousands of videos over a wide collection of topics and are offered freely to anyone with an interest in learning. They support Open Source data and have a rich collection of APIs that expose their library to the developer community as well.

Joel Martinez is a mobile app developer who created a popular Windows Phone 7 app that accesses this rich collection of videos. By providing his original Windows Phone 7 viewer of Khan Academy app as an Open Source project and writing about the process extensively on his blog at http://www.codecube.net, he has helped developers learn the basics of Windows Phone 7 development leveraging public videos found online.

If you have a Windows Phone and want to try out the original Windows Phone 7 version, you can download it from the Windows Phone Store. The app's source code is also available for download.

The Windows Phone app was developed in Silverlight so uses XAML for its interface syntax with C# code behind. When the app is first run, it calls the public Khan Academy APIs which return a collection of video playlists. In the phone app, these playlists are not organized by topic:

Selecting a playlist brings up a collections of videos, which when clicked send the user to the video player on the phone to stream in the video content:

Joel Martinez developed the phone app with solid logical abstraction following an MVVM pattern. The Phone app also leverages both network calls to the Khan Academy APIs as well as local storage of retrieved data for improved responsiveness:

If requested data has not previously been retrieved and stored locally, the app makes a request to the cloud and stores the data in IsolatedStorage. Updating local storage data with cloud responses is done in the background.

Determining the Migration Strategy

When porting a Silverlight for Windows Phone 7 app to Windows 8, there are several considerations you should take into account. Do you want to migrate as quickly as possible, or do you want to invest more time in the new features Windows 8 makes available? Are you going to want to share as much reusable code as possible, or maintain different solutions per platform? How greatly will the User Interface be affected as you migrate from a smaller form factor to a larger tablet or desktop Interface?

In our case, the Windows Phone app relies heavily on hitting the Khan Academy servers and requesting data as discussed above. It also makes use of Windows Phone's IsolatedStorage. C# 5.0 introduced two new keywords async and await and this Async Pattern is used extensively in modern Windows 8 apps for handling I/O functions. Since our app uses these types of commands extensively, this would be a big change.

While it is possible to convert synchronous methods written in C# that do I/O internally to functions that return Task<T> to a task continuation middle man, this method would be inherited more from the current .NET way of handling asynchronous tasks. We decided to invest in learning the modern asynchronous pattern implementations in WinRT for both handling server requests and storing app specific data. The Async / Await pattern is a significant addition to how all developers will be creating Windows 8 apps moving forward, so after our early explorations, we decided to create a fresh code base.

However, in either case, it is recommended that you don't try and bring over your XAML UI files directly. We discuss this further below.

Scoping the Solution

Once we determined a migration strategy for the existing Phone features, we wanted to see what benefits the new form factor and platform would afford. A core design principle for Windows 8 apps is “Winning as One”. This means that to the degree you app can leverage common features provided in the operating system and implemented consistently across apps, the greater the overall experience for the user will be. To that end, the Windows 8 operating system introduces Contracts and other features that apps can leverage to extend their functionality and provide a consistent, polished experience for their users.

While staying true to the functional goals of the phone app, there were three Contracts we wanted to leverage in the port to Windows 8. Since Khan Academy contains thousands of videos that cover a wide range of topics, exposing this data in our viewer through a SearchContract was essential. Once the app has loaded a video, the ability to send a link to a someone also made a lot of sense, so we would add this through the SharingContract. Since the primary content of the app are videos, leveraging the PlayToContract would allow the user to enjoy the experience on a larger screen if available.

Other than taking advantage of the Contracts made available through Windows 8, we wanted to keep the core functionality similar between phone and tablet. However, we decided to aggregate the information a little better in the Windows 8 version and group the playlists together by topic, something that is missing in the simple list interface of the Phone app.

Working with the Project Templates

To whatever degree you want to tweak versus rewrite your code, your XAML files are a different matter. The general advice is to start fresh, preferably from one of the new Windows 8 Project Templates found in Visual Studio, and then bring in the relevant UI elements under the root node. There are several reasons for this.

For one thing, the platform changes how navigation is handled. While on Windows Phone, navigation is usually handled with the NavigationService object, in Windows 8 it is primarily handled through Frames and Pages. Also, all the form factor considerations of Windows 8, including snapping, orientation and variable resolution support, require a common structure that doesn't exist in Windows Phone. If your existing phone app was designed with good view models and proper use of MVVM patterns, this UI migration will be much easier.

The best way to understand the differences between UI design from Windows Phone to Windows 8 is to open up the blank templates for Windows 8 Applications in Visual Studio 2012 and see how they work. We chose the Grid App template as the basis for our migration project.The Grid App template is a multi-page project that navigates among groups of items, so this template worked perfect for our list of Khan Academy videos.

There are several advantages of using a Windows Store Template as your starter project, instead of simply creating a “Blank Project” in Visual Studio. These include:

A Common Folder that comes packed with very usefull classes and assets to assist in Windows 8 app development, including BindableBase.cs.

Common\LayoutAwarePage.cs from which you can inherit your pages and have instant hooks into the system events when dealing with snapping, rotation and orientation.

Common\StandardStyles.xaml which gives you a default template on which to extend your app styles and templates.

A DataModel folder with provides a strong foundation for data binding and MVVM architecture for your app.

If you create open up a new Grid App Template, you will notice an App.xaml file. This is the first page loaded when a Windows 8 app stats. App.xaml.cs in turn calls its LaunchApp() function to direct the app to whatever startup page you wish to present.

We took this opportunity to create our data model for the app. With our KhanDataSource created, the common initialization practice is to create a Frame and use it to navigate to your startup page, passing along your Data Model if applicable. In our case, our startup page will be HubPage.xaml. Both the XAML elements of HubPage.xaml and the structure of our Data Model, KhanDataSource will be analyzed more in the next Quickstarts.

All the C# templates and most apps will follow this same routine. When an app is launched, App.xaml fires its LaunchApp() event. If a Data Model is required, it may be created at this time and loaded from data either locally or from the cloud, and get passed into the startup page of your app for data binding to the UI. During the subsequent series of Quickstarts, we will look closely at each of these steps and how we implemented them in the Windows Store Khan Academy App.

There are also some great posts on Dev Center that dive deeper into general migration strategies if you want to research the specifics of this topic further:

]]>https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Setting-Up-Your-Windows-Store-App-Project This video covers the basics of setting up a Windows Store app project in Visual Studio 2012 for the Windows Phone 7 app we are going to migrate. We also discuss the migration strategy, scoping the features within the port, and the advantages of using a Windows Store project template as our solution base. For more information on migration, please visit the Migrating a Windows Phone 7 app to a Windows Store app guidance. The final source code for the WIndows Store App Viewer for Khan Academy is available for download. Installing the Developer ToolsYou can download and install everything necessary to follow along as we build the Windows Store project in this series. However, you must first install a copy of Windows 8. To view and build the project files, you will also need to download Microsoft Visual Studio Express 2012 for Windows 8. The Khan Academy Phone AppTo show the migration in action, we will use the open source Khan Academy Windows Phone 7 app, developed by Joel Martinez. This app retrieves a list of video playlists from the Khan Academy website and lets the user watch them. Our Windows 8 Store app will be called “Viewer for Khan Academy”. If you’re not familiar with Khan Academy, they are a “not-for-profit organization with the goal of changing education for the better by providing a free world-class education for anyone anywhere.” Their website, www.khanacademy.com hosts thousands of videos over a wide collection of topics and are offered freely to anyone with an interest in learning. They support Open Source data and have a rich collection of APIs that expose their library to the developer community as well. Joel Martinez is a mobile app developer who created a popular Windows Phone 7 app that accesses this rich collection of videos. By providing his original Windows Phone 7 viewer of Khan Academy app as an Open Source project and writing about the process extensively on his blog at http://www.codecube.net, he has helped developers learn the basics 907https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Setting-Up-Your-Windows-Store-App-Project
Wed, 26 Sep 2012 19:52:18 GMThttps://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Setting-Up-Your-Windows-Store-App-ProjectRick BarrazaRick Barraza3https://channel9.msdn.com/Series/Migrating-apps-from-Windows-Phone-to-Windows-8/Setting-Up-Your-Windows-Store-App-Project/RSSWindows PhoneWindows Store AppMicrosoft Design StyleWindowsContentAugust News - Windows 8, BUILD 2012, Metro, Visual Studio 2012, and Conferences

D³: LIVE & INTERACTiVE In case you haven't heard about the show, Developers, Developers, Developers: LIVE & INTERACTIVE (D³) is a monthly show hosted by Jonathan Rozenblit. The show airs live every first Wednesday of the month at 12:00 PM ET and features the latest updates on what's new and exciting in the world of development; featured presentations; and guests. LIVE and INTERACTIVE means that you'll be part of the show – You're invited to interact with us; ask questions and get them answered; and share your thoughts and opinions.

]]>https://channel9.msdn.com/Blogs/devsdevsdevs/ep900 Host Jonathan Rozenblit goes through the monthly developer news: Announced today: Windows 8 officially RTM'd Save the date: Windows 8 General Availability - October 26, 2012 Windows 8 Upgrade offer Announcing //build 2012 - Registration opens 8.8.2012 at 8AM PDT (stay tuned to buildwindows.com) Build Windows 8 apps at Windows 8 Hackathons - Register today Windows 8 Development Resources: What's a Metro Style App?, Making Great Metro Style Apps, Building Metro Style Apps: What Web Developers Need to Know Get your app reviewed by a Microsoft Field Engineer Announced today: Visual Studio 2012 RTM'd Visual Studio Virtual Launch Event - September 12, 2012 Office 2013 - A new Office has arrived - Download the Preview OneNote MX in the Windows Store New show for web developers: Foxie Register for conferences to attend: Prairie Dev Con (October 1-3), SDEC 12 (October 15-17), and DevTeach (December 10-12) Watch the full episode &gt;&gt; D³: LIVE &amp; INTERACTiVE In case you haven't heard about the show, Developers, Developers, Developers: LIVE &amp; INTERACTIVE (D³) is a monthly show hosted by Jonathan Rozenblit. The show airs live every first Wednesday of the month at 12:00 PM ET and features the latest updates on what's new and exciting in the world of development; featured presentations; and guests. LIVE and INTERACTIVE means that you'll be part of the show – You're invited to interact with us; ask questions and get them answered; and share your thoughts and opinions. Join the Canadian Developer Connection LinkedIn group Follow @devsdevdevs Like D³ on Facebook Subscribe to podcasts via iTunes, Zune, or RSS Download the Canadian Developer Connection Windows Phone app More D³: LIVE &amp; INTERACTIVE &gt;&gt; 560https://channel9.msdn.com/Blogs/devsdevsdevs/ep900
Thu, 02 Aug 2012 03:17:26 GMThttps://channel9.msdn.com/Blogs/devsdevsdevs/ep900Jonathan RozenblitJonathan Rozenblit0https://channel9.msdn.com/Blogs/devsdevsdevs/ep900/RSSInternet ExplorerOfficeconferencesBuildWindows 8Visual Studio 2012Windows Store AppMicrosoft Design StylePac[Metro]Man - Recreating PacMan for Metro with a little help from F#Today's wild Wednesday post is an interesting mix of languages and things, all thrown together as a Metro game (Yeah, I know it's not Metro Monday, but still...)

You can play the latest version with your cursor keys and 9 lives below:

Windows 8

As the sample runs in Silverlight I thought I’d also try it out on it’s cousin WinRT. WinRT lets you build Metro apps on Windows 8. The transition code wise has been pretty straight forward and I now have a tile for the game appearing on my Windows 8 start page:

Multi-targeting

Multi-targeting Silverlight and WinRT is the route I decided to go down which allowed me to develop the game on my laptop running Windows 7 with Visual Studio 2010. Then I periodically tested it out on a desktop box running the Windows 8 Preview Release using Visual Studio 2012. Visual Studio 2012 does run on Windows 7, however WinRT does not.

The WinRT version of the app is implemented in F# and C#. The game part is written in F# as a portable library and the plumbing in C#. There’s a great walkthrough on Creating a Portable F# Library over on MSDN which describes this direction in some detail.

Okay, what about for the non-Metro dev's? Well there's VS2010/SilverLight, Windows Phone and XAML fun for you too!

If you're looking to expand your development language repertoire and looking for fun way to do it, looking for examples of how to mix and match C# and F#, looking for examples of F# and SilverLight or finally F# in a Metro world, this project has all that and more...

]]>https://channel9.msdn.com/coding4fun/blog/PacMetroMan-Recreating-PacMan-for-Metro-with-a-little-help-from-FToday's wild Wednesday post is an interesting mix of languages and things, all thrown together as a Metro game (Yeah, I know it's not Metro Monday, but still...) Today's project mixes Metro style app development, Portable Libraries, C#, F# and the always fun to play PacMan! Pacman TilesBack in January I built a sample Pacman maze script in F# to use at a Pacman Kata evening with the F#unctional Londoners group. Coincidentally there’s another Coding Kata this Thursday 26th July at Skills Matter. Anyway a couple of weeks ago I started playing with the sample again on the train to and from work, filling in some of the gameplay. You can play the latest version with your cursor keys and 9 lives below: Windows 8As the sample runs in Silverlight I thought I’d also try it out on it’s cousin WinRT. WinRT lets you build Metro apps on Windows 8. The transition code wise has been pretty straight forward and I now have a tile for the game appearing on my Windows 8 start page: Multi-targetingMulti-targeting Silverlight and WinRT is the route I decided to go down which allowed me to develop the game on my laptop running Windows 7 with Visual Studio 2010. Then I periodically tested it out on a desktop box running the Windows 8 Preview Release using Visual Studio 2012. Visual Studio 2012 does run on Windows 7, however WinRT does not. The WinRT version of the app is implemented in F# and C#. The game part is written in F# as a portable library and the plumbing in C#. There’s a great walkthrough on Creating a Portable F# Library over on MSDN which describes this direction in some detail. ... Full SourceThe full source code to the game is publicly available on BitBucket: https://bitbucket.org/ptrelford/pacman A single file playable script version is also available on F# Snippets: http://fssnip.net/cZ One interesting thing was how it scaled. For example, here's the app snapped, where it remained fully playable; Here's a snap of the Solution, showing off how F# and C# were mixed, https://channel9.msdn.com/coding4fun/blog/PacMetroMan-Recreating-PacMan-for-Metro-with-a-little-help-from-F
Wed, 01 Aug 2012 13:00:00 GMThttps://channel9.msdn.com/coding4fun/blog/PacMetroMan-Recreating-PacMan-for-Metro-with-a-little-help-from-FGreg DuncanGreg Duncan1https://channel9.msdn.com/coding4fun/blog/PacMetroMan-Recreating-PacMan-for-Metro-with-a-little-help-from-F/RSSC#Coding4FunF#SilverlightXAMLWindows Store AppMicrosoft Design StyleWindows User InterfaceTWC9: Build 2012, Metro LOB apps, aspConf, .Net 4.5 GC, Ardunio Shields and moreThis week on Channel 9, Dan and Brian discuss the week's top developer news, including:

Mary Jo Foley Mary Jo Foley has been a tech journalist for more than 25 years. She has worked for a variety of tech publications and Web sites, including PCWeek/eWeek, CRN and ZDNet. She is the editor of the "All About Microsoft" blog on ZDNet, and the author of the book "Microsoft 2.0: How Microsoft Plans to Stay Relevant in the Post-Gates Era" (John Wiley & Sons). She also is the co-host of the Windows Weekly show on the TWiT network and a frequent commentator and speaker on all things Microsoft-related on TV, radio, podcasts and at industry events.

D³: LIVE & INTERACTiVE Developers, Developers, Developers: LIVE & INTERACTIVE (D³) is a monthly show hosted by Jonathan Rozenblit. The show airs live every first Wednesday of the month at 12:00 PM ET and features the latest updates on what's new and exciting in the world of development; featured presentations; and guests. LIVE and INTERACTIVE means that you'll be part of the show – You're invited to interact with us; ask questions and get them answered; and share your thoughts and opinions.

]]>https://channel9.msdn.com/Blogs/devsdevsdevs/ep801 ZDNet's All About Microsoft blog editor and frequent commentator on all things Microsoft, Mary Jo Foley, gives an industry take on the Developer Opportunity made possible with the recent announcements for Windows, Windows Phone, Windows Azure, and Visual Studio 2012. Plus: Mary Jo answers questions from the live chat and discussion on the Canadian Developer Connection LinkedIn group. Watch the start of this conversation with Richard Campbell &gt;&gt; Mary Jo Foley Mary Jo Foley has been a tech journalist for more than 25 years. She has worked for a variety of tech publications and Web sites, including PCWeek/eWeek, CRN and ZDNet. She is the editor of the &quot;All About Microsoft&quot; blog on ZDNet, and the author of the book &quot;Microsoft 2.0: How Microsoft Plans to Stay Relevant in the Post-Gates Era&quot; (John Wiley &amp; Sons). She also is the co-host of the Windows Weekly show on the TWiT network and a frequent commentator and speaker on all things Microsoft-related on TV, radio, podcasts and at industry events. D³: LIVE &amp; INTERACTiVE Developers, Developers, Developers: LIVE &amp; INTERACTIVE (D³) is a monthly show hosted by Jonathan Rozenblit. The show airs live every first Wednesday of the month at 12:00 PM ET and features the latest updates on what's new and exciting in the world of development; featured presentations; and guests. LIVE and INTERACTIVE means that you'll be part of the show – You're invited to interact with us; ask questions and get them answered; and share your thoughts and opinions. Join the Canadian Developer Connection LinkedIn group Follow @devsdevdevs Like D³ on Facebook Subscribe to podcasts via iTunes, Zune, or RSS Download the Canadian Developer Connection Windows Phone app More D³: LIVE &amp; INTERACTIVE &gt;&gt; 3479https://channel9.msdn.com/Blogs/devsdevsdevs/ep801
Thu, 12 Jul 2012 15:28:08 GMThttps://channel9.msdn.com/Blogs/devsdevsdevs/ep801Jonathan RozenblitJonathan Rozenblit6https://channel9.msdn.com/Blogs/devsdevsdevs/ep801/RSSCloud ArchitectureCloud ComputingSurfaceWindows PhonetabletWindows 8Visual Studio 2012Microsoft Design StyleWindows User InterfaceThe old new Hello World... Building a simple RSS reader for Windows 8 Metro with HTML and JavaScriptWriting a RSS reader used to be the new Hello World app (now I think it's writing a Twitter app, but anyway...) so when saw this great walk-through for creating a Metro Style App that consumes an RSS feed I thought it would make for a perfect Metro Monday post. Then when I saw the author was using the Channel 9 feed...!

Starting from scratch, we’re going to learn through these 2 tutorials how to build a small RSS reader with HTML5, CSS3 and WinJS, the Microsoft JavaScript framework for Windows 8 Metro Style Apps. We’ll try also to follow the Metro design guidelines by using Expression Blend 5. If everything goes fine, you should be able to follow these 2 articles in 30 minutes.

This first article will help you to create the welcome screen that will use a WinJS ListView control. This control will display all the blog posts recently published via nice thumbnails. The 2nd one will work on the detail view displayed when you’ll click on one of the items. At last, you’ll find a video at the end of this article playing in real-time the following steps as well as the final solution to download. See them as useful complementary resources if you need to clarify some parts of this article.

Note: If you’ve got a Mac, it works perfectly fine thanks to BootCamp or inside a virtual machine handled by Parallels for instance

Note 2: this article has been updated on 04/06/2012 to implement the changes in the UI & in the code between Windows 8 Consumer Preview and the Release Preview. In a general manner, if you need to migrate your application to RP, you should read this document: breaking changes document. In our case, the only impact where on the way to handle the XML elements returned by the XHR request. We’ve changed the selectors to switch from XPath via selectNodes to CSS selectors style via querySelectorAll.

Here is a brief summary of what we’re going to see in this article:

- Step 1: creating a blank application - Step 2: creating the HTML & CSS base of our main page- Step 3: first contact with Blend- Step 4: loading the data with XHR and bind them to the ListView control- Step 5: using a template and modifying the design with Blend- Step 6: video demonstrating all the steps & source code to download

Note: these tutorials are based on the Tools for building Metro style apps session of the BUILD delivered by Chris Sell & Kieran Mockford. I’ve simply updated it for Windows 8 RP.

We’re now going to see how to display the details of each article. We will use for that a transition animation, we will play with the simulator and we will continue to discover Blend to use CSS3 Multi-columns for instance.

Like in the previous article, you’ll find a video as well as the source code to download at the end of the article.

If you're thinking about Windows 8 HTML5 Metro app development this two part walk through might be the ticket to help you move from thinking to doing...

]]>https://channel9.msdn.com/coding4fun/blog/The-old-new-Hello-World-Building-a-simple-RSS-reader-for-Windows-8-Metro-with-HTML-and-JavaScriptWriting a RSS reader used to be the new Hello World app (now I think it's writing a Twitter app, but anyway...) so when saw this great walk-through for creating a Metro Style App that consumes an RSS feed I thought it would make for a perfect Metro Monday post. Then when I saw the author was using the Channel 9 feed...! Windows 8 HTML5 Metro Style App: How to create a small RSS reader in 30min (part 1/2)Starting from scratch, we’re going to learn through these 2 tutorials how to build a small RSS reader with HTML5, CSS3 and WinJS, the Microsoft JavaScript framework for Windows 8 Metro Style Apps. We’ll try also to follow the Metro design guidelines by using Expression Blend 5. If everything goes fine, you should be able to follow these 2 articles in 30 minutes. This first article will help you to create the welcome screen that will use a WinJS ListView control. This control will display all the blog posts recently published via nice thumbnails. The 2nd one will work on the detail view displayed when you’ll click on one of the items. At last, you’ll find a video at the end of this article playing in real-time the following steps as well as the final solution to download. See them as useful complementary resources if you need to clarify some parts of this article. Pre-requisites: to follow these tutorials, you need first to: 1 – Download &amp; install Windows 8 Release Preview on your machine: http://preview.windows.com2 – Download &amp; install Visual Studio 2012 RC Express for Windows 8: https://msdn.microsoft.com/en-us/windows/apps/br229516 Note: If you’ve got a Mac, it works perfectly fine thanks to BootCamp or inside a virtual machine handled by Parallels for instance Note 2: this article has been updated on 04/06/2012 to implement the changes in the UI &amp; in the code between Windows 8 Consumer Preview and the Release Preview. In a general manner, if you need to migrate your application to RP, you should read this document: breaking changes document. In our cahttps://channel9.msdn.com/coding4fun/blog/The-old-new-Hello-World-Building-a-simple-RSS-reader-for-Windows-8-Metro-with-HTML-and-JavaScript
Mon, 09 Jul 2012 13:00:00 GMThttps://channel9.msdn.com/coding4fun/blog/The-old-new-Hello-World-Building-a-simple-RSS-reader-for-Windows-8-Metro-with-HTML-and-JavaScriptGreg DuncanGreg Duncan0https://channel9.msdn.com/coding4fun/blog/The-old-new-Hello-World-Building-a-simple-RSS-reader-for-Windows-8-Metro-with-HTML-and-JavaScript/RSSChannel 9Coding4FunHTML5RSS-ReaderWindows 8WinJSWindows Store AppMicrosoft Design StyleWindows User InterfaceSimple HTML5 based Windows Phone application with Apache Cordova and jQuery MobileHTML5 can be used in Windows Phone application development.

Leveraging HTML5 allows publishing a same application on several platforms reusing a maximum of code. Tools and frameworks such as Apache Cordova (previously known as PhoneGap) allow to "wrap" the HTML5 and JavaScript code into a native application using the WebBrowser control.

In this video you can watch a rapid demo of the following:

Integration of the HTML5 code into an Apache Cordova solution within Visual Studio to generate a Windows Phone application

The jQueryMobile theme for Windows Phone (Metro style) is applied to better integrate the application into the Windows Phone experience

]]>https://channel9.msdn.com/Blogs/Interoperability/HTML5-WP-with-Apache-Cordova-and-jQMobileHTML5 can be used in Windows Phone application development. Leveraging HTML5 allows publishing a same application on several platforms reusing a maximum of code. Tools and frameworks such as Apache Cordova (previously known as PhoneGap) allow to &quot;wrap&quot; the HTML5 and JavaScript code into a native application using the WebBrowser control. In this video you can watch a rapid demo of the following: Integration of the HTML5 code into an Apache Cordova solution within Visual Studio to generate a Windows Phone application The jQueryMobile theme for Windows Phone (Metro style) is applied to better integrate the application into the Windows Phone experience 539https://channel9.msdn.com/Blogs/Interoperability/HTML5-WP-with-Apache-Cordova-and-jQMobile
Mon, 04 Jun 2012 17:15:13 GMThttps://channel9.msdn.com/Blogs/Interoperability/HTML5-WP-with-Apache-Cordova-and-jQMobileOlivier BlochOlivier Bloch0https://channel9.msdn.com/Blogs/Interoperability/HTML5-WP-with-Apache-Cordova-and-jQMobile/RSSWindows PhoneMicrosoft Design StyleApache CordovaSomething for your Metro style app building utility belt, the Callisto toolkitWith last week's release of Windows 8 Release Preview and Visual Studio 2012 RC, the Metro style app building cycle is going to pick up serious steam. To help you all with that, in the coming week's I'm going to focus the Metro Monday posts on frameworks, toolkits and tools that will help you build those apps...

Introducing Callisto, a toolkit of sorts for XAML Metro style apps. When starting my own app building for the Consumer Preview, I realized there were some experiences and common things that I wanted to implement that weren’t existing controls in a way that I could easily re-use my efforts across app to app that I was building. The foundation building blocks in the platform were there of course, as was a few existing Open Source projects that I could leverage (yay Open Source!). I refactored the combination of these things into a single toolkit that I’ve been using for my apps.

Kitchen Sink?

My approach has been mostly pragmatic for me. This was extracted out of app needs versus being designed as a toolkit from the beginning. As such, it might feel like a ‘kitchen sink’ approach as there are things that you may never use. For me, I wanted one thing I could add to my project and get all the goodness that I desired. This is what led to a single project/toolkit rather than any modular approach. For example, I originally had included the sqlite-net project in mine because I didn’t want to keep adding it to each project I was using the SQLite database engine. This is one that I’ve removed since the changes I needed were contributed back to the project and I’ve wrapped them up in a nice easy NuGet package for that portion.

What is it?

Well, it is a toolkit! It is a combination of some helper libraries as well as some controls. Some original, some contributed, some ports from existing toolkits. If you look at the project page you’ll see that it currently has:

Extensions: Tilt effect and some helpers for doing some things like OAuth 1.0 (adapted from RestSharp)

Controls: Flyout, SettingsFlyout, Menu, LiveTile

How do I get it?

In addition to the source for those who would want that, you can get it in 2 ways: via NuGet or via the Visual Studio Gallery. Incidentally you can install it both of these ways from within Visual Studio 2012 Express itself! If using the gallery VSIX installer, then the toolkit will be available for you to use across multiple projects. The NuGet approach is per-project (as it is with any NuGet package). After installing the VSIX – if you use that approach – simply choose Add Reference in your project and navigate to the Windows…Extensions section and you’ll see it there. It is implemented as an Extension SDK for Visual Studio.

What Is It?

Callisto is a library for use in Windows 8 XAML applications (aka Metro style apps). The XAML framework in Windows.UI.Xaml is great, but has some functionality that isn't provided in-the-box in a few controls and APIs. Callisto serves to provided added functionality on top of the XAML UI framework for Windows.

What's In It?

So far Callisto includes:

Flyout - a primitive that includes positioning and 'light dismiss' logic

Menu - primarily to be used from AppBar, contains the base for providing, well, a Menu

MenuItem - an item for a menu, including separators and contains the command point for the menu item

SettingsFlyout - an item to create a custom settings pane UI

LiveTile - an in-app tile experience to give you animated or 'live' tiles

Tilt - an effect to provide the tilt experience when clicked on edges/corners

OAuth helpers - a set of helpers to create OAuth 1.0 signatures/headers for those sites that hate OAuth 2.0

BooleanToVisibilityConverter - a converter to well, convert boolean to visibility, very common use

LengthToBooleanConverter - a converter to examine a string length to convert to boolean (simple validation helper)

RelativeTimeConverter - a converter to show time as relative string, i.e., 'about an hour ago'

]]>https://channel9.msdn.com/coding4fun/blog/Something-for-your-Metro-style-app-building-utility-belt-the-Callisto-toolkitWith last week's release of Windows 8 Release Preview and Visual Studio 2012 RC, the Metro style app building cycle is going to pick up serious steam. To help you all with that, in the coming week's I'm going to focus the Metro Monday posts on frameworks, toolkits and tools that will help you build those apps... Callisto: A toolkit for XAML Metro style appsIntroducing Callisto, a toolkit of sorts for XAML Metro style apps. When starting my own app building for the Consumer Preview, I realized there were some experiences and common things that I wanted to implement that weren’t existing controls in a way that I could easily re-use my efforts across app to app that I was building. The foundation building blocks in the platform were there of course, as was a few existing Open Source projects that I could leverage (yay Open Source!). I refactored the combination of these things into a single toolkit that I’ve been using for my apps. Kitchen Sink?My approach has been mostly pragmatic for me. This was extracted out of app needs versus being designed as a toolkit from the beginning. As such, it might feel like a ‘kitchen sink’ approach as there are things that you may never use. For me, I wanted one thing I could add to my project and get all the goodness that I desired. This is what led to a single project/toolkit rather than any modular approach. For example, I originally had included the sqlite-net project in mine because I didn’t want to keep adding it to each project I was using the SQLite database engine. This is one that I’ve removed since the changes I needed were contributed back to the project and I’ve wrapped them up in a nice easy NuGet package for that portion. What is it?Well, it is a toolkit! It is a combination of some helper libraries as well as some controls. Some original, some contributed, some ports from existing toolkits. If you look at the project page you’ll see that it currently has: Helpers: some attached property helpers for web content bindings,https://channel9.msdn.com/coding4fun/blog/Something-for-your-Metro-style-app-building-utility-belt-the-Callisto-toolkit
Mon, 04 Jun 2012 13:00:00 GMThttps://channel9.msdn.com/coding4fun/blog/Something-for-your-Metro-style-app-building-utility-belt-the-Callisto-toolkitGreg DuncanGreg Duncan0https://channel9.msdn.com/coding4fun/blog/Something-for-your-Metro-style-app-building-utility-belt-the-Callisto-toolkit/RSSC#Coding4FunXAMLWindows 8Windows Store AppMicrosoft Design StyleDeveloping Windows 8 Metro style apps with C++ sessions now onlineThanks to all of you who attended on premise and in the cloud.

Whether you are a new C++ developer ready to learn about writing Metro style apps, an intermediate developer who wants to honeyour code and skills, or an experienced C++ developer eager to squeeze every ounce of performance out of your Metro style app, this event is for you. We present pragmatic advice for every developer writing Metro style apps and games with C++, XAML and DirectX. Talks contain VC++compiler extensions and ISO C++. The Windows Runtime Library is introduced, demoed and explained.

]]>https://channel9.msdn.com/posts/Developing-Windows-8-Metro-style-apps-with-C-Live-Streaming-at-0900-PDT-May-18Thanks to all of you who attended on premise and in the cloud. All sessions are available for on demand viewing. Whether you are a new C&#43;&#43; developer ready to learn about writing Metro style apps, an intermediate developer who wants to honeyour code and skills, or an experienced C&#43;&#43; developer eager to squeeze every ounce of performance out of your Metro style app, this event is for you. We present pragmatic advice for every developer writing Metro style apps and games with C&#43;&#43;, XAML and DirectX. Talks contain VC&#43;&#43; compiler extensions and ISO C&#43;&#43;. The Windows Runtime Library is introduced, demoed and explained. Agenda (All times PDT): StartSesson topicLengthSpeaker9:00Visual C&#43;&#43; for Windows 860Herb Sutter10:00Building Windows 8 apps with XAML and C&#43;&#43;60Tim Heuer11:00Blend and XAML Walkthrough [video]15Navit Saxena11:20Porting a desktop app to a Metro style app30Sridhar Madhugiri11:50Building Windows Runtime Components with C&#43;&#43; 30Harry Pierson12:20Casablanca [video]20Niklas Gustafsson12:40Live Q&amp;A (Panel)20All Morning Speakers13:00C&#43;&#43; and DirectX for Metro style games60Chas Boyd &amp; Matt Sandy14:00Combining XAML and DirectX in Metro style apps30Jesse Bishop14:30Getting the most out of the C&#43;&#43; compiler [video]15Jim Hogg14:45Async made simple with C&#43;&#43; PPL35Rahul V. Patil &amp; Genevieve Fernandes15:20The Windows Runtime Library40Sridhar Madhugiri16:00Live Q&amp;A (Panel)60All Afternoon Speakers https://channel9.msdn.com/posts/Developing-Windows-8-Metro-style-apps-with-C-Live-Streaming-at-0900-PDT-May-18
Tue, 22 May 2012 05:26:59 GMThttps://channel9.msdn.com/posts/Developing-Windows-8-Metro-style-apps-with-C-Live-Streaming-at-0900-PDT-May-18CharlesCharles2https://channel9.msdn.com/posts/Developing-Windows-8-Metro-style-apps-with-C-Live-Streaming-at-0900-PDT-May-18/rssC++Channel 9 LiveWindows 8C++11_techmemeMicrosoft Design StyleGestating your Metro Style App with CocoonToday's Metro Monday project is a framework that will help you in your creation of Windows 8 Metro Style applications, helping take a little of the grunt work out, while helping build applications with some separation of concerns. Plus I dig how it uses MEF to compose a navigable application.

Cocoon is a framework to support the development of .Net Windows 8 Metro-style applications, in particular those that link to web services. It simplifies accessing, displaying and editing data using standard Metro controls, and allows easy application of the MVVM pattern.

To assist with Windows 8 Metro-style applications I would like to announce the Cocoon framework (http://cocoon.codeplex.com/). This aims to build on top of the learning from the Chrysalis project to provide a simple way to develop Metro-style applications in a manner that fits naturally with the MVVM design pattern.

It is likely that many Metro-style apps will be connected applications, downloading data from across the internet in response to user navigation. Modern applications are expected to do this in a seamless manner, retrieving data on demand and populating the user interface in response. In some ways this is at odds with the web API programming model that is based upon individual request-response calls, with paging used to retrieve large datasets. One of the first targets of the Cocoon framework is to simplify this process – bridging the world of stateless web API calls, with the “fast and fluid” interfaces expected by users.

Navigation in Cocoon

Although not limited to this, the Cocoon framework is designed to work great with the Model-View-ViewModel (MVVM) pattern that has become common when designing XAML based applications. One problem when using this pattern is that you need some way of associating a view with a view-model. Often this is done by navigating directly to a page, and using a “ViewModelLocator” to identify and wire up the respective view-model.

In Cocoon a slightly different approach is used. Here, rather than navigating directly to a view, you navigate to a named page. Although the behaviour is extensible, by default Cocoon will use MEF (the built in composition framework included in .Net) to locate both the view and view-model associated with this page name, create and initialise instances of these and wire them together.

...

The Navigation Manager

In order to navigate between pages, Cocoon includes a navigation manager that can be accessed by importing the INavigationManager interface through MEF (simplified by the fact that all views and view models in Cocoon are themselves are composed by MEF).

Since the Cocoon navigation framework is built on top of the Managed Extensibility Framework (MEF), the application is composed with the required dependencies as the user navigates through the application. MEF is a composition framework that is built into the .Net framework, that enables the construction of loosely-coupled, easily maintainable and testable applications to be composed automatically at run time. An introductory guide for those who are not familiar with MEF is available here.

What I have not covered previously however was how to navigate to the application’s first page when it is launched,

Launching Navigation Using The Cocoon Bootstrapper

To simplify the initialization of Cocoon based applications the framework includes the ‘CocoonBootstrapper’ class that can be used at startup. This manages the configuration of MEF for the most common scenarios, initialization of services and activation of the application.

...

Here's a snip of the sample app running.

Note, to get the sample app to run, you'll need your own Flickr API Key.

Here's a snap of the Solution;

And some snaps of the code, showing a little bit of how MEF is used.

If you've thought, "I love MEF and I wonder if I can use it to compose Metro Style App's, without messing up navigation" or looking for a new data handling framework or just want to check out a cool framework, Cocoon, and all its source, is ready for you...

]]>https://channel9.msdn.com/coding4fun/blog/Gestating-your-Metro-Style-App-with-CocoonToday's Metro Monday project is a framework that will help you in your creation of Windows 8 Metro Style applications, helping take a little of the grunt work out, while helping build applications with some separation of concerns. Plus I dig how it uses MEF to compose a navigable application. CocoonCocoon is a framework to support the development of .Net Windows 8 Metro-style applications, in particular those that link to web services. It simplifies accessing, displaying and editing data using standard Metro controls, and allows easy application of the MVVM pattern. For more details, and news on the latest releases visit http://andyonwpf.blogspot.com Current FeaturesA navigation framework with, Attribute based page and view model discovery using MEF Automatic creation and wiring up of page and view model Passing of parameters to view models upon activation Persistence of navigation and state upon application suspension A data framework with, Support for observable collections and data virtualization An extensible framework for the retrieval, processing and display of data from the cloud DocumentationIntroduction Base Types ObservableVector&lt;T&gt; VirtualizingVector&lt;T&gt; Cocoon Navigation Framework Defining pages and view models More to follow... Cocoon Data Framework (IDataListSource&lt;T&gt; and data lists) Introduction Example Code SimpleDataListSource&lt;T&gt; PagedDataListSource&lt;T&gt; VirtualizingDataList&lt;T&gt; Cocoon – A new framework for Windows 8 DevelopmentTo assist with Windows 8 Metro-style applications I would like to announce the Cocoon framework (http://cocoon.codeplex.com/). This aims to build on top of the learning from the Chrysalis project to provide a simple way to develop Metro-style applications in a manner that fits naturally with the MVVM design pattern. It is likely that many Metro-style apps will be connected applications, downloading data from across the internet in response to user navigation. Modern applications are expected tohttps://channel9.msdn.com/coding4fun/blog/Gestating-your-Metro-Style-App-with-Cocoon
Mon, 21 May 2012 13:00:00 GMThttps://channel9.msdn.com/coding4fun/blog/Gestating-your-Metro-Style-App-with-CocoonGreg DuncanGreg Duncan4https://channel9.msdn.com/coding4fun/blog/Gestating-your-Metro-Style-App-with-Cocoon/RSSC#Coding4FunMEFMVVMWindows Store AppMicrosoft Design StyleTWC9: Azure Media Services, C9 for Win8, MAVIS and moreThis week on Channel 9, Dan and Clint discuss the week's top developer news, including:

Fast Interop : the framework is using a genuine way to avoid any C++/CLI while still achieving better performance than existing managed API. Check this benchmark.

API naming convention mostly compatible with SlimDX API.

Raw DirectX object life management : No overhead of ObjectTable or RCW mechanism, the API is using direct native management with classic COM method "Release".

Easily mergeable / obfuscatable : If you need to obfuscate SharpDX assemblies, they are easily obfusctable due to the fact the framework is not using any mixed assemblies. You can also merge SharpDX assemblies into a single exe using a tool like ILMerge.

Easily deployable as SharpDX are plain .NET assemblies, there is no need to install VC runtime or .NET GAC install.

An integrated math API directly ported from SlimMath

An optional assembly SharDX.Diagnostics is delivered and can be added to your project in order to have an explicit error messages when there is a DirectX functions returning an error code. This assembly can be used in development but is not mandatory.

So you want to do some DirectX immediate mode rendering in your C#/XAML app ? Let me walk you through how to do that using the SharpDx library

Combining XAML and DirectX is an excellent msdn article that talks about what is possible with DirectX and XAML. Unfortunately there are no examples and what information there is available is targeting the XAML/C++ world. I wanted to do this for us managed programmers!

SharpDx is a very thin library that exposes the DirectX api’s for use in C# WinRT apps . It exposes the DirectX API’s nearly 1-to-1 with no higher level abstraction (like what XNA is). We will use this library to render DirectX content in our XAML/C# apps via the new controls mentioned in the above article (SurfaceImageHost & SwapChainBackgroundPanel)

Alexandre Mutel is the brilliant guy who owns SharpDx, he’s done a lot of the hard work for us BUT help is very scarce with getting these bits working on your Win8 development environment.

I’ll spend this post walking you through how to get this all setup. It’s a simple post that will set the foundation for some awesome UI/UX rich future posts!

Step 1 : Get SharpDx

Step 2 : Fix up permissions for the local cloned source

Step 3 : Build SharpDx code

Step 4 : Using these DirectX-C# libraries to render islands of DirectX in your XAML (SurfaceImageSource)

Step 5 : Using these DirectX-C# libraries to render full page DirectX under your XAML (SwapChainBackgroundPanel)

Conclusion

For convenience I’ve bundled my locally rendered SharpDx libraries and the Alex’s samples to get you quickly up and running, cause I know all you want is the demos

I’m really excited that we can use managed skills and render immediate mode DirectX graphics within XAML.

We may not have gotten XNA BUT I honestly believe we have something better with DirectX …

Incidently if you do want an XNA like framework for WinRT XAML, then you should look at ANX (which is XNA backwards). It’s written ontop of SharpDx and has some higher level abstractions like SpriteBatch, ResourceManager, Pipeline etc.

In future posts I will use these SharpDx libraries to render some cool animations that play nicely with XAML!!

If you click through the sample project is available for download too. And the series doesn't end there...

Thanks to SharpDx we can now create complex effect graphs (in code) in our WinRT-XAML/C# apps.

I took the Xaml/Cx D2DBasicEffectGraph sample from the consumer preview and pretty much redid it to work with SharpDx for us managed programmers

1. Creating the Effect Graph

2. Rendering the Graph on a Surface

3. Here’s a quick video of it in action

4. Here’s the source of the sample:

5. Conclusion

Effect graphs are very powerful and it’s the most exciting feature of Dx11.1 in my opinion. I can’t wait to show you guys more stuff that I’ve been dreaming up with WinRT/XAML/DirectX/C# and of course SharpDx

If you thought XNA not currently being available to help build Windows 8 Metro Style app's meant that you had to jump to C++ to take advantage of DirectX, you should check this project out...

]]>https://channel9.msdn.com/coding4fun/blog/Sharpening-your-Metro-CXAML-projects-with-DirectX-and-SharpDXI've been keeping on eye on the SharpDX project for a while, waiting on a killer demo. I think I've found it, and in a way I wasn't really expecting. These post details not only how to use SharpDX, but how to use them in a Windows 8 Metro Style app too! First a snip about SharpDX; SharpDXSharpDX is a full DirectX framework for the .NET Platform, including the newest DirectX technology. The top three features of SharpDX: SharpDX is providing the latest DirectX and Multimedia API to .Net with true AnyCpu assemblies, running on .Net and Mono. SharpDX is ready for next generation DirectX 11.1 technology and Windows 8 Platform. You can start to develop DirectX Metro style App in C# under Win8 SharpDX is the fastest Managed-DirectX implementation. SharpDX is using a custom code generator from C&#43;&#43; headers in order to generate an efficient .Net interoperability with C&#43;&#43; DirectX API. ... The key features and benefits of this API are: Support for the following DirectX API: Direct3D9 &amp; Ex Direct3D10 Direct3D10.1 Direct3D11 and Effects11 Direct3D11.1 (Win8 only) Direct2D1 (including custom rendering, tessellation callbacks) Direct2D1.1 (Win8 only) DirectCompute DirectWrite (including custom client callbacks) D3DCompiler DXGI DXGI 1.1 DXGI 1.2 (Win8 only) DirectInput 8 XInput RawInput DirectSound 8 X3DAudio XACT3 XAudio2 XAPO WIC API is generated from DirectX SDK headers : meaning a complete and reliable API and an easy support for future API. Managed platform independent .NET API : assemblies are compiled with AnyCpu target. You can run your code on a x64 or a x86 machine with the same assemblies, without recompiling your project. Lightweight individual assemblies : a core assembly - SharpDX - containing common classes and an assembly for each subgroup API (Direct3D10, Direct3D11, DXGI, D3DCompiler...etc.). Assemblies are also lightweight. Fast Interop : the framework is using a genuine way to avoid any C&#43;&#43;/CLI while still achieving better performanchttps://channel9.msdn.com/coding4fun/blog/Sharpening-your-Metro-CXAML-projects-with-DirectX-and-SharpDX
Mon, 09 Apr 2012 13:00:00 GMThttps://channel9.msdn.com/coding4fun/blog/Sharpening-your-Metro-CXAML-projects-with-DirectX-and-SharpDXGreg DuncanGreg Duncan2https://channel9.msdn.com/coding4fun/blog/Sharpening-your-Metro-CXAML-projects-with-DirectX-and-SharpDX/RSSC#Coding4FunWindows 8Microsoft Design StyleWindows 8 Camp: Introduction to Building Metro Apps - Windows 8 StoreWindows 8 will change the way users interact with it, and it will change the way we developers think about it. In this session we'll talk about the key concepts and the business opportunities that Windows 8 provides!

Join us on this special event with our guest speaker: Michael Platt, Senior Director in the Developer & Platform Evangelism Group based in Redmond, Washington.

Audience: Developers, Startups and entrepreneurs.

Agenda of this Camp:

Building Metro-style Apps for Windows 8

The Windows 8 Platform for Metro Style App

Designing Apps with Metro Principles and the Windows Personality

Everything Web Developers Must Know to Build Metro Style Apps

Building Metro Style Apps with XAML: What .NET Developers Need to Know

Building Windows 8 Metro Style UIs

Enhancing the Windows 8 Experience in Metro-style Apps

Integrating with the Windows 8 Experiences

Bring Your Apps to Life with Tile and Notifications

How and When Metro Style Apps Run

Building Metro Style Apps that Take Advantage of Modern Hardware

The Developer Opportunity: Introducing the Windows Store

About this Video:

Michael Platt Introduce the Windows 8 Store and the Opportunity for the Developers.

]]>https://channel9.msdn.com/Blogs/bursteg/Part-5-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-5Windows 8 will change the way users interact with it, and it will change the way we developers think about it. In this session we'll talk about the key concepts and the business opportunities that Windows 8 provides! Join us on this special event with our guest speaker: Michael Platt, Senior Director in the Developer &amp; Platform Evangelism Group based in Redmond, Washington. Audience: Developers, Startups and entrepreneurs. Agenda of this Camp: Building Metro-style Apps for Windows 8 The Windows 8 Platform for Metro Style App Designing Apps with Metro Principles and the Windows Personality Everything Web Developers Must Know to Build Metro Style Apps Building Metro Style Apps with XAML: What .NET Developers Need to Know Building Windows 8 Metro Style UIs Enhancing the Windows 8 Experience in Metro-style Apps Integrating with the Windows 8 Experiences Bring Your Apps to Life with Tile and Notifications How and When Metro Style Apps Run Building Metro Style Apps that Take Advantage of Modern Hardware The Developer Opportunity: Introducing the Windows Store About this Video: Michael Platt Introduce the Windows 8 Store and the Opportunity for the Developers. 2631https://channel9.msdn.com/Blogs/bursteg/Part-5-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-5
Wed, 14 Mar 2012 08:49:52 GMThttps://channel9.msdn.com/Blogs/bursteg/Part-5-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-5burstegbursteg4https://channel9.msdn.com/Blogs/bursteg/Part-5-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-5/RSSXAMLWindows 8Microsoft Design StyleWindows User InterfaceWindows 8 Camp: Introduction to Building Metro Apps - using C#, XAML & WinRTWindows 8 will change the way users interact with it, and it will change the way we developers think about it. In this session we'll talk about the key concepts and the business opportunities that Windows 8 provides!

Join us on this special event with our guest speaker: Michael Platt, Senior Director in the Developer & Platform Evangelism Group based in Redmond, Washington.

Audience: Developers, Startups and entrepreneurs.

Agenda of this Camp:

Building Metro-style Apps for Windows 8

The Windows 8 Platform for Metro Style App

Designing Apps with Metro Principles and the Windows Personality

Everything Web Developers Must Know to Build Metro Style Apps

Building Metro Style Apps with XAML: What .NET Developers Need to Know

]]>https://channel9.msdn.com/Blogs/bursteg/Part-4-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-4Windows 8 will change the way users interact with it, and it will change the way we developers think about it. In this session we'll talk about the key concepts and the business opportunities that Windows 8 provides! Join us on this special event with our guest speaker: Michael Platt, Senior Director in the Developer &amp; Platform Evangelism Group based in Redmond, Washington. Audience: Developers, Startups and entrepreneurs. Agenda of this Camp: Building Metro-style Apps for Windows 8 The Windows 8 Platform for Metro Style App Designing Apps with Metro Principles and the Windows Personality Everything Web Developers Must Know to Build Metro Style Apps Building Metro Style Apps with XAML: What .NET Developers Need to Know Building Windows 8 Metro Style UIs Enhancing the Windows 8 Experience in Metro-style Apps Integrating with the Windows 8 Experiences Bring Your Apps to Life with Tile and Notifications How and When Metro Style Apps Run Building Metro Style Apps that Take Advantage of Modern Hardware The Developer Opportunity: Introducing the Windows Store About this Video: Michael Platt Explains how to develop Windows 8 Metro-style apps using C#, XAML &amp; WinRT 5077https://channel9.msdn.com/Blogs/bursteg/Part-4-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-4
Wed, 14 Mar 2012 08:49:42 GMThttps://channel9.msdn.com/Blogs/bursteg/Part-4-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-4burstegbursteg1https://channel9.msdn.com/Blogs/bursteg/Part-4-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-4/RSSXAMLWindows 8Microsoft Design StyleWindows User InterfaceWindows 8 Camp: Introduction to Building Metro Apps - Design a Metro-style appsWindows 8 will change the way users interact with it, and it will change the way we developers think about it. In this session we'll talk about the key concepts and the business opportunities that Windows 8 provides!

Join us on this special event with our guest speaker: Michael Platt, Senior Director in the Developer & Platform Evangelism Group based in Redmond, Washington.

Audience: Developers, Startups and entrepreneurs.

Agenda of this Camp:

Building Metro-style Apps for Windows 8

The Windows 8 Platform for Metro Style App

Designing Apps with Metro Principles and the Windows Personality

Everything Web Developers Must Know to Build Metro Style Apps

Building Metro Style Apps with XAML: What .NET Developers Need to Know

Building Windows 8 Metro Style UIs

Enhancing the Windows 8 Experience in Metro-style Apps

Integrating with the Windows 8 Experiences

Bring Your Apps to Life with Tile and Notifications

How and When Metro Style Apps Run

Building Metro Style Apps that Take Advantage of Modern Hardware

The Developer Opportunity: Introducing the Windows Store

About this Video:

Michael Platt Explains how to Design a Metro-style apps for Windows 8 using all the tools that the Windows 8 platform if offers to the developers.

]]>https://channel9.msdn.com/Blogs/bursteg/Part-3-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-3Windows 8 will change the way users interact with it, and it will change the way we developers think about it. In this session we'll talk about the key concepts and the business opportunities that Windows 8 provides! Join us on this special event with our guest speaker: Michael Platt, Senior Director in the Developer &amp; Platform Evangelism Group based in Redmond, Washington. Audience: Developers, Startups and entrepreneurs. Agenda of this Camp: Building Metro-style Apps for Windows 8 The Windows 8 Platform for Metro Style App Designing Apps with Metro Principles and the Windows Personality Everything Web Developers Must Know to Build Metro Style Apps Building Metro Style Apps with XAML: What .NET Developers Need to Know Building Windows 8 Metro Style UIs Enhancing the Windows 8 Experience in Metro-style Apps Integrating with the Windows 8 Experiences Bring Your Apps to Life with Tile and Notifications How and When Metro Style Apps Run Building Metro Style Apps that Take Advantage of Modern Hardware The Developer Opportunity: Introducing the Windows Store About this Video: Michael Platt Explains how to Design a Metro-style apps for Windows 8 using all the tools that the Windows 8 platform if offers to the developers. 4613https://channel9.msdn.com/Blogs/bursteg/Part-3-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-3
Wed, 14 Mar 2012 08:49:28 GMThttps://channel9.msdn.com/Blogs/bursteg/Part-3-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-3burstegbursteg1https://channel9.msdn.com/Blogs/bursteg/Part-3-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-3/RSSXAMLWindows 8Microsoft Design StyleWindows User InterfaceWindows 8 Camp: Introduction to Building Metro Apps - Windows 8 Platform for AppsWindows 8 will change the way users interact with it, and it will change the way we developers think about it. In this session we'll talk about the key concepts and the business opportunities that Windows 8 provides!

Join us on this special event with our guest speaker: Michael Platt, Senior Director in the Developer & Platform Evangelism Group based in Redmond, Washington.

Audience: Developers, Startups and entrepreneurs.

Agenda of this Camp:

Building Metro-style Apps for Windows 8

The Windows 8 Platform for Metro Style App

Designing Apps with Metro Principles and the Windows Personality

Everything Web Developers Must Know to Build Metro Style Apps

Building Metro Style Apps with XAML: What .NET Developers Need to Know

]]>https://channel9.msdn.com/Blogs/bursteg/Part-2-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-2Windows 8 will change the way users interact with it, and it will change the way we developers think about it. In this session we'll talk about the key concepts and the business opportunities that Windows 8 provides! Join us on this special event with our guest speaker: Michael Platt, Senior Director in the Developer &amp; Platform Evangelism Group based in Redmond, Washington. Audience: Developers, Startups and entrepreneurs. Agenda of this Camp: Building Metro-style Apps for Windows 8 The Windows 8 Platform for Metro Style App Designing Apps with Metro Principles and the Windows Personality Everything Web Developers Must Know to Build Metro Style Apps Building Metro Style Apps with XAML: What .NET Developers Need to Know Building Windows 8 Metro Style UIs Enhancing the Windows 8 Experience in Metro-style Apps Integrating with the Windows 8 Experiences Bring Your Apps to Life with Tile and Notifications How and When Metro Style Apps Run Building Metro Style Apps that Take Advantage of Modern Hardware The Developer Opportunity: Introducing the Windows Store About this Video: Michael Platt Introduce the Windows 8 Platform for Metro Style Apps Explains how to build Metro-style apps for Windows 8. 3487https://channel9.msdn.com/Blogs/bursteg/Part-2-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-2
Wed, 14 Mar 2012 08:49:14 GMThttps://channel9.msdn.com/Blogs/bursteg/Part-2-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-2burstegbursteg0https://channel9.msdn.com/Blogs/bursteg/Part-2-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-2/RSSXAMLWindows 8Microsoft Design StyleWindows User InterfaceWindows 8 Camp: Introduction to Building Metro Apps - Soluto Case StudyWindows 8 will change the way users interact with it, and it will change the way we developers think about it. In this session we'll talk about the key concepts and the business opportunities that Windows 8 provides!

Join us on this special event with our guest speaker: Michael Platt, Senior Director in the Developer & Platform Evangelism Group based in Redmond, Washington.

Audience: Developers, Startups and entrepreneurs.

Agenda of this Camp:

Building Metro-style Apps for Windows 8

The Windows 8 Platform for Metro Style App

Designing Apps with Metro Principles and the Windows Personality

Everything Web Developers Must Know to Build Metro Style Apps

Building Metro Style Apps with XAML: What .NET Developers Need to Know

Building Windows 8 Metro Style UIs

Enhancing the Windows 8 Experience in Metro-style Apps

Integrating with the Windows 8 Experiences

Bring Your Apps to Life with Tile and Notifications

How and When Metro Style Apps Run

Building Metro Style Apps that Take Advantage of Modern Hardware

The Developer Opportunity: Introducing the Windows Store

About this Video:

on this video you will meet Soluto, one of the most successful start-ups in Israel.Soluto is a service for people who help others with their PCs and their Metro-Style version of thier application is great example of what can be done with Windows 8 Platform.

]]>https://channel9.msdn.com/Blogs/bursteg/Part-1-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-1Windows 8 will change the way users interact with it, and it will change the way we developers think about it. In this session we'll talk about the key concepts and the business opportunities that Windows 8 provides! Join us on this special event with our guest speaker: Michael Platt, Senior Director in the Developer &amp; Platform Evangelism Group based in Redmond, Washington. Audience: Developers, Startups and entrepreneurs. Agenda of this Camp: Building Metro-style Apps for Windows 8 The Windows 8 Platform for Metro Style App Designing Apps with Metro Principles and the Windows Personality Everything Web Developers Must Know to Build Metro Style Apps Building Metro Style Apps with XAML: What .NET Developers Need to Know Building Windows 8 Metro Style UIs Enhancing the Windows 8 Experience in Metro-style Apps Integrating with the Windows 8 Experiences Bring Your Apps to Life with Tile and Notifications How and When Metro Style Apps Run Building Metro Style Apps that Take Advantage of Modern Hardware The Developer Opportunity: Introducing the Windows Store About this Video: on this video you will meet Soluto, one of the most successful start-ups in Israel.Soluto is a service for people who help others with their PCs and their Metro-Style version of thier application is great example of what can be done with Windows 8 Platform. 643https://channel9.msdn.com/Blogs/bursteg/Part-1-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-1
Wed, 14 Mar 2012 08:48:51 GMThttps://channel9.msdn.com/Blogs/bursteg/Part-1-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-1burstegbursteg0https://channel9.msdn.com/Blogs/bursteg/Part-1-Windows-8-Camp-Introduction-to-Building-Metro-Apps-Part-1/RSSXAMLWindows 8Microsoft Design StyleWindows User InterfaceDesign Day - del 3 Think Sketch Wireframe PrototypeDesign Day Stockholm 18 november 2011Del 3 med Arturo Toledo