Windows Store Apps with XAML or HTML?

Writing Windows Store apps for Windows 8 can be done with C# or C++ and XAML, or with JavaScript and HTML. What is the best option to do this?

In reality, the choice usually isn’t that hard. If you already have a rich client application that was done with XAML and C# (WPF), and a subset of this functionality should be offered for Windows Store apps, the easiest option to do this is to choose XAML and C#. You can build up on your knowledge on developing with C# and XAML. And it’s also possible to share code between desktop apps with WPF and Windows Store apps by using the Portable Class Library. With this project type you can select the frameworks that should be supported, e.g. .NET 4.5, Windows Phone 8, and .NET for Windows Store apps:

image

Of course the design of the WPF app needs to be changed to fulfill the new Microsoft Design guidelines, and to integrate with the charms bar, put commands into the app bar, and more.

In case you’ve an existing Web application that was done with HTML and JavaScript, and this should be enhanced with features for Windows Store apps, the choice will be using HTML and JavaScript for the Windows Store app.

You cannot do everything directly from JavaScript that can be done from .NET. With most apps you may not see the differences, just if you do something special such as using advanced printer features such as selecting another tray or automatically stapling. On the other side, using JavaScript has some other advantages such as easy CSS3 styling for documents, or more out-of-the-box controls such as flyout, rating, or date selection.

You can also write some C# or C++ code to use it from JavaScript by creating a Windows Runtime component. Such a library can be used by JavaScript, C#, and C++ apps. Just don’t use this library if the technologies you build upon are just .NET based. With Windows Runtime components you’re restricted to public sealed types, and types defined by the Windows runtime. If you are just using .NET technologies, you’re much better with the portable class library.

And of course, if you have a C++ desktop application, you can take the knowledge to write C++ apps for the Windows Store. XAML is now a great offer for C++ as well.

To summarize, you can utilize knowledge and code if you’ve an existing C# desktop application to create a Windows Store app with XAML and C#, and extending Websites that offer HTML and JavaScript can make use of Windows Store apps with HTML and JavaScript. Of course if you’ve already a rich app with JavaScript, the choice for the Windows Store app would be JavaScript as well.

Christian

CN innovation


Deep Dive Windows Store Apps in Wien

Im Rahmen der BASTA! Austria mache ich am 21. November einen kompletten Tag Windows 8 Deep Dive. In 4 Sessions geht es durch die Entwicklung einer kompletten Windows Store App. Es startet mit dem UI, geht weiter mit Daten inkl. Zugriff auf Windows Azure, Kommunikation mit anderen Applikationen, und schließlich Notification der User:

Layout Challenges mit Windows Store Apps und CSS

Die Silhouette definiert die Positionen für den Titel und Content einer Windows Store App. Das ist aber mal der einfache Teil. Es stellt sich noch die Frage der Navigations- und Command-Struktur. Diese Session behandelt verschiedene Windows Store App Patterns und ihre Implementierungen mit CSS Grid, Flexbox, Regions, Hierarchische und Flat Strukturen, Semantic Zoom und vieles mehr was das Layout von Windows Store Apps betrifft.

Daten! Daten! Daten!

Der Content ist das wichtigste für Windows Store Apps - doch was passiert mit dem Content? Anzeige und Ändern von Texten, Fotos bringen Leben in Windows Store Apps. Diese Session zeigt APIs der Windows Runtime um Daten von Windows Azure abzuholen und lokal zu speichern, sowie optimale Möglichkeiten diese Daten dem User mit Hilfe verschiedener WinRT Controls und Templates anzuzeigen, zu filtern, zu sortieren, als auch Änderungen vom User im Service zu übernehmen

Mehrwert mit Contracts

Windows Store Apps werden wertvoller wenn sie nicht für sich alleine stehen, sondern im Zusammenspiel verwendet werden können. Wie wäre es von der Applikation gleich ein Email zu verschicken, oder Fotos einer anderen Applikation zu übernehmen? Oder eigene Datentypen zu definieren die von Applikationen ausgetauscht werden können? Diese Session behandelt Windows Store Contracts wie Sharing und Search, und deren Implementierung.

Tiles, Toasts und Notification

Der erste Eindruck der User einer Windows Store App ist die Kachel (Tile). Diese kann weit mehr als nur ein Icon zeigen und sollte die Aufmerksamkeit des Users gewinnen. Aktuelle Informationen können Zeitgesteuert, aber auch über Push Notifications angezeigt werden. Auch wenn Tiles gerade nicht sichtbar sind, sind Benachrichtigungen mit Hilfe von Toasts möglich. Der User bleibt dabei aber in Kontrolle. Diese Session zeigt die Implementierung von Tiles, Secondary Tiles, Badges, und Toasts, deren Möglichkeiten und Einschränkungen, und die Implementierung in Apps.

 

See you there!

Christian

CN innovation


Calling WinRT from Windows Desktop Apps

The .NET Framework is an API that can be used from server applications, Windows desktop applications, and is available for Windows Store apps. For Windows Store apps just a subset of the framework is available. The Windows Runtime (WinRT) is an API for Windows Store apps. However, some parts of it cannot be used from Windows Store apps, only from Windows desktop apps. The Visual Studio 2012 templates doesn’t give you a direct way to reference this runtime. This article shows how this can be done.

WinRT APIs

Some of the APIs from the Windows Runtime (WinRT) cannot be called from Windows Store apps, they are only available for Windows desktop apps. The documentation of the PackageManager class (namespace Windows.Management.Deployment) shows that this API is only available for desktop apps.

image

References with Windows Store Apps

Creating a Windows Store C# project, the Reference Manager shows a Windows category along with Assemblies, Solution, and Browse:

image

References with Windows Desktop Apps

Creating a desktop application, the Reference Manager lists Assemblies, Solution, COM, and Browse. The Windows category is missing.

image

The way how to add the missing Windows category cannot be found easily. I found it by comparing the project file of a Windows store application with the project file of a console application and found this missing TargetPlatformVersion element that needs to be defined within the PropertyGroup element.

    <TargetPlatformVersion>8.0</TargetPlatformVersion>

This element can be easily added from within Visual Studio by selecting the project in Solution Explorer, using the context menu Unload Project which gives a new context menu to edit the project file.

With the RTM version of Windows Store project templates, this element is no longer used. Maybe the project type GUIDs make the difference now. However, using the TargetPlatformVersion element is documented in the MSDN library. See Windows tab –> Extension Subgroup for more information.

With this change, the Windows tab is available in the Reference Manager:

image

There’s still something missing. Compiling code including the WinRT API gives clear errors that the System.Runtime assembly is missing. This assembly needs to be referenced. This assembly is not in the default list of assemblies in the Reference Manager, but you can browse for it in the directory C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.5\Facades, or add it directly to the project file.

image

Now the PackageManager from the Windows.Management.Deployment namespace together with the Package class from the Windows.ApplicationModel namespace can be used to show information about installed Windows Store apps.

      var pm = new PackageManager();
      IEnumerable<Package> packages = pm.FindPackages();
      foreach (var package in packages)
      {
        try
        {
          Console.WriteLine("Architecture: {0}", package.Id.Architecture.ToString());
          Console.WriteLine("Family: {0}", package.Id.FamilyName);
          Console.WriteLine("Full name: {0}", package.Id.FullName);
          Console.WriteLine("Name: {0}", package.Id.Name);
          Console.WriteLine("Publisher: {0}", package.Id.Publisher);
          Console.WriteLine("Publisher Id: {0}", package.Id.PublisherId);
          if (package.InstalledLocation != null)
            Console.WriteLine(package.InstalledLocation.Path);
          Console.WriteLine();
        }
        catch (FileNotFoundException ex)
        {
          Console.WriteLine("{0}, file: {1}", ex.Message, ex.FileName);
        }
      }

Thís API also requires administrative privileges, that’s why I’m adding an application manifest file to the project setting the level attribute of the requestedExecutionLevel element to requireAdministrator.

    <trustInfo xmlns="urn:schemas-microsoft-com:asm.v2">
      <security>
        <requestedPrivileges xmlns="urn:schemas-microsoft-com:asm.v3">
          <requestedExecutionLevel level="requireAdministrator" uiAccess="false" />
        </requestedPrivileges>
      </security>
    </trustInfo>

Now the application runs successfully showing installed Windows Store apps.

More information about the Windows Runtime can be found in my new book Professional C# 2012, and of course in my workshops.

Christian

CN innovation


Configure Windows Live Writer Drafts Folder with SkyDrive

This blog post is how to configure Windows Live Writer to save the draft posts in the SkyDrive folder.

image

 

I’m using multiple systems in my normal work. If I ‘m working on a document on one system, I want to work on it on the other system as well. The data needs to be synchronized. This is the same with Windows Live Writer. Sometimes I start writing several blog posts, continue working on it, and publishing it on other days.

If I just would work on one system, I would like to synchronize the data as well. This makes new installations a lot easier, as the data comes automatically to my newly installed system without talking care to copy everything.

I’m using SkyDrive to synchronize my data across different systems and into the cloud.  Previously I’ve used Mesh, but as this is discontinued I fully switched to SkyDrive. Using Mesh it was possible to define what directories should be synchronized with the cloud. Using SkyDrive, there is (currently?) only one directory available for synchronization. And the Windows Live Writer adds the draft documents to the folder <users>\<username>\Documents\My Weblog Posts.

Usually this is not the wrong folder, it’s within user documents. However, Skydrive by default uses the folder <users>\<username>\Skydrive. The draft folder cannot be configured from the Windows Live Writer options. However, there’s a registry key that is used to define the path for the drafts and recent documents: HKCU\Software\Microsoft\Windows Live\Writer. The PostsDirectory string value must be added, and the string value receives the new directory, e.g. c:\users\Christian\SkyDrive\My Weblog Posts.

Found the registry information with LEHSYS Side Notes.

Christian

http://www.cninnovation.com


Moving to Windows Azure Web Sites

Recently I moved several of my Web sites to Windows Azure Web Sites. The previous version of the sites were running as shared sites using two different Web providers. One of the sites was using ASP.NET MVC 3 and a SQL Server, the other one using Flash and PHP. The Web site with Flash needed a complete redesign and a new implementation. The move was really easy to do, and all the sites are now running fine. This article describes how I did the move.

image

One database for multiple sites

http://www.cninnovation.com was running previously on a shared hosting site with ASP.NET MVC 3 using SQL Server from the same provider. Information about training and books is coming from SQL Server. I’ve written many books and offer many different courses, but this is still not a lot of data for a database. Windows Azure now has a great offer for SQL databases that is just USD 5,- (EUR 3.55) for 100 MB. This is less than I was paying for my previous SQL Server database.

http://www.kantine.at didn’t use any database before. However, the site became a complete new redesign now using HTML5 and ASP.NET MVC 4, and all the information about menus, drinks, and latest information is coming from the database as well. A lot of menus is not a lot of data as well. I’m using the same database as for the CN innovation site, just using different schemas for the tables. This makes a great separation between the different sites.

Moving the database from the old site to Windows Azure is an easy task, as for example described by WriJu using SQL Server Management Studio, there’s also a SQL Database Migration Wizard on CodePlex. As I’m using a different schema in the new SQL Azure database, I’ve just used a script that I generated from Visual Studio 2012. The script creates tables and fills them with data. I’ve modified the script for the new schemas, and created and filled the tables on Windows Azure.

The change for the CN innovation site just needed minor changes to the data access code for the new schema, and a change in the connection string.

Publishing to Windows Azure Web Sites

After doing a “Quick Create” of a Windows Azure Website I published my CN innovation site directly from Visual Studio 2012 to Windows Azure. This is one really great feature to publish the site from the Solution Explorer in Visual Studio directly to Windows Azure. The publish profile needed for that can be exported from the Windows Azure Management Portal, imported from Visual Studio, and it’s not necessary to deal with username, password, the correct link for publishing, and so on.

image

For the first tests I was using a free shared instance. For going live a DNS entry was needed. This required a reserved instance at that time. I just couldn’t switch to a reserved instance because there was no one free in West Europe. I had to wait for nearly two weeks before the switch was possible. At first I was afraid that I needed to switch every Web site to a new reserved instance. However, that’s not the case. Switching to reserved instance all my Web sites moved to the same reserved instance. I ‘m just paying one reserved instance for all the Web sites. With the recent changes I can run a hundred sites in one reserved instance. So I’m just paying one small VM for USD 57,60 (EUR 40,85) for the compute instance for all my sites.

A new Web application

The www.kantine.at Web site was previously done with PHP and Flash, just offering a flashy home page and a guest book that wasn’t really used. This site got a complete new design and implementation. The guest book is replaced by a Facebook page that’s linked from the home page. The home page gives actual news and the menu of the day.

image

You can see some images about the restaurant such as this…

image

…can read about the menus of the week…

image

and find the location by using Bing maps.

image

Don’t start development with .NET 4.5 to deploy to a Server running .NET 4

Christine Mark was doing the design and delivered HTML5 and CSS pages. I’ve created the solution with ASP.NET MVC 4, started the project with .NET 4.5. With this I moved the HTML content that I received to the layout and views of the ASP.NET MVC architecture. All the different menu cards are served from the same controller action which allows sharing a lot of HTML code. To give the current selection of the page and menu card a different look, jQuery helped to change the style for the active item. For accessing the database I’m using Entity Framework Code-First. I’ve been using the NuGet package for the new Entity Framework features.

Before deploying to Windows Azure just don’t forget – .NET 4.5 is not available with Azure yet. With Windows Azure you’ll only see released framework versions. Now as .NET 4.5 is released, I’m expecting the new .NET version with Windows Azure soon. Ok, I switched back to .NET 4.0 with a simple change in the project settings. Running and testing the application locally everything is fine. Deploying it to Windows Azure, the application failed. I’ve turned on error information to see the issue, which was a missing method in the Entity Framework library. It turned out that the Entity Framework NuGet package behaves differently if it is added to a .NET 4.5 or .NET 4 project. As I added it to a .NET 4.5 solution, some methods were used that have been available on my system (as .NET 4.5 is installed here), but not on the target system on Windows Azure. Deleting the NuGet package and adding it again helped, and the application was running great on Windows Azure.

It’s easy to switch from .NET 4 to .NET 4.5, but there are issues switching back. I’ve had the experience already several times, I just need to remember it Winking smile

Windows Azure Storage

The images for the menus – e.g. with salads – are not served from the SQL database. I try to keep the SQL database small, and use for larger items such as these images Azure Storage. The price is very different. For geo-redundant storage, 25 GB costs USD 3.13 (EUR 2.22). That’s a lot cheaper than relational data.

image

Making the final move from the test environment in Windows Azure to the production sites, was just a matter for changing the DNS entries.

The client application to manage the menus is a Windows Store client app. This is the topic of another blog article.

For more information on Windows Azure, ASP.NET MVC, jQuery, and Windows Store apps see my workshops. More information on ASP.NET MVC and Windows Store apps is also found in my new book Professional C# 2012.

Christian

CN innovation


Updating Windows 8 Tiles using JavaScript

One of the great features of Windows 8 apps are tiles, the front facing information of apps. Windows 8 Apps can give live information to the user without the need to run the application. Tiles are not only icons, but can give actual information. A weather app shows the actual temperature, the news app gives highlights on news, the mail app the number of new emails since it was last opened – and all this can be done using pictures to give the app a more interesting look. This blog entry gives information on one way to update tiles automatically by offering a service with information for the tile.

Icons for the Tiles

The icon-based look of the tile can be defined with the package manifest editor as shown in figure 1. The app can have a normal or a wide logo with 150x150 pixels or 310x150 pixels for the tile. The wide logo is optional, and the user is in power to change the size of the tile for the application.

Figure 1

Live Information

To offer live information for the tiles, the TileUpdater from the Windows Runtime namespace Windows.UI.Notifications can be used. The TileUpdater can be retrieved using the TileUpdateManager as shown:

 

var notification = Windows.UI.Notifications;
var tileUpdater = notification.TileUpdateManager.createTileUpdaterForApplication();

 

Now the update for the tile can be requested. The method StartPeriodicUpdate allows specifying an Uri and a value from the PeriodicUpdateRecurrence enumeration that offers different values for updates every half hours up to updates once a day. The first parameter is of type Windows.Foundation.Uri:

 

var recurrence = notification.PeriodicUpdateRecurrence.halfHour;
var url = new Windows.Foundation.Uri(tileUrl);
tileUpdater.startPeriodicUpdate(url, recurrence);

Defining a start time

Instead of starting the tile updates immediately, an overloaded version of the method StartPeriodicUpdate can be used to define the start time for the update, and continue with updates using the periodic update recurrence from there. One example where this is useful is if the data for the tile is always available at the same time of the day. With JavaScript, the parameter type is of type Date:

 

var d = new Date();
var startTime = new Date(d.getFullYear(), d.getMonth(), d.getDate() + 1, 6);
tileUpdater.startPeriodicUpdate(url, startTime,
notification.PeriodicUpdateRecurrence.daily);

Tile Information from the Server

The server just needs to return XML as it is defined with the schema for the tiles. I'm using ASP.NET MVC to return the XML directly from a controller action method. Of course other technologies can be used as well. All what's needed is XML returned. The method GetTileXmlContent returns actual information contained within a square and a wide tile.

 

public ActionResult TileInfo()
{
  return Content(GetTileXmlContent(), "text/xml");
}

 

The XML that needs to be returned from the service can look like this – here two tiles in the format TileWideText04 and TileSquareText04 with one text information are returned to the client:

 

<tile>
<visual>
<binding template="TileWideText04">
<text id="1">Gebratene Forelle mit Petersilkartoffeln</text>
</binding>
<binding template="TileSquareText04">
<text id="1">Gebratene Forelle mit Petersilkartoffeln</text>
</binding>
</visual>
</tile>

 

Depending if the user selected the large or the square tile, this version will be shown.

Using different tile options

With the tile template TileSquareText04, the text is shown in the tile alongside the 30x30 icon that is defined with the small logo setting in the package manifest as shown in figure 2.

Figure 2

It's not completely free to define any look with the tile. This is a good idea as this way different tiles are not a complete mess but instead have some common experience for the users as shown in figure 3. The name of the application or the icon are always on the same place, the same font is used for the text, badge information with a number or an icon can be used that also shows up at the same position…

Figure 3

The different options for tiles are listed in the tile template catalog. This catalog lists square and wide templates, templates with text only or image only, and peek templates that change between text and an image. The list of wide templates also offer image and text templates.

The templates TileWideText04 and TileSquareText04 that were used in the sample contain one text that is wrapped in a maximum of four lines. Other text templates define multiple lines that are not wrapped, or define a larger header line.

To display an image and text the following XML code uses the wide template alternating with text, the tile templates TileWideSmallImageAndText03 and TileSquarePeekImageAndText04. The peek templates show partly text and an image using an animation.

 

<tile>
<visual>
<binding template="TileWideSmallImageAndText03">
<image id="1" src="http://server/wienerschnitzel.jpg" alt="Wiener Schnitzel"/>
<text id="1">Wiener Schnitzel vom Schwein mit Reis und Preiselbeeren</text>
</binding>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src="http://server/wienerschnitzel.jpg" alt="Wiener Schnitzel"/>
<text id="1">Wiener Schnitzel vom Schwein mit Reis und Preiselbeeren</text>
</binding>
</visual>
</tile>

 

Figure 4 shows the wide tile variant with image and text.

Figure 4

Showing alternating tiles

To show different tile templates with alternate information, you cannot add multiple binding elements to one XAML that do not differ with the tile size. You need to pass different URL's to the StartPeriodicUpdateBatch method:

 

tileUpdater.startPeriodicUpdateBatch([url1, url2, url3], recurrence);

 

Summary

Just with a few lines of code it's possible to create cool looking tiles for a Windows Store app. Do not miss the chance to offer more information to the user than just a static icon. With just a few lines of code tiles can be dynamically updated with simple XML content from a server.

By far this is not all what's important with tiles. Badge information can be shown with tiles in the form of a number or an icon, to give some special information for the user, e.g. how many emails arrived since the last visit of the application, or some green/yellow/red mark to ask for some special attention. Tiles can also be updated using push notification. All this is the topic of some other blog entries – or my Windows 8 workshops.

More information on developing Windows 8 apps is in my Windows 8 workshop using HTML and JavaScript, and in the book Professional C# 2012 (this is C# code).

Christian

http://www.cninnovation.com


Updating Windows 8 Tiles using C#

One of the great features of Windows 8 apps are tiles, the front facing information of apps. Windows 8 Apps can give live information to the user without the need to run the application. Tiles are not only icons, but can give actual information. A weather app shows the actual temperature, the news app gives highlights on news, the mail app the number of new emails since it was last opened – and all this can be done using pictures to give the app a more interesting look. This blog entry gives information on one way to update tiles automatically by offering a service with information for the tile.

Icons for the tiles

The icon-based look of the tile can be defined with the package manifest editor as shown in figure 1. The app can have a normal or a wide logo with 150x150 pixels or 310x150 pixels for the tile. The wide logo is optional, and the user is in power to change the size of the tile for the application.

Figure 1

Live Information

To offer live information for the tiles, the TileUpdater from the Windows Runtime namespace Windows.UI.Notifications can be used. The TileUpdater can be retrieved using the TileUpdateManager as shown:

TileUpdater tileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();

Now the update for the tile can be requested. The method StartPeriodicUpdate allows specifying an Uri and a value from the PeriodicUpdateRecurrence enumeration that offers different values for updates every half hours up to updates once a day. The first parameter is of type System.Uri:

tileUpdater.StartPeriodicUpdate(new Uri(tileUrl), PeriodicUpdateRecurrence.Hour);

Defining a start time

Instead of starting the tile updates immediately, an overloaded version of the method StartPeriodicUpdate can be used to define the start time for the update, and continue with updates using the periodic update recurrence from there. One example where this is useful is if the data for the tile is always available at the same time of the day. With C#, the parameter type is of type DateTimeOffset, the type that includes an UTC time offset:

DateTimeOffset tomorrow = DateTimeOffset.Now.AddDays(1);

var starttime = new DateTimeOffset(tomorrow.Year, tomorrow.Month,
tomorrow.Day, 6, 0, 0, TimeSpan.FromHours(2));

tileUpdater.StartPeriodicUpdate(new Uri(tileUrl), starttime,
PeriodicUpdateRecurrence.Daily);

Tile Information from the Server

The server just needs to return XML as it is defined with the schema for the tiles. I'm using ASP.NET MVC to return the XML directly from a controller action method. Of course other technologies can be used as well. All what's needed is XML returned. The method GetTileXmlContent returns actual information contained within a square and a wide tile.

public ActionResult TileInfo()

{

return Content(GetTileXmlContent(), "text/xml");
}

The XML that needs to be returned from the service can look like this – here two tiles in the format TileWideText04 and TileSquareText04 with one text information are returned to the client:

<tile>
<visual>
<binding template="TileWideText04">
<text id="1">Gebratene Forelle mit Petersilkartoffeln</text>
</binding>
<binding template="TileSquareText04">
<text id="1">Gebratene Forelle mit Petersilkartoffeln</text>
</binding>
</visual>
</tile>

Depending if the user selected the large or the square tile, this version will be shown.

Using different tile options

With the tile template TileSquareText04, the text is shown in the tile alongside the 30x30 icon that is defined with the small logo setting in the package manifest as shown in figure 2.

Figure 2

It's not completely free to define any look with the tile. This is a good idea as this way different tiles are not a complete mess but instead have some common experience for the users as shown in figure 3. The name of the application or the icon are always on the same place, the same font is used for the text, badge information with a number or an icon can be used that also shows up at the same position…

Figure 3

The different options for tiles are listed in the tile template catalog. This catalog lists square and wide templates, templates with text only or image only, and peek templates that change between text and an image. The list of wide templates also offer image and text templates.

The templates TileWideText04 and TileSquareText04 that were used in the sample contain one text that is wrapped in a maximum of four lines. Other text templates define multiple lines that are not wrapped, or define a larger header line.

To display an image and text the following XML code uses the wide template alternating with text, the tile templates TileWideSmallImageAndText03 and TileSquarePeekImageAndText04. The peek templates show partly text and an image using an animation.

<tile>
<visual>
<binding template="TileWideSmallImageAndText03">
<image id="1" src="http://server/wienerschnitzel.jpg" alt="Wiener Schnitzel"/>
<text id="1">Wiener Schnitzel vom Schwein mit Reis und Preiselbeeren</text>
</binding>
<binding template="TileSquarePeekImageAndText04">
<image id="1" src="http://server/wienerschnitzel.jpg" alt="Wiener Schnitzel"/>
<text id="1">Wiener Schnitzel vom Schwein mit Reis und Preiselbeeren</text>
</binding>
</visual>
</tile>

Figure 4 shows the wide tile variant with image and text.

Figure 4

Showing alternating tiles

To show different tile templates with alternate information, you cannot add multiple binding elements to one XAML that do not differ with the tile size. You need to pass different URL's to the StartPeriodicUpdateBatch method:

tileUpdater.StartPeriodicUpdateBatch(new Uri[] {uri1, uri2, uri3},
PeriodicUpdateRecurrence.SixHours);

Summary

Just with a few lines of code it's possible to create cool looking tiles for a Windows Store app. Do not miss the chance to offer more information to the user than just a static icon. With just a few lines of code tiles can be dynamically updated with simple XML content from a server.

By far this is not all what's important with tiles. Badge information can be shown with tiles in the form of a number or an icon, to give some special information for the user, e.g. how many emails arrived since the last visit of the application, or some green/yellow/red mark to ask for some special attention. Tiles can also be updated using push notification. All this is the topic of some other blog entries – or my Windows 8 workshops.

More information on developing Windows 8 apps is in my Windows 8 workshop using C#, and in the book Professional C# 2012.

Christian

http://www.cninnovation.com


Windows 8 UI Training mit HTML und JavaScript

Für die schnell entschlossenen gibt es 22.-23. August in Wien ein Windows 8 UI Training mit HTML und JavaScript! Voraussetzung sind Kenntnisse von HTML und JavaScript.

Jetzt ist der richtige Zeitpunkt Apps für Windows 8 zu entwickeln! Mit dem Windows 8 Launch die Applikation im Store?

In diesem Workshop geht es um das Design von Windows 8 Modern Style Apps, Verwenden der Windows Runtime, und Integration von Windows 8 spezifischen Features wie die AppBar, Charms, Pickers, Tiles, und vieles mehr.

Nachdem wir für den Workshop ein Touch-Device brauchen, bekommt jeder Teilnehmer einen Samsung Series 7 Slate mit Intel Core i5 Prozessor, Docking Station und Samsung Wireless Keyboard.

Bei Interesse und Fragen – auch für Firmen-spezifische Workshops, einfach kontaktieren!

Christian

CN innovation

 


Metro style and OneNote MX

Content instead of Chrome…

One guideline for Metro style applications is to use content instead of chrome. For offering features such as menus or toolbars, the appbar can be used. The appbar becomes only visible on swiping from bottom or top, or using a context menu in case you're using a keyboard or mouse. The user should be in the focus of what he's doing now instead of a place where he might go next, that's why chrome should be displayed as little as possible.

With Internet Explorer, the Web page has the complete page available as soon as the appbar goes out of scope. The Calendar application gives the complete screen to the day/week/month. To add new calendar entries, the appbar can be used.

Not all scenarios are really efficient by just removing the chrome. One way to deal with this is to stick the appbar to top or bottom. In case the user needs the appbar more actively, it can be sticked, and thus it stays visible even if the user changes the focus back to the main content.

With some scenarios this is not enough to keep the user productive. The Mail program that's available with Metro style Windows 8 includes buttons to send and close messages when editing an email, and these buttons even open a context menu (save draft or delete with the close button). Reading emails, the buttons New, Respond, and Delete are directly accessible from the main view.

Now OneNote MX is available – the Metro version of OneNote. This tool has a cool control that needs just a small part of the screen, unless you activate it. This is the view of this control on the content view that is never distracting as it goes out of the way as you type.

Clicking on the control it gets bigger for doing copy/paste/undo, creating tables and lists, and inserting images or getting a new image from the camera.

Some of the items of this circular list have a button for more options. The control appears as shown in the next image if the arrow button from the bullets is selected.

That's really a great idea for having a lot of options that are not in the place if not needed.

Christian

CN innovation

More information on Windows 8 in my Windows 8 Metro workshops and in the upcoming book Professional C# 2012.

This blog post was done with Word 2013 Preview.