Fine-Tuning of Windows 8

An great session at the Build 2014 conference was about traps with the user interface design: "It's a trap! 3 remarkably common UI traps and how to avoid them in your designs". What's intuitive? There's no such a thing, it's only learned .vs. not yet learned. A one year old is learning to move objects. So the Microsoft design principle Authentically digital to take full advantage of the digital medium and remove physical boundaries are perfect. However, there are traps like "invisible elements". They are good for features like shortcuts for power users, but dangerous for critical features in the system. Remember search from Windows 8 and how it moved into the SearchBox of the app with Windows 8.1? Similar issues happened with search in Windows Phone and Xbox. Now I have to find out how users find share and and play to within my Picture Search app ;-)

This blog post is about Windows 8.+ features coming in Windows 8 Update, what's coming to Windows Store apps, and more.

UI Tuning

The upcoming releases to Windows 8 have some fine-tuning of Windows 8 features to make it more accessible. Windows 7 had some fine-tuning of Windows Vista to make good concepts like UAC (user account control) easier to use.

Windows 8 Update stays on this path. The turn off/shutdown button moved to the start screen. It can now be found easily, it's no longer necessary to click on the Start button as we learned with Windows 95, and it's not necessary to open the Charms bar as we learned with Windows 8. To click on the User name to sign out should be more easily detectable as well. Closing Windows store apps you no longer need to find out about the gesture with the move from top to bottom, just click the close button on top of the app. Of course for a power user, these features are not helpful, as how this could be done was already learned. However, what's great for power users as well is that Windows Store apps are listed in the task bar. You just need to find the setting Show Windows Store apps on the taskbar.

ShowAppsinTaskbar

The next version of Windows will also have the start menu back that contains tiles for Windows Store apps. Not sure if users could be happy with the start screen by that time anyway. With this version it will also be possible that Windows Store apps are running within a Window on the desktop. This way I can not only open three apps, but a huge number of apps on my big screen.

By the way, an easy way how to find out what users are doing with the app and what features of the app they do or do not find is by using Application Insights.  

Universal Apps

A great feature of the Visual Studio 2013 Update 2 are the Universal Apps templates. Having a more detailed look here, code sharing between projects could easily be done with earlier edtions of Visual Studio as well. Creating file links for code sharing is already described in my book Professional C# 5.0 and .NET 4.5.1, and Universal Apps are not part of the book. The really great feature is that Windows Phone Apps make use of the same Windows runtime like Windows Store apps, and the XAML code is very similar. More C# code and XAML code sharing between these platforms! It's interesting how the appbar switches automatically between the larger and smaller screen sizes for a tablet and the phone.

The Xbox One will be added to Universal Apps as well. Why this wasn't named "One App Model" instead of "Universal Apps" - I have no idea. Anyway, I like the name "Universal Apps" :-)

Windows Phone Silverlight 8.1 is the legacy version of Windows Phone programming. Instead of moving to the new model, the Windows runtime can be used from Silverlight phone apps as well!

Windows Store Business Apps

A great feature demonstrated by calling ADO.NET from Windows Store apps is the broker that allows calling into the complete .NET Framework. Of course, this is not allowed from apps in the Windows Store. This can be used for sideloading apps. This feature gives an easy way to use code from older applications such as Windows Forms applications, and give them a new UI.

What needs to be solved here is the licensing model for sideloading, the requirement of either the Enterprise editon or buying of sideloading rights for every device. Wait - this is solved as well! Enterprise Sideloading rights is granted to certain Volume License programs at no additional costs (starting in May-2014), and every customer can purchase Enterprise Sideloading rights for an unlimited number of devices for just $100,-. More information here in Windows for Business.

Sideloading rights together with using the complete .NET framework should create more interest for businesses developing Windows Store apps.

Summary

Windows 8 is on the way to make it easier for users to find features, both for touch and using keyboard and mouse. Windows 8.1 Update adds a lot for usability with keyboard and mouse.

With the application model, Windows Store apps, Windows Phone apps, and Xbox One are coming together. Using the same Windows Runtime, the same XAML. This move was expected, and makes steps into the right direction.

Many companies moved not to long ago to Windows 7. With this late update from Windows XP, creating Windows Store apps was not an option anyway. Because of the need to rewrite the code completely, and expensive licensing models depending on the company size, not a single thought was made about this. Now, as time progressed, the Windows Runtime is available in its second version with Windows 8.1, sideloading constraints removed, and it's even possible to use the complete .NET Framework from sideloaded apps, creating Windows Store business apps should get another thought.

Christian

CN innovation

 

New Love for .NET and C#

At the Build 2014 conference, Microsoft showed new love for .NET. This blog post shows how Microsoft's love reveals.

WP_20140403_07_28_04_Pro

.NET Compiler Platform

The biggest thing for .NET is the .NET Compiler Platform ("Roslyn"). In development since the year 2009, Roslyn is nearing completion and has a new preview available.

Both C# and Visual Basic compilers are rebuilt using this compiler platform. What is the advantage of rebuilding the compiler when there are already working ones that have been implemented with native code?

For the Microsoft teams, this platform gives a clean architecture to evolve on. It's a lot easier to add features to C# and Visual Basic. Implementing a new features for these two languages doesn't mean the effort duplicated for every language, it can be done with just 1.2x instead of 2x. The effort to implementing new language features is a lot less compared to the older native C# compiler, as can be seen in the number of new features for C#.

For partners, it is a lot easier to create source-based tools and extensions for Visual Studio. Xamarin will use the .NET Compiler Platform in an upcoming edition. I also bet, tools like ReSharper will make use of this platform to create new features.

For developers, the .NET Compiler Platform gives a richer C# IDE experience. Coming with the preview you can already see smarter refactoring features. More to come :-)

Anders Hejlsberg demonstrated just three small changes in the code base for defining a new string literal. As the .NET Compiler Platform is open source, changes could be done by everyone. I just don't expect many to do their own C#. However using the .NET Compiler Platform it is easy to define guidelines for code styling, and easy allow for automatic code changes with preview of the changes shown.

Dustin Campbell demonstrated how easy it is to use the .NET Compiler Platform SDK to create a guideline for requiring braces with the block of if and else statements.

The preview can be downloaded from Microsoft Connect after registration.

.NET Foundation

The .NET Foundation was announced for faster open development and collaboration around many open source technologies for .NET. Among the projects in the foundation are the .NET Compiler Platform, ASP.NET MVC, ASP.NET Web API, Composition (MEF), ASP.NET SignarlR, Entity Framework, Rx (Reactive Extensions), Windows Azure .NET SDK, and also third party libraries such as Xamarin.Mobile, Xamarin.Auth, Couchbase for .NET, .NET Map Reduce API for Hadoop...

C# 6

Let's get into the history of C#. C# 2.0 offered generics with the language. C# 3 added LINQ and all the language features needed for LINQ such as Lambda expressions, type inference, anonymous types, and others. The theme of C# 4 was dynamic to make an easier integration with scripting languages and COM, offering the dynamic keyword, optional and named parameters. C# 5 was about async programming, just offering two new language keywords async and await. However, these small keywords again changed programming dramatically.

C# 6 is not about such a big change like generics, LINQ, or dynamic. However, it has many changes. With the .NET Compiler Platform, it is a lot easier to create new features. Thus many things that needed to wait with previous editions can be done now. Among the things that were shown at Build are primary constructors, declaration expressions, and indexed members.

Creating immutable types was always possible with .NET, but we had to write a lot of code. With the new language features, creating such types is possible reducing the code a lot.

New JIT Compiler, .NET Native

RyuJIT is a new JIT compiler for the .NET runtime. This compiler is a lot faster than the one now part of .NET. Rujit CTP 3 is available now. This version supports SIMD instructions (running the same operation on multiple data points simultaneously.

It gets even faster with .NET Native. 60% faster startup for Windows Store apps, and much smaller memory footprint. This product consists from a .NET Native compiler that makes use of a VC++ compiler backend and the .NET Native runtime (refactored and optimized CLR).

With Windows Store apps, it is still possible to upload MSIL app packages to the store. Later on the compiler in the cloud compiles the app in the store that is compiled for ARM and x64 architectures. x86 will follow.

Using this compiler also has the advantage that the compiler creates just one file containing native code for all libraries. Using IL code tools to analyze this code is no longer possible, it's native code.

Not only this, this compiler also creates just one file containing native code for all the libraries. Currently this native compiler is only available for Windows Store apps, but other technologies will follow.

Apps such as Wordament and Fresh Paint already make use of .NET Native and see great improvements.

Summary

With these developments I'm seeing really big steps forward with .NET. With many of these technologies it's just the beginning. For example, I can imagine big improvements in upcoming tools based on the .NET Compiler Platform. And then don't forget the new C# language features, .NET Native, RyuJIT, and the huge open source progress going on.

Another big thing for .NET are Universal Apps that I talk about in another blog post.

Christian

CN innovation

 

A Happy New Year 2014!

1987..2013..2014

Years with 4 different digits :-)

Dreamstime_s_35588139_happy2014

In the year 2013 the first blog of the year was about

  • Many new Windows Store apps
    • Yes, there are many more Windows Store apps. Probably some you are wishing for are not here, yet. Probably others don't have the same features as on other platforms. But definitely, there are many more Windows Store apps! Which one are you missing?
  • Faster updates for Windows, Windows Phone, Visual Studio
    • Yes, updates are coming a lot faster. We have Windows 8.1, Visual Studio 2013 (there have been 4 updates for Visual Studio 2012), and more updates are on the way.
  • C++11 and TypeScript
    • Yes, C++ is active again. C++11 brought great new features. Now, C++14 is on its way for some more changes. TypeScript reached the Beta stage on 5-Dec-2013 (Version 0.9.5). It's nearing the first release.

What I'm expecting from 2014?

Of course it's out of question that cloud usage will increase, and it will become the norm to create apps for mobile devices first. However, here I would like to take a look at some specific Microsoft technologies.

C# 6

Mads Toergesen already talked about the Future of C#. At the NDC London conference he introduced some great features of the upcoming C# language. With Roslyn in the home stretch, it should become easier to add language features. C# 6 doesn't seem to have a feature as big as generics, LINQ or async, but many smaller ones that come very handy, such as

  • Primary Constructors
  • Readonly auto properties
  • Exception filters
  • Static type using statements
  • Property Expressions
  • Method Expressions
  • Params for enumerables
  • Monadic null checking
  • Constructor type parameter inference
  • Inline declarations for out params

It's not clear yet what and when it's really coming. But for sure there are some great C# enhancements in the time to come. A list of these extensions with comparisions how to write code today is described in the blog post of DaminG. Mads Torgersen himself gives some great information about C# and Roslyn at .NET Rocks.

M#, Between C++ and C#

Let's continue with C#. There are other talks about a new language (code name M#) that is based on C#. It just sits between C++ and C#: C# for Systems Programming with safety and productivity similar to C# and performance like C++. Joe Duffy has a blog post of this new language and its goals. Some highlights:

  • Aggresively stack allocate objects, deterministically destruct...
  • Elements of C++ const (with safety), immutability, isolation
  • Async programming at scale
  • Type-safe system programming, easily carve out sub-arrays and sub-strings without allocating
  • Modern error model with fail-fast as the default prolicy, exceptions for rare dynamic failure, typed exceptions only when rich exceptions are needed 

Project Midori

The language M# was developed together with the operating system Midori. First from Microsoft Research, it was quiet for some years now around this new operating system. Now Mary Jo Foley has some information about Midori. If parts of it can be found in the next Windows system, or it takes a completely different roadmap, it's interesting in any case.

Microsoft "Mod"

Mary Jo also writes about Microsoft Mod as Microsoft applies for a trademark. I'm not sure about this name (does it really sound good in your language?), and as Mary mentions, "Microsoft applies for many trademarks it never ends up using commercially or publicly". However, it's interesting what's behind this, and there's already an ongoing discussion about Office as Windows Store apps. Of course, Microsoft Office is available on Windows RT as a desktop application. OneNote is already available as a Windows Store app, and it's great, using it a lot. I'm expecting other parts of Office to be available as Windows Store apps as well.

Microsoft Project Siena

A Microsoft Windows Store app that is already available in the store is Microsoft Project Siena. This allows easily creating Windows Store apps. Is this the new Visual Basic? This app shows some more ways what's all possible with Windows Store apps. I'll try to create a real app using data offered by the Menu Card app very soon.

Windows Azure

The Menu Card app just mentioned makes use of several Windows Azure features: Mobile Services, SQL Azure, Storage, and the source code is managed with Visual Studio Online. The least year many new features were added to Windows Azure. I expect enhancements in a similar fast pace in 2014. Waiting for some cool new features with Mobile Services :-)

Build Windows

Let's see what new things we'll see at Build 2014 in San Francisco, the annoucement from Steve Guggenheimer mentions news about Windows, Windows Phone, Windows Azure, Windows Server, Visual Studio and much more :-) 

 

With all this to come

 

I wish you all

A Happy New Year 2014!

Live long and prosper!

Christian

 

Bye, bye 2013

2013 was a interesting year. I'm just doing the last corretions for an update of my most important Wrox book: Professional C# 5 and .NET 4.5.1. This edition includes updates for the Windows Runtime 2 (Windows Store apps with Windows 8.1), Entity Framework 6, ASP.NET Web API 2, and more.

What have been my other important activities in 2013? This blog post is about conferences, workshops, Windows Store apps, and more :-)

Conferences: after several years I had a talk again at TechEd - in New Orleans and in Madrid - speaking about Tiles, Toasts, and Notifications with Windows Store apps. Other conferences I've been engaged with: Basta! in Darmstadt and Mainz, and Microsoft Big Day and Advanced Developers Conference in Vienna talking about C# Async, Windows Store Apps, WPF 4.5, Entity Framework 6...

Customer workshops and coaching mainly have been about C#, WPF, ASP.NET MVC, Entity Framework, Parallel Programming, HTML5, Web API, Windows Azure, and Windows Store Apps.

I've some new apps in the Windows Store. My first Windows Store app was already released in 2012: Kantine. This app shows the menus and information about the restaurant www.kantine.at in Vienna. It's only available in Austria, but in 2014 it will be available in other markets as well. Tourists might be interested in information about the restaurant as well.

A complete new app is the Menu Card app. This app - currently available in Austria, Germany, and Switzerland, helps restaurants to create their menu cards, and use a JSON service to directly integrate them with a Website. The Kantine app will use a JSON feed created from the Menu Card app in the next version.

Menucardpromo

Picture Search that not only allows searching for pictures but also showing them endlessly full-screen (also with PlayTo to the X-Box), got a major update for Windows 8.1. This app is available worldwide. As searches with this app increase, I'm hoping to have the costs for Bing searches covered by the ads, or by users switching to the paid version of this app. Let's see... Having the ads in the app at least helped understanding users still don't find the appbar. This influenced the UI of the latest update that is just available in the store.

  Picture Search 1

Hardware: I'm happy with my Surface 2 and Surface Pro. The Surface 2 replaced my Surface RT. I'm usually using this device without a keyboard (although a touch cover is attached, but this is mainly used instead of a sleeve). The Surface Pro usually is connected to multiple monitors, external keyboards and mouse. When I'm in the hotel, multiple monitors are connected as well. In the hotel just the size of the external monitor is smaller. I'm running Visual Studio 2013 on the Surface Pro to develop all kind of different apps. I still need to get a new Surface Pro 2 in 2014. I'm waiting for the edition with 8 GB memory that is not yet available in Austria.

The next blog article will be about 2014. See you there :-)

Christian 

 

Picture Search v2

Picture Search is updated for Windows 8.1. This app makes use of Bing to search for images. Images found can be shared, and shown in a slide show.

PromotionalImage414x180

One change of the new version is obvious with Windows 8.1: instead of using the search contract, this version makes use of a search box in the main screen:

01_Start

Other than that, there are more small changes like doing full-screen picture shows, The picture show can be continuous repeated (I was in need for this using Picture Search at a conference booth), a way to delete pictures (to exclude them from the picture show), a new main screen layout, geolocation for searches...

You can also send the picture show with PlayTo to the XBox. This feature will be more detectable in future versions. The secret here: just open Devices on the Charms bar, click Play, and connect it to another device.

Using Bing from apps is free only for the first 5000 searches. What I tried with the first version of this app was to allow users to enter their own Bing id within the app. This would give 5000 searches/month for every user. However, the need to register with Bing is a task that is too complex, so I need a different way to cover my cost.

In this version I'm allowing more free searches than with previous app releases. I've added ads to the app. Depending on the results with this, the number of free searches can be reduced or increased in future versions. Of course you can get rid of the ads by changing to a paid version with monthly, quarterly, and yearly packages.

Now let's start the search with Picture Search:

04_Searchresult

Appbar

And here is the link to Picture Search:

http://apps.microsoft.com/windows/app/picture-search/38bafc19-cb44-4622-8e1c-0b463eb0c802

Christian

CN innovation

Grouping with the GridView Control - Windows Store Apps (XAML)

Representing data within Windows Store apps, grouping the data often is a very useful and appealing option. Visual Studio also offers a ready to use template to display grouped data by using the GridView control. Other than the default look that's given by the Visual Studio template, there are nearly endless possibilities. This article gives information on the templates of the GridView control and how they can be used to change the look of grouping data.

The Visual Studio template for the Grid app looks like this:

Grouping1

Another look using grouping is shown here:

MenuCardGrouping

With the MenuCard app (soon in the Windows Store), a list of menu items is grouped by a number of elements (6 or 8, depending on the screen size), and every group is shown in two columns.

Let's get into the source code. 

With the code generated from the Visual Studio template, the data is represented with a group and an item object. The group type SampleDataGroup is shown in the following code snippet. This type contains simple properties, and the property Items of type ObservableCollection<SampleDataItem>. The Items property leads to the items of the group.

Source Code: SampleDataGroup

The items are defined the type SampleDataItem. This type just consists of simple properties.

Source Code: SampleDataItem

From within XAML, the data is referenced via the CollectionViewSource. The Source property binds to the Groups property. Groups is a property of the SampleDataSource class that returns an observable collection of SampleDataGroup. Within a single group, the items of a group are referenced via the ItemsPath property of the CollectionViewSource. This is the Items property of the SampleDataGroup. To allow grouping, the IsSourceGrouped property is set to true.

Source Code: CollectionViewSource

The GridView binds to the CollectionViewSource with the setting of the ItemsSource property. Here is the complete definition of the GridView as it is created from the Visual Studio template.

Source Code: GridView

Maybe the most important part is the definition of the ItemTemplate. This template binds to properties of the SampleDataItem type.

Source Code: ItemTemplate

Item Template

Now let's change this template. Here' the size is changed, and a TextBlock element is added that bounds to the Description property.

Source Code: changed ItemTemplate

This change results in a different look:

Grouping2

Now it looks like with the larger templates, there's only one row of items. However, this depends on the screen resolution and scale as is shown here on a display with a lower scale:

  Grouping3

 Let's move on to another template, the HeaderTemplate.

Header Template

The header template that is defined with the group style defines how the header of the group should look like. The Visual Studio template generated code consists of a button with the title of the group, and the Chevron character. The button is used to navigate to another page of the app.

Source Code: HeaderTemplate

With a small change, the subtitle is shown as well.

Source Code: modified HeaderTemplate

Grouping4

For all the upcoming changes, the size of the item template is modified to a width of 240, and a height of 150. This allows to see multiple groups on a single screen.

Items Panel Template

The items panel is the panel for all the items - all the groups. To easily see the arrangement of the items panel, the background color is changed.

Source Code: ItemsPanel

Grouping5

As clearly can be seen, the ItemsPanel is the panel for all items across all groups. For arranging of the items, an ItemsWrapGrid is used. This panel arranges the items from left to right or top to bottom.

The ItemsWrapGrid supports grouping. The already defined GroupPadding property specifies the padding values between the groups. It's also possible to move the group header to the left instead of top with the GroupHeaderPlacement property.

By default, the items are arranged vertially from top to bottom. As soon, as the avaialble size is reached, the next column is started. This behavior can be changed by setting the Orientation property.

With the following screenshot, the background color is removed, the Orientation property set to Horizontal, and the MaximumRowsOrColumns set to 5 to only allow 5 elements in one row.

Grouping6

The ItemsPanel can specify any panel as its children, e.g. StackPanel, VirtualizingStackPanel, and VariableSizedWrapGrid. However, if grouping is used, not all the panels support grouping. Panels with grouping options are ItemsStackPanel and ItemsWrapGrid.

Summary

Item Template, Header Template, and Items Panel Template are important templates shown to arrange grouping with the GridView. The Header Template to define the header of the groups as it is specified with the Group Style, the Items Panel Template arranges all the items, and the Item Template defines the look of every item. This allows a lot of customization grouping the grid.

Christian

More information on programming Windows Store apps in my workshop and the book Professional C# 2012 and .NET 4.5.

Showing Progress, Changing State

Deutsche Version des Artikels

With Windows Store apps I often call into services (nowadays mostly Windows Azure Mobile Services). It can take some time until a response is there, and the user should be informed to be waiting. With the ProgressBar and the ProgressRing controls, it's easy to inform the user. Often the "in-progress" state is not only used just to inform about a lengthy progress, but the look of other controls is changed as well. Also, the in-progress mode is not the only different state from the normal state, I'm also using other states such as "edit mode" and "read mode".

Defining such states, the states can be changed using the VisualStateManager class. In this blog article, I show you how to use this.

Image © Petr Balik 
Dreamstime.com

First, the ProgressBar is defined. This element is set to not visible. The ProgressBar will only be visible with a state change.

<ProgressBar x:Name="progressBar" IsIndeterminate="True" Visibility="Collapsed" HorizontalAlignment="Stretch" />

During progress, the state should be changed to "in progress", and after the lengthy operation is finished, the state should be changed back. To not forget about changing the state back, and for having strongly typed states, I've written the helper class VisualStateModeChanger. In the Page itself, I define an enumeration of the Page-States, for example,

private enum Page Mode

{

  NormalMode,

  SelectionMode,

  EditMode,

  ProgressMode,

  SelectionMode

}

In the constructor of the Page class I create an instance of the Visual Mode Changer State is generated to the enum and the Page instance:

this.pageModeChanger = new VisualStateModeChanger<PageMode>(this);

 

In the event handler, the state now can be simply changed. The VisualStateModeChanger here starts with the ProgressMode and changes after the service call is completed with a call to the Dispose method to the NormalMode:

using (this.pageModeChanger.GotoStateFromTo (PageMode.ProgressMode, PageMode.NormalMode))

{

  // Make the async call to the service ...

}

Now we need not implement the VisualStateModeChanger. GoToState goes directly to another State, GoToStateFromTo starts with the fromState and changes to the toState on disposing of the object.

public class VisualStateModeChanger<T>

  where T: struct

{

  private Control control;

  private T currentMode;

  public VisualStateModeChanger(Control control)

  {

    this control = control.;

  }

  public void GoToState(T newState)

  {

    VisualStateManager.GoToState(control, Enum.GetName(typeof(T), newState) useTransitions: true );

    currentMode = newState;

  }

  public IDisposable GotoStateFromTo(T fromState, T toState)

  {

    VisualStateManager.GoToState(control, Enum.GetName(typeof(T), fromState), useTransitions: true );

    return new VisualStateDisposer T (control, toState);

  }

  public T Current Mode

  {

    get

    {

      return current mode;

    }

  }

  private class VisualStateDisposer<T1> : IDisposable

    where T1 : struct

  {

    private Control control;

    private T1 endState;

    public VisualStateDisposer(Control control, T1 endState)

    {

      this control = control.;

      this endState = endState.;

    }

    public void Dispose ()

    {

      VisualStateManager.GoToState(control, Enum.GetName(typeof(T1), endState), useTransitions: true );

    }

  }

}

Now we only need to define in XAML what happens when state changes. In this example, the progressBar is converted to be set Visible.

<VisualStateManager.VisualStateGroups>

  <VisualStateGroup x:Name="CustomStates">

    <VisualState x:Name="ProgressMode">

      <Storyboard>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="progressBar">

          <DiscreteObjectKeyFrame KeyTime="0">

            <DiscreteObjectKeyFrame.Value>

              <Visibility>Visible</Visibility>

            </DiscreteObjectKeyFrame.Value>

          </DiscreteObjectKeyFrame>

        </ObjectAnimationUsingKeyFrames>

      </Storyboard>

    </VisualState>

What happens when the state changes, Visual Studio Blend is a lot of help. This tool allows not only to define visual states, but also animations within the state changes.

Christian

CN innovation

More information about programming Windows Store Apps in my workshops and in my book Professional C# 2012 and .NET 4.5.

 

Using the Windows Store App WebView Control with CSS

With Windows 8.1 a major update of the WebView control is available. The updates make the control usable with many different scenarios.

In one project I'm using the WebView control to dynamically get HTML content via a string from a Web service, and make use of a CSS style sheet file that is stored with the Windows Store app.

Loading HTML content from a string can now be done by calling the method NavigateToString:

string htmlContent = service.GetHtml();
webView1.NavigateToString(htmlContent);

Referencing the style sheet that is stored with the Windows Store app is done via the ms-appx-web prefix with the link to the style sheet. The WebView control doesn't support ms-appx, but ms-appx-web is possible:

<link href="ms-appx-web:///css/Styles.css" rel="stylesheet" />

Christian

http://www.cninnovation.com

Associating Windows Store Apps with Websites

How to make a Windows App findable? If there’s already a Website that is known, it is easy to associate this site with the app. Users can find the app easily by opening the Website. A requirement for this is using IE in the new modern mode, and adding two meta elements to the Website.

This article shows what’s needed to associate a Windows Store app with a Website, and what’s the result.

The Website http://www.kantine.at already uses these meta elements. If you open this page with IE 10, you’ll have a direct link to the Kantine App.

Deutschsprachige Version dieses Artikels

For all my friends outside of Austria, the Kantine app currently is only available in the Austrian marketplace. You can use http://www.bing.com for showing these features as well.

KantineWebsite_thumb[1]

Internet Explorer offers buttons to Refresh and Pin the website, Page Tools, and Forward. The Forward button only becomes active if the Back button was clicked before, or with the Flip Ahead feature turned on. The Page Tools allow to switch the browser in the desktop mode, and find content within the page.

NotAssociated_thumb

If the Website is associated with a Windows Store app, the Page Tools button receives an additional plus sign:

Associated_thumb

Clicking this button if the app is not installed yet, a menu is opened with the new entry Get app for this site:

AssociatedOpen_thumb[1]

Clicking this menu entry directly opens the page of the app in the store:

Store_thumb[4]

If the app is already installed, the menu entry is replaced with Switch to Kantine app, and clicking this menu the app is started:

image

All this is possible just by adding two meta elements within the HTML head element: msApplication-ID and msApplication-PackageFamily:

<meta name="msApplication-ID" content="App" />
<meta name="msApplication-PackageFamilyName" content="CNelements.Kantine_x1ms6s50zdxze" />

You can get the values for these elements directly from the package manifest of the application. msApplication-ID is the ID of the application that is found using the XML editor. The Application element is child element of the Applications element. Get the value of the Id attribute. The value for msApplication-PackageFamilyName can be read using the manifest editor, Packaging Tab:

VStudio_thumb[1]

Summary

Just by using two meta elements it’s becoming easier to find your Windows Store app. Maybe it will take some time before users find this AppBar button in IE. As soon as the user finds this information, it works the same with all the associated Web sites. In any case, it just takes two meta elements for this feature.

Christian

CN innovation

More information about this feature in the IE Blog: http://blogs.msdn.com/b/ie/archive/2011/10/20/connect-your-web-site-to-your-windows-8-app.aspx

More info's to Windows Store apps in my workshops and in the book Professional C# and .NET 4.5.