SilverlightShow: Silverlight Community

Windows 8.1: Easily send your notifications to tiles, toasts and badges

editorial@silverlightshow.net (Andrea Boschin ) — Tue, 04 Feb 2014 12:02:00 GMT

Sending notifications from inside your application, both from code of from a push notification channel, is being a must when developing with Windows 8.1. Sending a notification is at all a simple task, but it involves boring and repetitive things that always need to be done. Recently I’ve published a new library made to oversimplify this task and made it straightforward in both the scenarios, from the server side with a push notification or from the running app both in foreground and in background.

Don't miss

All SilverlightShow Ebooks

Notifications: the usual way

All in all, sending a notification to a tile, a toast or a badge is a simple task. At the very end you have only to build a fragment of xml and then send it to the runtime using the right manager. The very hard task to me, is that you need to create the xml, from scratch or using a template, and this implies you always remember the structure and the fields you have to fill to make this notification valid.

This means you always have to browse documentation (here is the tile template catalog http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx) to detect the right format of the output xml on the basis of the combination of images, title and content you need and then use the XmlDocument to fill out the template.

As an example if you would like to get a tile notification for a tile, you need to write something like the code below. First of all, after going in the template catalog you have to get the template using the GetTemplateContent method:

   1: XmlDocument tileXml =

   2:     TileUpdateManager.GetTemplateContent(TileTemplateType.TileWide310x150ImageAndText01);

Then, with the structure of the xml in mind you have to fill the fields. This template has two fields, an image and a text line. So you scan the template for the text node and fill it this way:

   1: XmlNodeList tileTextNode =

   2:     tileXml.GetElementsByTagName("text");

3:

   4: if (tileTextNode != null && tileTextNode.Length > 0)

   5:     tileTextAttributes[0].InnerText = "This is a notification build by hand!";

Then the same thing is done with the image that has instead two attributes to fill. So again find the node and set the attributes:

   1: XmlNodeList tileImageNode =

   2:     tileXml.GetElementsByTagName("image");

3:

   4: if (tileImageNode != null && tileImageNode.Length > 0)

   5: {

   6:    ((XmlElement)tileImageNode[0]).SetAttribute("src", "ms-appx:///images/mytileimage.png");

   7:    ((XmlElement)tileImageNode[0]).SetAttribute("alt", "The tile image text");

   8: }

With tile notifications usually you need to send an update for each size your app implements. Usually, when you choose to use a tile notification you provide at least two sizes so the code above needs to be duplicated and merged to create a single notification that contains both the sizes. With the XmlDocument this task imply you have to extract part of the notification and import it into the other one. The resulting XML should be like this:

1:

   2:     "2">

   3:         "TileWide310x150ImageAndText01" fallback="TileWideImageandText01">

   4:             "1" src="ms-appx:///images/mytileimage.png" alt="The tile image text" />

   5:             "1">This is a notification build by hand!

6:

   7:         "TileSquare150x150Text04" fallback="TileSquareText04">

   8:             "1">This is a notification build by hand!

9:

10:

11:

Each node represents a single tile size. To build this you do something like this:

   1: XmlDocument squareTileXml =

   2:     TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquare150x150Text04);

3:

   4: XmlNodeList squareTileTextNode =

   5:     squareTileXml.GetElementsByTagName("text");

6:

   7: if (squareTileTextNode != null && squareTileTextNode.Length > 0)

   8:     squareTileTextNode[0].AppendChild(squareTileXml.CreateTextNode("This is a notification build by hand!"));

9:

Finally the templates should be merged together:

   1: IXmlNode node =

   2:     tileXml.ImportNode(

   3:         squareTileXml.GetElementsByTagName("binding").Item(0), true);

4:

   5: tileXml.GetElementsByTagName("visual").Item(0).AppendChild(node);

This code, taken from the MSDN documentation is probably nothing of too hard, but it requires time and the deep knowledge of the xml manipulation tecniques. After having build a number of these I’ve finally decided to create a simple library to make this work easy as opening a simple messagebox.

Introducing the XPG.Toolkit.Notifications library

Saying “simple library” may sounds that it have been build in a few hours. Unfortunately, since there are almost 75 templates only for tiles and the great part of them have two version of the xml (one for version 1 and the other for version 2), building a compehensive library that also includes toasts and badged took me a number of days of work. But now, with the XPG Notification Library, sending an update like the one I’ve shown in the previous section is easy like drinking a glass of water:

   1: INotificationManager manager = new NotificationManager();

2:

   3: manager.PublishTile(

   4:     new Tile

   5:     {

   6:         Visual = new TileVisual

   7:         {

   8:             Bindings = new TileBinding[] {

   9:                 new TileWide310x150ImageAndText01

  10:                 {

  11:                     Text1 = "This is a notification build easy",

  12:                     ImageSource1 = new Uri("ms-appx:///images/mytileimage.png"),

  13:                     ImageText1 = "The tile image text"

  14:                 },

  15:                 new TileSquare150x150Text04{

  16:                     Text1 = "This is a notification build easy"

  17:                 },

  18:             }

  19:         }

  20:     });

As you can see you have only to build a couple of object instances, corresponding to the tile sizes you have to update and then add both to the notification structure. At the end, using a NotificationManager you post the notification to the right update manager. This is for sure way too better because Visual Studio helps you with intellisense in discovering the properties you have to fill and you also use strictly typed properties (in this case the image Uri) to avoid unwanted errors that make the notification fail silently with XML.

The concept behind the library is definitely simple. It is a big collection of xml serializable classes that matches all the available templates. All the templates actually supports both the old version 1 and the new version 2 shapes. You can forget the difference between the two versions and directly use the old or new version using its original name:

   1: // initialize and old (version 1) tile template

   2: TileSquareText01 oldTile = new TileSquareText01();

3:

   4: // initialize the new (version 2) tile template

   5: TileSquare150x150Text01 newTile = new TileSquare150x150Text01();

6:

   7: // everywhere possible the old template is base class for the new one

   8: // so it is possible the following assignment

   9: oldTile = newTile;

All the templates are able to directly serialize to a string using a simple assignment. This is because the base class implements an operator overloading for the assignment to a string variable. Here is and example:

   1: var tile = new TileWide310x150ImageAndText01

   2:                 {

   3:                     Text1 = "This is a notification build easy",

   4:                     ImageSource1 = new Uri("ms-appx:///images/mytileimage.png"),

   5:                     ImageText1 = "The tile image text"

   6:                 };

7:

   8: Debug.WriteLine(tile);

The code above outputs the following XML to the debug console:

   1: <binding fallback="TileWideImageAndText01" template="TileWide310x150ImageAndText01">

   2:   <image id="1" src="ms-appx:///images/mytileimage.png" alt="The tile image text" />

   3:   <text id="1">This is a notification build easytext>

   4: binding>

Obviously you can also assign the output to a string variable or to a XDocument instance

   1: var tile = new TileWide310x150ImageAndText01

   2:                 {

   3:                     Text1 = "This is a notification build easy",

   4:                     ImageSource1 = new Uri("ms-appx:///images/mytileimage.png"),

   5:                     ImageText1 = "The tile image text"

   6:                 };

7:

   8: XDocument xDocument = tile;

   9: string xmlString = tile;

Getting the xml from a notification may be useful if you need to send a push notification. This is possible because the library is built as a PCL (portable class library) so you can generate notifications also in a server code that pushed it to the Windows Notification Service (WNS). The serializations actually works at every level of the hierarchy, allowing to serialize the whole structure with a number of notifications into it.

Not only for tiles. Toasts, badges and…

As I said initially you can send also other types of notifications. The library includes all the templates for toast and badge notification. Using the same notification manager you will find the PublishToast and PublishBadge methods:

   1: manager.PublishToast(

   2:     new Toast

   3:     {

   4:         Visual = new ToastVisual

   5:         {

   6:             Binding = new ToastText04

   7:             {

   8:                 Text1 = "This is a toast notification",

   9:                 Text2 = "Created with XPG Toolkit",

  10:                 Text3 = "by A. Boschin"

  11:             }

  12:         }

  13:     });

This code sends a tile notification using the ToastText04 template. As for tiles it exposes properties with the same name of the online catalog so it is easy to understand the content to provide. Equally you can send an badge notification this way:

   1: manager.PublishBadge(new Badge

   2: {

   3:     Value = BadgeValue.Attention,

   4:     Version = 1

   5: });

The BadgeValue property is an enumerator but you can also supply and integer to show a number on the badge, using a value from 0 to 99. Here is the sample:

   1: manager.PublishBadge(new Badge

   2: {

   3:     Value = (BadgeValue)42,

   4:     Version = 1

   5: });

Windows 8.1 also support scheduled alarm notifications that have a given delivery time and a snooze interval. The methods in the NotificationManager allow to specify these values for every Toast and Tile notifications:

   1: manager.PublishToast(new Toast

   2: {

   3:     Duration = "long",

   4:     Launch = "12345",

   5:     Audio = new ToastAudio

   6:     {

   7:         Loop = true,

   8:         Source = "ms-winsoundevent:Notification.Looping.Alarm2"

   9:     },

  10:     Visual = new ToastVisual

  11:     {

  12:         Binding = new ToastText01

  13:         {

  14:             Text1 = "Alarm!"

  15:         }

  16:     },

  17:     Scenario = new AlarmScenario

  18:     {

  19:         CanDismiss = true,

  20:         CanSnooze = true

  21:     }

  22: }, DateTimeOffset.Now.AddMinutes(1), TimeSpan.FromSeconds(60), 3);

The previous code sends a scheduled toast notification that is raised one minute after, and it snooze three times every 60 seconds.

Supporting Mocking

As a final note, you have to notice that the library has been build with mocking in mind. The NotificationManager is based on a INotificationManager interface and it may support a dependency injection container. This lets you to add at runtime the NotificationManager instance and change it during tests with a mock that track the calls to the manager’s methods.

The library is enforced by 136 unit tests that ensures the correct output to the notification system. So you can rely for sure on it. In the future I’m planning to add some other methods to the NotificationManager the sends easily standard notifications with very few lines of code, removing the needs of creating the wrapping package of the notification.

If you are interested, the library is available on Nuget with the MS-PL license, and it can be downloaded easily directly from Visual Studio using the Nuget package manager. Feel free to use the library in your commercial products, free of charge. Other details here: http://www.xamlplayground.org/page/XPG-Toolkit-Notification-library.aspx

Windows 8.1: The Windows Search API

editorial@silverlightshow.net (Andrea Boschin ) — Wed, 15 Jan 2014 11:40:00 GMT

Starting from Windows 8.1, the search has slightly changed in the Windows Store apps. The old Search contract is not anymore the sole way to go, but now the app is enabled to provide its own search box. To give a better search experience, it has now the ability of integrating with the Windows Search engine with some new APIs. This imply some more work for the developer that has to load in the search engine the items he wants to make searchable, but the results is much more interesting and effective.

Don't miss

All SilverlightShow Ebooks

The Windows.Storage.Search namespace

Inside this new namespace, it is now included the whole toolset you can use to provide an effective search. These APIs let you to add and remove items from the indexing engine attaching some properties to each item and then use some queries to retrieve this content from the engine itself.

There are two classes that collaborates in this work:

ContentIndexer: it is the class that represents the engine where you will load the indexed items. It is a sealed class and you cannot create instances of it. You can only retrieve an instance using the GetIndexer method.

IndexableContent: it represents an item you can add, update and finally remove from the indexing engine. Each items has an unique Id you can use to retrieve the items after having added them.

So, the first thing to do to interact with the engine is to get the indexer's instance. This is done using the GetIndexer method, without parameters in the simplest case. You can also provide a name and this enables you to have more than an indexer, each one with its separated items. Always remember that the indexer, with or without a name, has a scope related to the local application and cannot be accessed by other apps.

   1: // retrieve the default indexer of the app

   2: ContentIndexer defaultIndexer = ContentIndexer.GetIndexer();

3:

   4: // retrieve a secondary indexer of the app

   5: ContentIndexer otherIndexer = ContentIndexer.GetIndexer("otherIndexer");

Be aware that your store will survive when the app is closed. You can see the current revision of its content using the progressive incremental value of the Revision property. Once you get your indexer you have a couple of methods to manipulate the items in the store.

AddAsync : adds an item to the store
UpdateAsync: retrieve an item and update its properties using the Id property
DeleteAsync, DeleteMultipleAsync and DeleteAllAsync: provide some ways to remove content from the store

To add an item, as an example, you have first to create the IndexableContent's instance. This means you have to create an instance of the class, provide an unique Id, populate its properties you want to make available and finally add a stream of the item content. The following code shows the creation of an element and its addition to the store:

   1: using (var stream = new InMemoryRandomAccessStream())

   2: {

   3:     // write the content to the stream

   4:     var writer = new DataWriter(stream);

   5:     writer.WriteString(content);

   6:     await writer.StoreAsync();

   7:     // reset the stream to its beginning

   8:     stream.Seek(0);

9:

  10:     // create the item to add

  11:     IndexableContent item = new IndexableContent

  12:     {

  13:         Id = Guid.NewGuid().ToString(),

  14:         Stream = stream,

  15:         StreamContentType = "text/plain"

  16:     };

17:

  18:     // and finally add it

  19:     await otherIndexer.AddAsync(item);

  20: }

The item content is represented by a stream and you can use a DataWriter to generate it from the original string. At the end the stream is rewinded to the beginning so the indexable content can read from it.

Each item you can add can be decorated with a number of additional properties. These properties are used to search the items. A property is a name-value pair and you can use the SystemProperties class to find the correct names. The class contains a number of basic properties and some other that are specific for multimedia scenario. As an example you can provide the Encoding bitrate of an audio stream using the SystemProperties.Audio.EncodingBitrate. Here are how to add properties to the previous indexed content.

   1: item.Properties.Add(SystemProperties.ItemNameDisplay, "LoremIpsum");

   2: item.Properties.Add(SystemProperties.Keywords, "Lorem, ipsum, dolor, sit, amet");

   3: item.Properties.Add(SystemProperties.Comment, "The same old lorem ipsum");

   4: item.Properties.Add(SystemProperties.Title, "Lorem ipsum dolor sit amet");

   5: item.Properties.Add(SystemProperties.Media.Year, DateTime.Now.Year);

Another important property you have to handle is the language. Providing the correct language is important because the indexing engine can use it to correctly spell the properties and give a better result. It is also important to not provide a language is you do not really know the correct language of your resource. This because the engine will try to guess it analyzing the value.

   1: var comment = new ValueAndLanguage();

   2: comment.Language = "en-US";

   3: comment.Value = "The same old lorem ipsum";

   4: item.Properties.Add(SystemProperties.Comment, comment);

5:

   6: await otherIndexer.AddAsync(item);

Performing a search

Searching content is definitely easy, but you have a number of options to work with. A search is identified by a query that you create providing the search terms. Once the query has been created using the CreateQuery method, you execute it by calling the GetAsync method.

   1: var query = otherIndexer.CreateQuery("lorem", new string[] { SystemProperties.ItemNameDisplay });

   2: IEnumerable result = await query.GetAsync();

As you can see the creation of the query requires the filter (in this case a simple word) and a list of properties you need to retrieve. It is important not to ask for more properties that the ones you really need to avoid unuseful works for the engine.

The query provides also the ability to order the returned item by some properties. This may be achieved using an additional overload of the CreateQuery method:

   1: var query = otherIndexer.CreateQuery("lorem",

   2:     new string[] { SystemProperties.ItemNameDisplay },

   3:     new SortEntry[]

   4:     {

   5:         new SortEntry{ AscendingOrder = true, PropertyName = SystemProperties.Media.Year }

   6:     });

7:

   8: IEnumerable result = await query.GetAsync();

The query has additional methods you can use to improve your searches. You can retrieve the count of items without retrieving the items using the GetCountAsync ad finally retrieve only the properties with the GetPropertiesAsync.

Until now we have passed a query made of a single word and the engines searches it into all the properties. You can also create a query using a special language called AQS (http://msdn.microsoft.com/en-us/library/bb266512 ). This language allow to specify a more complex grammar that enable searches on specific properties and the use of operators.

The following example searches using an AQS query:

   1: var query = otherIndexer.CreateQuery("keyword:(lorem OR ipsum)", new string[] { SystemProperties.ItemNameDisplay });

   2: IEnumerable result = await query.GetAsync();

The query specified searches the SystemProperties.Keywords values for items that contains the words “lorem” or “ipsum”. The query language has lot of Values you can search for.

System.Size : evaluate the size of the item
System.DateModified: enable search of items on the basis of the modification date and time

Using appcontent-ms files

If the toolset I’ve explained until now does not suffices, be aware that you have also another option for feeding the indexing engine. This uses a set of files, stored into a folder in the file system. You have to create the folder and add to it the files you want to be indexed by the engine. Each file represents an item in the index and it contains all the properties you can use in the previous samples beside with the content itself. Here is a sample file:

   1: xml version="1.0" encoding="utf-8"?>

   2: <IndexerSampleInformation>

   3:   <Properties xmlns="http://schemas.microsoft.com/Search/2013/ApplicationContent">

   4:     <Name>LoremIpsumName>

   5:     <Keywords>

   6:       <Keyword xml:lang="en-US">LoremKeyword>

   7:       <Keyword xml:lang="en-US">ipsumKeyword>

   8:       <Keyword xml:lang="en-US">dolorKeyword>

   9:       <Keyword xml:lang="en-US">sitKeyword>

  10:       <Keyword xml:lang="en-US">ametKeyword>

  11:     Keywords>

  12:     <Comment>The same old lorem ipsumComment>

  13:     <AdditionalProperties>

  14:       <Property Key="System.Title">Lorem ipsum dolor sit ametProperty>

  15:     AdditionalProperties>

  16:   Properties>

  17:   <IndexerSampleSpecificElement sc:IndexableContent="true" xmlns:sc="http://schemas.microsoft.com/Search/2013/ApplicationContent">

  18:     Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  19:     Morbi et orci fringilla libero vestibulum luctus.

  20:     Aliquam lacus neque, vehicula eget scelerisque sed, tristique rhoncus felis.

  21:   IndexerSampleSpecificElement>

  22: IndexerSampleInformation>

You can embed this files in your solution and copy it to the folder using the common file IO API but you can also create them at runtime. Once the files has been added you are able to create a query using a set of specific APIs:

   1: StorageFolder folder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("Indexed", CreationCollisionOption.OpenIfExists);

2:

   3: QueryOptions options = new QueryOptions();

   4: options.IndexerOption = IndexerOption.OnlyUseIndexer;

   5: options.ApplicationSearchFilter = Windows.Storage.SystemProperties.ItemNameDisplay + ":\"LoremIpsum\"";

6:

   7: StorageFileQueryResult query = folder.CreateFileQueryWithOptions(options);

8:

   9: IEnumerable foundFiles = await query.GetFilesAsync();

10:

  11: var found = foundFiles.Count();

This way is much more convenient to keep in sync items from some source and the indexed items. You only have to create a file every time an item is added and remove it at the right moment. You are able to perform the same operations you can do with the previous approach.

Windows 8.1: Create a PDF Viewer with new PDF API

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 06 Jan 2014 12:14:00 GMT

Download the source code for this article

Don't miss

All SilverlightShow Ebooks

Portable Document Format is actually the de-facto standard for document publishing since it is widely adopted by all platforms and used by most of people. Supporting PDF is something that a platform cannot avoid and, since the very first release, Windows 8 comes with an app that can read this format. In the latest release the APIs gained a new namespace dedicated to the PDF format, so now you can easily read and operate with these files. What's the better example than create a little and simple PDF Viewer?

Windows.Data.Pdf

The new API dedicated to the Portable Document Format are all in the Windows.Data.Pdf namespace. They are really simple and basic and only allows to read documents, so please, if your intent is to output a PDF from your app choose one of the free or commercial libraries available.

The root class in the namespace is PdfDocument that is able to read the content from a file (a IStorageFile instance) or directly from a stream enabling the manipulation of in-memory contents. Here is a simple example:

   1: StorageFile file = this.GetFile();

   2: this.Document = await PdfDocument.LoadFromFileAsync(file);

The two static methods, LoadFromFileAsync and LoadFromStreamAsync both allow you to open password protected files providing the password as secondary argument. You only know that a document is protected by a password trying to open it so you have to catch the raised exception and then ask the user for the password.

Once the document has been loaded you have very few information about it. The PdfDocument class only provide the PageCount and a boolean flag set to true if the document is password protected. I would have preferred something more but that's it.

Of course you are able to get every single page as and instance of PdfPage class using the GetPage method that requires the index of the page to extract. The PdfPage class has some more information available including the size of the page, its index in the document and other properties like the rotation and dimensions. Here is how you can get the page:

   1: PdfPage page = this.Document.GetPage(1);

2:

   3: var width = page.Size.Width;

   4: var height = page.Size.Height;

In the same snippet you also see how to get the current size of the page form the Size property.

Having a reference to a page is the starting point to render it to the view. The API lets you to render the page to a bitmap so you can then use an Image to display the content to the user. The rendering is almost simple:

   1: await this.CurrentPage.RenderToStreamAsync(stream);

This line is able to render the page to a stream in the PNG format.

Create a simple PDF reader

Before to go deep inside the rendering options that are someway much more powerful that the simple example I’ve provided in the previous snippet, let start a little project that will implement a basic PDF Viewer able to navigate the document and zoom in and out its pages.

First of all let start creating a blank application project with the structure in the figure on the right side. The application only contains a single page that is the surface where the PDF will be displayed. In a fully featured version you should implement share target contract and associate with the .pdf extension but for the purpose of this example I only added a button that allows to pick a pdf file from the file system. The other components are the image rendering surface (a Image element), two buttons used to navigate the pages and a text block to display the current position in the document.

   1: "{ThemeResource ApplicationPageBackgroundThemeBrush}">

2:

3:

6:

7:

   8:     "grdView" Visibility="Collapsed">

   9:         "imgRenderSurface" Stretch="Uniform" />

  10:         "{ThemeResource ApplicationPageBackgroundThemeBrush}"

  11:                 Padding="5" VerticalAlignment="Top" HorizontalAlignment="Center">

  12:             "24" x:Name="txtPage" />

13:

14:

  15:                 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

  16:             "Back" />

17:

18:

  19:                 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

  20:             "Forward" />

21:

22:

23:

The flow starts when the user clicks the button to open the document. This will start the FileOpenPicker to let the user choose a single pdf file to open. When the file has been choosed the control passes to the OpenFile method that loads the PDF and initializes the rendering environment. Some properties like “ZoomFactor” are initialized but they will be used only in the next step, when I‘ll show how to implement zooming.

   1: private async void btnOpenFile_Click(object sender, RoutedEventArgs e)

   2: {

   3:     FileOpenPicker picker = new FileOpenPicker();

   4:     picker.FileTypeFilter.Add(".pdf");

   5:     StorageFile file = await picker.PickSingleFileAsync();

6:

   7:     if (file != null)

   8:         await OpenFile(file);

   9: }

10:

  11: private async Task OpenFile(StorageFile file)

  12: {

  13:     try

  14:     {

  15:         this.Document = await PdfDocument.LoadFromFileAsync(file);

  16:     }

  17:     catch(Exception ex)

  18:     {

  19:         MessageDialog dialog = new MessageDialog(ex.Message);

  20:         dialog.ShowAsync();

  21:         return;

  22:     }

23:

  24:     this.CurrentPageIndex = 0;

  25:     this.ZoomFactor = 1.0;

  26:     this.SetState(false);

  27:     await this.RenderPage();

  28: }

After the file has been successfully opened, the flow call the RenderPage method that is the central core that renders the pdf to the image surface. The current version simply render the full page on the surface:

   1: private async Task RenderPage()

   2: {

   3:     this.CurrentPage = this.Document.GetPage((uint)this.CurrentPageIndex);

4:

   5:     using (IRandomAccessStream stream = new MemoryStream().AsRandomAccessStream())

   6:     {

   7:         await this.CurrentPage.RenderToStreamAsync(stream);

8:

   9:         BitmapImage source = new BitmapImage();

  10:         source.SetSource(stream);

  11:         imgRenderSurface.Source = source;

  12:     }

13:

  14:     this.txtPage.Text = string.Format("{0} of {1}", this.CurrentPageIndex + 1, this.Document.PageCount);

  15: }

First of all, the current page is loaded on the basis of the current page index. This is updated by the forward and backward buttons as I’ll show later. Then it is created a MemoryStream and casted to a IRandomAccessStream. This let you to write the content of the page to the stream using the RenderToStreamAsync method. In this way it is not required to create a temporary file on the file system to write the page before to load it in the Image element. Once the stream has been written, it is assigned to the Image element using a BitmapImage. This class is able to load content from the stream and then can be set as source for the image itself.

When the user hits the forward and backward buttons the code simply evaluate the updated current index and check that it is inside the boundaries of document PageCount.

   1: private async void SwitchPage_Click(object sender, RoutedEventArgs e)

   2: {

   3:     if (sender == this.btnBack && this.CurrentPageIndex > 0)

   4:     {

   5:         this.CurrentPageIndex--;

   6:         await this.RenderPage();

   7:     }

   8:     else if (sender == this.btnForward && this.CurrentPageIndex < (int)this.Document.PageCount - 1)

   9:     {

  10:         this.CurrentPageIndex++;

  11:         await this.RenderPage();

  12:     }

  13: }

Implement a simple zoom

The PdfPage class does not only allow to render pages to a PNG bitmap, but is also able to zoom and crop portions of the page and then render it to the bitmap without losing definition. PDF is a vector image format so you can simply determine the desired size and the rendering has always the better definition if the file does not contains embedded bitmap images. To implement zooming you can simply increase the output desired size setting the DestinationHeight and DestinationWidth properties on the PdfPageRenderOptions class. This class is made to change the default behavior of the rendering process and have a number of properties that influences how the rendering happens. Setting the two properties let you determine the size of the output bitmap and so the resulting image will be larger.

These properties can be used in junction with the SourceRect property that instead determine the portion of the page to render on the give size. In the following snippet I’ll use both the features to implement a “strange” zooming that is not the best for the user experience but let me show I a single piece of code how both cropping and zooming works together. Let start adding a bunch of buttons:

   1: <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

   2:     <Button x:Name="btnZoomIn">

   3:         <SymbolIcon Symbol="ZoomIn" />

   4:     Button>

   5:     <Button x:Name="btnZoomOut">

   6:         <SymbolIcon Symbol="ZoomOut" />

   7:     Button>

   8: StackPanel>

   9: <Grid x:Name="grdPan" Visibility="Collapsed" VerticalAlignment="Bottom" HorizontalAlignment="Left">

  10:     <Grid.RowDefinitions>

  11:         <RowDefinition Height="Auto" />

  12:         <RowDefinition Height="Auto" />

  13:         <RowDefinition Height="Auto" />

  14:     Grid.RowDefinitions>

  15:     <Grid.ColumnDefinitions>

  16:         <ColumnDefinition Width="Auto" />

  17:         <ColumnDefinition Width="Auto" />

  18:     Grid.ColumnDefinitions>

  19:     <Button x:Name="btnUp" Grid.Row="0" Grid.ColumnSpan="2" HorizontalAlignment="Center">

  20:         <SymbolIcon Symbol="Up" />

  21:     Button>

  22:     <Button x:Name="btnDown" Grid.Row="2" Grid.ColumnSpan="2"  HorizontalAlignment="Center">

  23:         <SymbolIcon Symbol="Download" />

  24:     Button>

  25:     <Button x:Name="btnLeft" Grid.Row="1" Grid.Column="0">

  26:         <SymbolIcon Symbol="Back" />

  27:     Button>

  28:     <Button x:Name="btnRight" Grid.Row="1" Grid.Column="1">

  29:         <SymbolIcon Symbol="Forward" />

  30:     Button>

  31: Grid>

These are the zoom-in and zoom-out buttons together with 4 buttons used to pan the zoom on the whole page size. The zoom will always have the full page size but it will work as a keyhole on a portion of the page. The pan buttons let you move the hole on the entire surface:

   1: private async void Pan_Click(object sender, RoutedEventArgs e)

   2: {

   3:    if (this.CurrentPage != null)

   4:    {

   5:        double width = this.CurrentPage.Size.Width * (1 / this.ZoomFactor);

   6:        double height = this.CurrentPage.Size.Height * (1 / this.ZoomFactor);

   7:        double x = this.Position.X;

   8:        double y = this.Position.Y;

9:

  10:        if (sender == this.btnUp)

  11:        {

  12:            y -= height;

13:

  14:            if (y < 0) y = 0;

  15:        }

  16:        else if (sender == this.btnLeft)

  17:        {

  18:            x -= width;

19:

  20:            if (x < 0) x = 0;

  21:        }

  22:        else if (sender == this.btnDown)

  23:        {

  24:            y += height;

25:

  26:            if (y + height > this.CurrentPage.Size.Height)

  27:                y = this.CurrentPage.Size.Height - height;

  28:        }

  29:        else if (sender == this.btnRight)

  30:        {

  31:            x += width;

32:

  33:            if (x + width > this.CurrentPage.Size.Width)

  34:                x = this.CurrentPage.Size.Width - width;

  35:        }

36:

  37:        this.Position = new Point(x, y);

38:

  39:        await this.RenderPage();

  40:    }

  41: }

42:

  43: private async void ChangeZoom_Click(object sender, RoutedEventArgs e)

  44: {

  45:    if (sender == this.btnZoomOut && this.ZoomFactor > 1.0)

  46:    {

  47:        this.ZoomFactor -= .5;

  48:        await this.RenderPage();

  49:    }

  50:    else if (sender == this.btnZoomIn && this.ZoomFactor < 5.0)

  51:    {

  52:        this.ZoomFactor += .5;

  53:        await this.RenderPage();

  54:    }

55:

  56:    this.grdPan.Visibility = this.ZoomFactor > 1 ? Visibility.Visible : Visibility.Collapsed;

  57: }

After the button logic has been created it is time to change the RenderPage behavior. This now will crop a single piece of the page on the basis of the current zoom factor

   1: private async Task RenderPage()

   2: {

   3:     this.CurrentPage = this.Document.GetPage((uint)this.CurrentPageIndex);

4:

   5:     using (IRandomAccessStream stream = new MemoryStream().AsRandomAccessStream())

   6:     {

   7:         if (this.ZoomFactor != 1)

   8:         {

   9:             PdfPageRenderOptions options = new PdfPageRenderOptions();

  10:             options.DestinationHeight = (uint)this.imgRenderSurface.ActualHeight;

  11:             options.DestinationWidth = (uint)this.imgRenderSurface.ActualWidth;

  12:             double width = this.CurrentPage.Size.Width * (1 / this.ZoomFactor);

  13:             double height = this.CurrentPage.Size.Height * (1 / this.ZoomFactor);

  14:             options.SourceRect = new Rect(this.Position, new Point(this.Position.X + width, this.Position.Y + height));

  15:             await this.CurrentPage.RenderToStreamAsync(stream, options);

  16:         }

  17:         else

  18:             await this.CurrentPage.RenderToStreamAsync(stream);

19:

  20:         BitmapImage source = new BitmapImage();

  21:         source.SetSource(stream);

  22:         imgRenderSurface.Source = source;

  23:     }

24:

  25:     this.txtPage.Text = string.Format("{0} of {1}", this.CurrentPageIndex + 1, this.Document.PageCount);

  26: }

The updated RenderPage method works differently when the ZoomFactor is different from 1.0 (no zoom). It then creates a PdfPageRenderOptions instance and set the DestinationWidth and DestinationHeight properties to the size of the whole page. Then, using the SourceRect it sets a rectangle of a reduced size, and the result is rendered to the image surface. This make the output image being a zoom of the source rectangle without losing in quality.

Try by yourself

The example I presented is available for the download attached to this article. You can try by yourself the code I’ve talked about in the previous paragraphs. The Windows.Data.Pdf namespace will let you add some interesting features to your apps, but please do not expect so much from it since it is a very minimal toolset that I hope will be improved in future releases.

Windows 8.1: Alarm and Lock screen call toasts

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 16 Dec 2013 12:07:00 GMT

Download the source code for this article

In Windows 8.1, the notification system has got some new improvements that make it much more flexible. Since the very first relase you have been able to send different typer of notifications called badges, toasts and tiles. These notifications let you interact with the user from the running application and also from a background task, allowing the application to notify messages when it is not running.

Don't miss

All SilverlightShow Ebooks

Starting from the latest relase the toast notifications have got some new interesting features. When the user is notified he can not only dismiss the notification or open the application by clicking the toast, but he can also use a number of predefined commands, presented by the application in specific scenarios. Let start explore the alarm scheduling scenario:

Send alarm toasts

The most simple form of notification, added to this release, is made to emulate an alarm clock. This kind of notification should be raised to notify a scheduled event and it allows to add two additional button, the first to dismiss the notification and the second to snooze the alarm.

As usual, presenting a toast notification means compiling a short chunk of xml. This is because the notifications are designed to be send over a network channel when they are raised by a push notification system. Here is the xml that is composed by the app to send an alarm notification:

   1: <toast duration="long" launch="alarm(eb6c47a8-e5e2-40d0-bc4e-3aa957f36484)">

   2:   <visual>

   3:     <binding template="ToastImageAndText04">

   4:       <text id="1">Silverlight Showtext>

   5:       <text id="2">New article by A. Boschintext>

   6:       <text id="3">Windows 8.1: Alarm and Lock screen call toaststext>

   7:       <image id="1" src="ms-appx:///Assets/SilverlightShow.png" alt="hallo" />

   8:     binding>

   9:   visual>

  10:   <audio loop="true" src="ms-winsoundevent:Notification.Looping.Alarm2" />

  11:   <commands scenario="alarm">

  12:     <command id="snooze" />

  13:     <command id="dismiss" />

  14:   commands>

  15: toast>

The notification xml is divided in three parts:

visual: it contains the visual aspect of the notification. It can be selected between 8 different templates you can see on this page. http://msdn.microsoft.com/en-us/library/windows/apps/hh761494.aspx The showed xml is the most complex that contains three lines of text (the first one in bold) and an image of 90x90 pixels.

audio: it describes the sound to be played when the notification appears. It can assume a number of predefined sounds that are listed in this page: http://msdn.microsoft.com/en-us/library/windows/apps/br230842.aspx

commands: this is the most important section that determines the scenarion (in this case "alarm") and the enabled commands. They must be "snooze" or "dismiss" for alarm notifications.

Once you compiled the xml it is time to send it to the notification system. In this scenario I'll use a ScheduledToastNotification that allows to specify some parameters that apply to the given commands.

   1: private void NotifyScheduled(string toast, int delay = 5, int snooze = 300, int maxSnoozeCount = 3)

   2: {

   3:     XmlDocument document = new XmlDocument();

   4:     document.LoadXml(toast);

5:

   6:     var notifier = ToastNotificationManager.CreateToastNotifier();

   7:     var scheduledToast = new ScheduledToastNotification(document, DateTime.Now.AddSeconds(delay), TimeSpan.FromSeconds(snooze), (uint)maxSnoozeCount);

   8:     notifier.AddToSchedule(scheduledToast);

   9: }

In the first line the xml is converted to a XmlDocument instance. It is because the ToastNotification require this type. After the xml has been parsed, using the ToastNotificationManager it is created an instance of a notifier, responsible to communicate with the notification system. Then the code creates the scheduled notification passing as arguments the date and time of the alarm, the snooze timeout and the max number of snoozes it allows (0 means infinite). The notification is then added to the notifier.

This code cause the appearance of the following notification, after a couple of seconds (the delay):

The two buttons in the figure corresponds to the commands that has been send to the notifier. They act automatically without the needs of intervention by the developer code.

The sole thing you have to be aware is that the manifest should be modified partially with the designer and partially by hand. You have to create a dummy background task (no code required) to allow the app to run when it is closed. In a real world application this task should work to collect notification and schedule notifications. Here a snippet from the manifest:

   1: <Extensions>

   2:   <Extension Category="windows.backgroundTasks" EntryPoint="SamplePlaceholder">

   3:     <BackgroundTasks>

   4:       <Task Type="audio" />

   5:       <Task Type="timer" />

   6:     BackgroundTasks>

   7:   Extension>

   8:   <m2:Extension Category="windows.alarm" />

   9: Extensions>

The "windows.alarm" category has to be added manually because it is not supported by the designer.

Handle incoming calls

Many applications are currently made to communicate each other. In these days the traditional phone call and text messages have been often passed by applications like skype and whatsapp that give better features for free or at a lower rate. This requires that the application framework directly supports these new scenarios and accept a new kind of notification that is able to notify an incoming call. Windows 8.1 accepted the challenge in this scenario so they added a new kind of toast notifications, able to work in lock screen applications that enable the developers to present notifications to the user and receive the choosen options as answer.

As for alarm notifications, the lock screen calls are made of a brief chunk of xml. It is presented in the following snippet:

   1: <toast duration="long" launch="ls(60129d07-a1af-4b53-840b-669d09f1c013)">

   2:   <visual>

   3:     <binding template="ToastImageAndText04">

   4:       <text id="1">Silverlight Show callingtext>

   5:       <text id="2">A new call is incomingtext>

   6:       <text id="3">You can answer the call in voice or video...text>

   7:       <image id="1" src="ms-appx:///Assets/SilverlightShow.png" alt="hallo" />

   8:     binding>

   9:   visual>

  10:   <audio loop="true" src="ms-winsoundevent:Notification.Looping.Call3" />

  11:   <commands scenario="incomingCall">

  12:     <command id="decline" />

  13:     <command id="video" arguments="Incoming Video Call" />

  14:     <command id="voice" arguments="Incoming Voice Call" />

  15:   commands>

  16: toast>

The sections in the xml are exactly the same as in alarm notifications. the sole difference are in the scenario's name that is "incomingCall" and in the commands. The commands for an incoming call includes "decline" to close the call without an answer, "voice" to accept the voice call or "video" to accept both voice and video parts of the call. In these two commands you can specify an argument that will be used by the application to understand how to operate with the user's choice.

The provided snippet will show a toast notification like the following:

Of course you are not required to specify both the commands "video" and "voice" but you can tailor the needed commands on the basis of the features of your applications. You can also omit to specify the "decline" command and it will not be showed in the toast, but the user can always dismiss the notification with the well known gestures.

To raise the notification you can use a simplified version of the code presented for alarm notifications. The following snippet show the code required:

   1: private void NotifyImmediate(string toast)

   2: {

   3:     XmlDocument document = new XmlDocument();

   4:     document.LoadXml(toast);

5:

   6:     var notifier = ToastNotificationManager.CreateToastNotifier();

   7:     var scheduledToast = new ToastNotification(document);

   8:     notifier.Show(scheduledToast);

   9: }

I think the code is so simple and it does not requires a detailed explanation. Once you have setup the commands and raised the notification you probably would want to get a notification when the user clicks one of the commands. This is done using the OnLaunched event in the App.xaml.cs. In the following snippet I show the simple code required to handle the incoming call:

   1: protected async override void OnLaunched(LaunchActivatedEventArgs e)

   2: {

   3:     // ...initialization here...

4:

   5:     if (!string.IsNullOrEmpty(e.Arguments))

   6:     {

   7:         rootFrame.Navigate(typeof(NotificationPage), e.Arguments);

   8:     }

9:

  10:     // Ensure the current window is active

  11:     Window.Current.Activate();

  12: }

A toolkit to generate toast xml

There are a number of ways to compile the xml required to send a notification, you can simply concatenate a string (no, I do not suggest to take this in serious consideration), you can use a XDocument object or you can create a number of types to be serialized to the required xml format. In the download provided with the article you will find a portable class library called XPG.ToastToolkit.dll that contains a useful object model and utility classes that let you generate easily the xml toast. You can write a code similar to the following to send an alarm notification:

   1: private void bAlarm_Click(object sender, RoutedEventArgs e)

   2: {

   3:     Toast toast = new Toast

   4:     {

   5:         Duration = "long",

   6:         Launch = "alarm(" + Guid.NewGuid().ToString() + ")",

   7:         Audio = new ToastAudio { Loop = true, Source = "ms-winsoundevent:Notification.Looping.Alarm2" },

   8:         Visual = new ToastVisual

   9:         {

  10:             Binding = new ToastImageAndText04Binding

  11:             {

  12:                 Text1 = "Silverlight Show",

  13:                 Text2 = "New article by A. Boschin",

  14:                 Text3 = "Windows 8.1: Alarm and Lock screen call toasts",

  15:                 Image1 = new ToastImage { AltText = "hallo", Source = new Uri("ms-appx:///Assets/SilverlightShow.png") }

  16:             }

  17:         },

  18:         Scenario = new Alarm

  19:         {

  20:             CanDismiss = true,

  21:             CanSnooze = true

  22:         }

  23:     };

24:

  25:     this.NotifyScheduled(toast);

  26: }

All the work is made inside the Toast class and the inner hierarchy. Feel free to use it in your applications.

Windows 8.1: Improved device interactions

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 02 Dec 2013 11:41:00 GMT

Download the source code for this article

Don't miss

All SilverlightShow Ebooks

When developing for a traditional computer, we are use to almost completely forget the environment where we are running. Usually each application works without being aware of other software installed and of device services like an address book or a calendar. This is different in Windows 8, when you run inside the Windows Runtime, where you can share between applications using contracts and you can rely on some baseline services that provide a uniform usability to the user. In Windows 8.1 you gain some new features in this area, that let you being much more in contact with the underlying operating system and provide a better user experience.

Appointments and Contacts

In Windows 8 the interaction with the calendar and address book of the device was really basic. It only allowed to add, update and remove contacts from the address book. In the new version of the operating system it is now also possible to manage appointments as well as the contacts, but you are also able to write a replacement application for the default calendar application. This not only means you can manage appointments invoking the system application, but also you can completely rewrite the system application to manage appointments and being invoked by other apps for appointment actions. Let examine the following snippet of code:

   1: private string id;

2:

   3: private async void AddAppointment_Click(object sender, RoutedEventArgs e)

   4: {

   5:     Appointment appointment = new Appointment();

6:

   7:     appointment.Subject = "Going to cut my hairs";

   8:     appointment.Location = "Venice";

   9:     appointment.StartTime = new DateTimeOffset(2013, 12, 5, 17, 0, 0, TimeSpan.FromHours(1));

  10:     appointment.Duration = TimeSpan.FromHours(1);

11:

  12:     var buttonRect = this.GetElementRect((FrameworkElement)sender);

  13:     this.id = await AppointmentManager.ShowAddAppointmentAsync(appointment, buttonRect, Windows.UI.Popups.Placement.Below);

14:

  15:     if (!string.IsNullOrEmpty(id))

  16:     {

  17:         MessageDialog dialog = new MessageDialog(this.id);

  18:         await dialog.ShowAsync();

  19:     }

  20: }

With this simple code we are able to invoke the default calendar application to ask to add a new appointment. The appointment we are about to add is very simple, made only of a subject, a location, a start time and a duration. These are only some of a huge number of properties we are able to set when we add an appointment.

The other properties also include the Details, BusyStatus, Reminder, Sensitivity, an associated Url, and also details about organizer and invitees and invitations. These are the common properties you are use to set when you create an appointment in a modern calendar application like outlook. With this code, the system is invoked and it will open a popup where it is shown the ui provided by the default application. The image on the right side shows the resulting popup.

As a result of the operation you can get an empty string meaning that the popup has been dismissed without adding any appointments or the unique identifier of the appointment.

With this identifier you are able to invoke replacement or deletion of existing appointment. These operations also show a popup that ask the confirmation of the operation, with details about the appointment that is about to be replaced or deleted. When you replace an appointment the identifier of the new appointment is the same as the previous appointment but always rely to the returned id because the behavior may be different when the default application is replaced by a custom application.

Finally you can also invoke the calendar to show a specific timeframe, to enable your user to scan for free slots to assign to new appointmente. In this case the UI will not be invoked in a popup but will be opened on an half of the screen. Here is a snippet of code to show how to invoke these other operations.

   1: private async void RemoveAppointment_Click(object sender, RoutedEventArgs e)

   2: {

   3:     var buttonRect = this.GetElementRect((FrameworkElement)sender);

   4:     await AppointmentManager.ShowRemoveAppointmentAsync(this.id, buttonRect);

   5: }

6:

   7: private async void ReplaceAppointment_Click(object sender, RoutedEventArgs e)

   8: {

   9:     Appointment appointment = new Appointment();

10:

  11:     appointment.Subject = "Going to cut my hairs AGAIN!";

  12:     appointment.Location = "Venice";

  13:     appointment.StartTime = new DateTimeOffset(2013, 12, 5, 18, 0, 0, TimeSpan.FromHours(1));

  14:     appointment.Duration = TimeSpan.FromHours(1);

15:

  16:     var buttonRect = this.GetElementRect((FrameworkElement)sender);

  17:     this.id = await AppointmentManager.ShowReplaceAppointmentAsync(this.id, appointment, buttonRect);

18:

  19:     if (!string.IsNullOrEmpty(id))

  20:     {

  21:         MessageDialog dialog = new MessageDialog(this.id);

  22:         await dialog.ShowAsync();

  23:     }

  24: }

  25: private async void ShowTimeframe_Click(object sender, RoutedEventArgs e)

  26: {

  27:     await AppointmentManager.ShowTimeFrameAsync(new DateTimeOffset(2013, 12, 5, 18, 0, 0, TimeSpan.FromHours(1)), TimeSpan.FromHours(1));

  28: }

As I've anticipated, you can also provide your own calendar application and being active in the other side of the calls I've described in the previous paragraphs. This means you can wrap up your own company calendar with a custom application and make it automatically handled by the device and invoked by each application that need to add/remove appointments. For this purpose you have to add the following code to your application's manifest:

   1: <Extensions>

   2:   <m2:Extension Category="windows.appointmentsProvider">

   3:     <m2:AppointmentsProvider>

   4:       <m2:AppointmentsProviderLaunchActions>

   5:         <m2:LaunchAction Verb="addAppointment" EntryPoint="XPG.DeviceInteraction.App"/>

   6:         <m2:LaunchAction Verb="replaceAppointment" EntryPoint="XPG.DeviceInteraction.App"/>

   7:         <m2:LaunchAction Verb="removeAppointment" EntryPoint="XPG.DeviceInteraction.App"/>

   8:         <m2:LaunchAction Verb="showTimeFrame" EntryPoint="XPG.DeviceInteraction.App"/>

   9:       m2:AppointmentsProviderLaunchActions>

  10:     m2:AppointmentsProvider>

  11:   m2:Extension>

  12: Extensions>

This block should be inserted into the Application tag, be only sure you have defined the "m2" namespace as the following uri: http://schemas.microsoft.com/appx/2013/manifest. Each LaunchAction is related to the verb you want to handle and will cause your application to be activated with the ActivationKind equals to AppointmentsProvider. The area of the popup will be an application view that hosts a completely new instance of your application.

Managing appointments also means the need to query contacts - as an example to choose invitees for an event - but this is already supported by the previous Windows 8 api. In this release they add a new feature that lets you answer to contact actions. Contact actions are the one shown when you search a contact and you are presented with a number of buttons related to the information of the contact. A simple action could be the call to its phone number, the mapping of its address, the composition of a mail message when the contact exposes a mail address, etc...

Again to enable this feature you have to manually change the package manifest:

   1: <Extensions>

   2:     <Extension Category="windows.protocol">

   3:       <Protocol Name="tel"/>

   4:     Extension>

   5:     <m2:Extension Category="windows.contact">

   6:       <m2:Contact>

   7:         <m2:ContactLaunchActions>

   8:           <m2:LaunchAction Verb="call">

   9:             <m2:ServiceId>telephonem2:ServiceId>

  10:           m2:LaunchAction>

  11:           <m2:LaunchAction Verb="message">

  12:             <m2:ServiceId>skype.comm2:ServiceId>

  13:           m2:LaunchAction>

  14:           <m2:LaunchAction Verb="map"/>

  15:         m2:ContactLaunchActions>

  16:       m2:Contact>

  17:     m2:Extension>

  18: Extensions>

The declaration for the "tel" protocol will handle the call to PSTN numbers but the additional extensions will handle the activation for other type of actions like skype calls, messages and mapping. As for the appointments activation these should be handled in the OnLaunch and OnActivated events of the application where you will receive an ActivationKind of type Contact.

   1: protected override void OnActivated(IActivatedEventArgs args)

   2: {

   3:     if (args.Kind == ActivationKind.Contact)

   4:     {

   5:         var contactArgs = args as IContactActivatedEventArgs;

6:

   7:         if (contactArgs.Verb == Windows.ApplicationModel.Contacts.ContactLaunchActionVerbs.Map)

   8:         {

   9:             IContactMapActivatedEventArgs mapArgs = contactArgs as IContactMapActivatedEventArgs;

  10:             this.ActivateForContact(mapArgs.Contact, mapArgs.Address);

  11:         }

  12:     }

  13: }

14:

  15: private void ActivateForContact(Contact contact, ContactAddress contactAddress)

  16: {

  17:     // TODO: Activate here the required page

  18: }

Interact with libraries

Another interesting feature, that should give much more value to your apps is the ability of manage libraries. A library is a folder that contains items of the same type. They can be Pictures, Video, Music and Documents. With this new feature, you application can ask to add a folder to one of these libraries and be able to manage files inside of it. The first thing to do is to take a reference to the library you need to work with:

   1: StorageLibrary library = await StorageLibrary.GetLibraryAsync(KnownLibraryId.Documents);

Once you get a reference to the library you are able to add and remove a folder. this shows the system picker that let you choose the existing folder, also if it is hosted in skydrive. The folder then, is completely under your control and you can create and remove files. Here is a snippet that show a complete activity:

   1: private async void StorageLibraryAdd_Click(object sender, RoutedEventArgs e)

   2: {

   3:     try

   4:     {

   5:         StorageLibrary library = await StorageLibrary.GetLibraryAsync(KnownLibraryId.Documents);

   6:         StorageFolder folder = await library.RequestAddFolderAsync();

7:

   8:         // check if user canceled

   9:         if (folder != null)

  10:         {

  11:             StorageFile file = await folder.CreateFileAsync("document.txt");

12:

  13:             using (StreamWriter writer = new StreamWriter(await file.OpenStreamForWriteAsync()))

  14:             {

  15:                 writer.WriteLine("this is a text document...");

  16:             }

  17:         }

  18:     }

  19:     catch(Exception ex)

  20:     {

  21:         MessageDialog dialog = new MessageDialog(ex.Message);

  22:         dialog.ShowAsync();

  23:     }

  24: }

Be aware that wher you call the RequestAddFolderAsync method, it can return a null value meaning the user canceled the addition.

To enable the access to the libraries you ar requested to add a capability to the manifest, from the editor. Remember that, if you need to access the Documents library you also have to add a file association to associate the files you create with your application .

1:

2:

   3: <Extension Category="windows.fileTypeAssociation">

   4:   <FileTypeAssociation Name="txt">

   5:     <DisplayName>TextDisplayName>

   6:     <EditFlags OpenIsSafe="true" />

   7:     <SupportedFileTypes>

   8:       <FileType ContentType="text/plain">.txtFileType>

   9:     SupportedFileTypes>

  10:   FileTypeAssociation>

  11: Extension>

12:

13:

14:

  15: <Capabilities>

  16:   <Capability Name="internetClient" />

  17:   <Capability Name="picturesLibrary" />

  18:   <Capability Name="musicLibrary" />

  19:   <Capability Name="videosLibrary" />

  20:   <Capability Name="documentsLibrary" />

  21: Capabilities>

Manage the touch keyboard

When you are on a touch device, without a mouse, the operating system tries to automatically popup the touch keyboard when you enter a textbox, because this means you need to type some characters. Until today only the text input elements are enabled to cause the touch keyboard to be showed, but there are cases when you may need to enter some text, also if you have not any textbox. For Windows 8.1 this is now possible using the automation helpers that associate to an arbitray item the requirements to have the touch keyboard opened.

Given you created a control, also an user control, the first thing is to create an automation peer. Implementing an automation peer is not a very simple thing. It is a class that implements a number of interfaces - in this case it implement ITextProvider and IValueProvider together with the FrameworkElementAutomationPeer base class - to provide services related to the behavior of the interface in the environment. Once the provider has been created - with all its logic and eventually nested classes - you must override the OnCreateAutomationPeer method in the control and return an instance of the automation peer:

   1: protected override Windows.UI.Xaml.Automation.Peers.AutomationPeer OnCreateAutomationPeer()

   2: {

   3:     return new CustomTextInputAutomationPeer(this);

   4: }

After this has been accomplished (I'll attach a project containig a base automation peer created using MSDN samples as a track), you must ensure the focus is set to your control. This means hook the OnTapped event and set the focus to the control. Once the focus had been set, the automation peer makes the work causing the touch keyboard to be showed up. Here is the full code of the user control:

   1: public sealed partial class CustomTextInput : UserControl

   2: {

   3:     public CustomTextInput()

   4:     {

   5:         this.InitializeComponent();

   6:         this.IsTapEnabled = true;

   7:         this.IsTabStop = true;

   8:         this.Text = string.Empty;

   9:     }

10:

  11:     protected override Windows.UI.Xaml.Automation.Peers.AutomationPeer OnCreateAutomationPeer()

  12:     {

  13:         return new CustomTextInputAutomationPeer(this);

  14:     }

15:

  16:     protected override void OnTapped(TappedRoutedEventArgs e)

  17:     {

  18:         this.Focus(Windows.UI.Xaml.FocusState.Pointer);

  19:     }

20:

  21:     public string Text { get; set; }

  22: }

Obviously you can then get touch inputs using KeyDown event in the control. Beautiful feature, but I would like something much more simple and straightforward...

Conclusion

In this article I talked about some new features that may sounds trivial, but as an careful exam they are really powerful to give a better feedback to your user. Besides the touch keyboard that requires a lot of work to implement a complex automation peer, alle of them are easy to be implemented and should be taken in serious consideration every time you need to develop a new app.

Windows 8.1: Application Views improvements

editorial@silverlightshow.net (Andrea Boschin ) — Tue, 26 Nov 2013 11:28:00 GMT

Don't miss

All SilverlightShow Ebooks

To me, one of the most useful features in Windows 8 is the application's snapping which lets me to see up to two applications at the same time on the screen. On my tablet and in the desktop there are often reasons to snap an application on the side (e.g. skype is a good candidate for snapping) and continue to work, on the main screen, with the desktop or another application. In the first release of Windows 8 this feature is still limited by some constraints. You can snap only one application (for a total of 2 side by side) and the snapped app is always 320 pixel wide, no matter the size of your monitor.

With Windows 8.1 these constraints have been changed to improve the snapping. Depending on the size of the screen you can now snap up to 4 applications and the size is now freely decided using a splitter between the applications. These improvements required some new features to be added to the developer toolset and in this article I'll show you the magic around the improved Application View management.

Application View and the basics

Application Views is the object that lets you manage the area where the application is hosted. It exists since the very first release of the operationg system, but due to the new improvements in this field, it has gained a set of new functions. To get an instance of the current application view you have to use the GetForCurrentView method as shown below.

   1: var applicationView = ApplicationView.GetForCurrentView();

Differently from the previous version, where the static class only exposed the current state, this instance, which directly refers to the area of the current application, contains a number of useful properties. The Id is an unique identifier directly related to a new feature which I'll discuss in the next part of the article and the same is for Title that lets you give (and read) a title for the view that will be shown, for example, in the thumbnail list of running apps that appears when you swipe the left side of the screen. Other useful properties are related to the current state of the application:

AdjacentToLeftDisplayEdge and AdjacentToRightDisplayEdge: these properties inform if the view is currently snapped and is adiacent to one of the screen edges. It is useful to dock controls according to the detected position.
IsFullScreen: it is true when the app fills the entire screen.
IsOnLockScreen: this inform if the application is no the lock screen of Windows
IsScreenCaptureEnabled: this read/write property allows to prevent the user to take screenshoots of the application canvas. This let you protect your rights from unwanted copies and disclosures.
TerminateAppOnFinalViewClose: This property determines if the application should terminate when its last view is closed.
Orientation: As expected you can also detect the current orientation of the screen between Landscape and Portrait.

The important to know is that the application view does not have nothing to do with the current page. It is much more related to the container of the pages. As a consequence you can take a reference to the application view once and use it in all the pages of the application. Please note that the property ApplicationView.Value has been deprecated and should not be used.

To dinamically handle the application view changes you should rely on Windws size changes. This event is raised also when the orientation changes or when the view is resized because of a snapping or unsnapping. Thanks to this you can update the application layout according to a combination of the values of these properties:

public sealed partial class MainPage : Page

{

    private ApplicationView ApplicationView { get; set; }

  

    public MainPage()

    {

        this.InitializeComponent();

        this.ApplicationView = ApplicationView.GetForCurrentView();

        Window.Current.SizeChanged += Current_SizeChanged;

    }

  

    protected override void OnNavigatedTo(NavigationEventArgs e)

    {

        this.UpdateVisualState();

        base.OnNavigatedTo(e);

    }

  

    private void Current_SizeChanged(object sender, Windows.UI.Core.WindowSizeChangedEventArgs e)

    {

        this.UpdateVisualState();

    }

  

    private void UpdateVisualState()

    {

        this.txtView.Text = this.ApplicationView.Orientation.ToString();

    }

}

Working with multiple views

One new and interesting feature that comes with Window 8.1 is the capability to open multiple views from a single application. This is someway similar to spawning multiple windows in a desktop application but these does not appears in popup. The additional views instead are snapped or also they can fill the entire screen and hide the main application view. As the proof of fact the spawned application views work like an autonomous application.

To create a new aplication view you have to use the CoreApplication class paying attention to the context of the thread where you work. This infact determine the scope of the Window.Current property that you can use to initialize the new view. Here is a simple snippet that creates a new view:

private async System.Threading.Tasks.Task<int> CreateNewView()

{

    CoreApplicationView newView = CoreApplication.CreateNewView();

    int newViewId = 0;

  

    await newView.Dispatcher.RunAsync(

        CoreDispatcherPriority.Normal,

        () =>

        {

            Frame frame = new Frame();

            frame.Navigate(typeof(SecondaryPage));

            Window.Current.Content = frame;

            newViewId = ApplicationView.GetForCurrentView().Id;

        });

  

    return newViewId;

}

As you can see, after having create the view with you need to attach its dispatcher to synchronize to its thread. When the labda is called you are in the context of the new view thread and the Window.Current points to the new application view Window. So, as you do usually in the app.xaml.cs you can creae a new frame and navigate to a page. Also pay attention that the call to GetForCurrentView here points to the new view so its Id is returned to the main thread.

After this code has run the view has been created and initialized but it is still hidden. To display the view you have to activate it using the ApplicationViewSwitcher class. It suffice a simple line of code:

bool shown = 

    await ApplicationViewSwitcher.TryShowAsStandaloneAsync(newViewId, ViewSizePreference.UseLess);

The TryShowAsStandaloneAsync method gets the id of the view and a parameter that determines its initial size. This method has a numer of overloads that are useful to position the new view. In these overloads you can detemine not only the size of the new view but also the size of the exiting one. A combination of ViewSizePreference lets you make the main view small and the new one big or instead make them divide the space half and half. Do your tryies to get the result that mostly respect your needs.

Then, you may need to close the secondary view. This is done using the SwitcAsync method in the ApplicationViewSwitcher that let you move between the views. You always have to specify the destination view and the starting view together with a parameter that says how to the switch behaves. Using the ConsolidateViews switch you ask the system to close the from view. This also means you are destroying the view and it should be removed from your management constructs.

Animate the transitions

Additional application views are for sure an interesting opportunity for the cases where you need to simulate multi-document application, having secondary view spawned in answer to different documents opened. This way you can create a single logic handling a document and then create a new view and start this logic with a reference with the document itself.

Give that we are in a Windows Store app that, by definition, should be graphically appealing, fast and fluid as the pillar says, the team added the capability to use animations to make the switch between views someway much more fluid and beautiful. The sole support to this feature is from a method called "PrepareForCustomAnimatedSwitchAsync" that simply acquires the same parameters of TryShowAsStandaloneAsync, but simply prepares the ui to a subsequent switch of view. The whole animation must be handled directly from your code.

This makes the work subtly complicated because the views must be created with the effect in mind and prepared for the switching operations. On the other side is geves you the most of the control so you are not constrained to a fading animation (as the example shows), but you can apply you fantasy to get the best. So first of all you have to create the storyboards in the xaml:

<Page.Resources>

    <Storyboard x:Name="fadeOut">

        <FadeOutThemeAnimation Duration="00:00:01.00" Storyboard.TargetName="root" Completed="fadeOut_Completed" />

    Storyboard>

Page.Resources>

In this example I'll show how to handle a fading animation from the MainPage to the secondary. The main page will be faded out and then replaced by the SecondaryPage. In the code behind you can handle this in different ways. In my case I simply drive the animation from the main page but, if you want also the secondary page to fade-in when entering, the best will be to make each page to drive his half of the animation.

TaskCompletionSource<bool> tcs = new TaskCompletionSource<bool>();

  

private void fadeOut_Completed(object sender, object e)

{

    tcs.SetResult(true);

}

  

private System.Threading.Tasks.Task FadeOut()

{

    fadeOut.Begin();

    return tcs.Task;

}

  

private async void Button_Click(object sender, RoutedEventArgs e)

{

   var newView = await CreateNewView();

  

   bool shown = await ApplicationViewSwitcher.PrepareForCustomAnimatedSwitchAsync(

       newView.Id, this.ApplicationView.Id, ApplicationViewSwitchingOptions.SkipAnimation);

  

   if (!shown)

   {

       await this.FadeOut();

  

       int fromId = this.ApplicationView.Id;

  

       await newView.ApplicationView.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,

           async () =>

           {

               await ApplicationViewSwitcher.SwitchAsync(newView.Id, fromId, ApplicationViewSwitchingOptions.SkipAnimation);

           });

   }

}

The code here calls the PrepareForCustomAnimatedSwitchAsync method then starts the animation asynchronously. Once the animation completes, the task is closed (see the SetResult) and the control returns to the main thread. In this moment the interface has been faded out so, waitin the signal from the new view's dispatcher, its thread calls the SwitchAsync method that does the final part of the view switching.

The operation is not so easy as expected but the effect may be beautiful to see. You can imagine to move object, apply a zoom, or simply use a fading animation as in my code. But the switching needs to be carefully planned and the framework does a little to help you.

Application switching and protocols

Once you understand the reason of creating multiple views, it become really useful to split parts of the logic to handle document specific tasks. In this context you may find useful to handle protocol or file association to directly open a secondary view. This is really easy to be implemented if you simply handle the protocol (or file) activation and you do the switch to the right view.

Hello Windows 8.1: what's new in the update for developers Part 6: Updates in the tooling for Windows 8.1

editorial@silverlightshow.net (Gill Cleeren ) — Mon, 25 Nov 2013 18:28:00 GMT

Download the source code for this article

Welcome to part 6, the last part in this article series on Windows 8.1. We’ve made it to the very end! In the previous parts, we’ve spent some time looking at the new things in Windows 8.1 itself. In this last part, we’re changing gears slightly and we will spend some time looking at the tool that makes it possible to create apps for Windows 8.1: Visual Studio 2013. There are a lot of interesting aspects coming with the new versions of the IDE so let’s see how we can become more productive as a XAML developer!

Don't miss

All SilverlightShow Ebooks

Visual Studio 2013: the new standard

Visual Studio 2012 was a great tool but in some areas, it was still somewhat lacking. In the XAML editing experience we got, there were definitely some improvements possible. With Visual Studio 2013, Microsoft has done with Visual Studio for the XAML developer what it has done in the control area. A great number of improvements have been made. Let’s take a look at some of these.

To start with, Visual Studio 2013 again comes in several SKUs: Professional, Premium and Ultimate. Somewhat surprising is that with 2013, you can only create and maintain Windows 8.1 applications. You cannot create new Windows 8 applications any longer, although you can maintain them. One could ask how long it will still be needed that we start the development of new Windows 8 apps and instead go to Windows 8.1 directly. That being said, you can do a side-by-side install of 2012 and 2013, should you still have the need to create new 8.0 apps. Of course, there’s also a free, Express edition, but we won’t spend any time on that here.

A first question is: should I update my existing apps? Just so you’re clear on this: if you today have a Windows 8 app in the store, any user with Windows 8 or Windows 8.1 will be able to install that app. So from that point of view, there’s no need to immediately start panicking, thinking that you’re missing out on a lot of possible installs. If you want, you can in the store upload both a Windows 8 and a Windows 8.1 version of your app. Depending on the version of Windows used by the user, he’ll either get the 8.0 or the 8.1 version. But coming back to that question. There’s definitely a value in updating existing apps (and by updating I mean just opening the solution in 2013 and re-targeting, as shown a little further): your apps will start faster, certainly if they contain a ListView. The memory footprint of the app will also be lower. One of the main reasons for this is that Windows 8.1 doesn’t load in all keyed resources at startup, which has a huge performance impact! Also, panning on ListViews will definitely give a better experience (the fact that the ListView had issues redrawing items, has been fixed).

So just by retargeting your app, you’ll get a lot of benefits. But how do you do this retargeting? Well, it’s pretty simple. Open your 2012/Windows 8 solution in your freshly installed VS2013. It will start by recommending that you should update, as shown below.

Hitting OK won’t do anything just yet. Head over to the Solution Explorer and right-click on the solution. Select Retarget to Windows 8.1 and sit back. Your app is now being readied to become a Windows 8.1 app!

VS2013 brings a lot of goodness to the table. We’re getting a new project template, based on the Hub Control. This gives you a head start building an app that is built around the Hub Control.

Other improvements focus on better diagnostics, better integration for Azure Mobile Services (you can now add such a service through the Service Manager), shown below.

XAML Editing improvements

As mentioned, in the XAML editing experience, we could definitely use some improvements. Below is an overview of the things I think you’ll really want to know when you start on a new Windows 8.1 project using XAML!

Improved XAML IntelliSense

I was always sad (or should I say slightly frustrated…) when I accidentally typed StakPanel (forgetting the C for example). What happened was that Visual Studio automatically jumped to the first item in the IntelliSense list. Not what I wanted it to do.

In VS2013, Microsoft has added some fuzzy logic that makes VS think about what you want IntellSense to do.

Also improved is the ability to work with closing tags. Normally, when we thought that a closing tag was no longer useful (so for example ) and we wanted to replace it with , we had to do that manually.

VS2013 makes our lives again a bit easier: when I type a / in the opening tag, it will automatically remove the closing tag.

Another XAML editing improvement is tag matching. Assume you have a Grid and you want to replace it with a StackPanel. Normally, you start by changing the opening tag, then get a lot of VS squiggly lines, then change the closing tag. In VS2013, Microsoft has changed the experience there as well. When we start editing an opening tag, it will automatically match the closing tag as well.

There are some other tweaks in there such as matching the member you’re looking for, based on a substring (so finding StackPanel when you type Panel). Quite related is the ability to type SP when you want to add a StackPanel. Basically, what you’re doing then is using camel case matching.

Data binding improvements

Also on the data binding front, Microsoft has added a lot of extra XAML features. If we specify the data source for the data binding in the XAML code itself, we’ll get more intelligent IntelliSense suggestions. Let’s take a look.

Assume we have a basic viewmodel defined, named MainViewModel.

   1:  public class MainViewModel

   2:  {

   3:      public string FirstName { get; set; }

   4:      public string LastName { get; set; }

5:

   6:      public MainViewModel()

   7:      {

   8:          this.FirstName = "Gill";

   9:          this.LastName = "Cleeren";

  10:      }

  11:  }

We then instantiate this class as resource (for example at the app level):

   1:  <Application

   2:      x:Class="DataBindingInXaml.App"

   3:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   4:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   5:      xmlns:local="using:DataBindingInXaml">

   6:      <Application.Resources>

   7:          <local:MainViewModel x:Key="localMainViewModel">local:MainViewModel>

   8:      Application.Resources>

   9:  Application>

If we now set the DataContext for the entire page to this instance, we’ll get good IntelliSense on the properties in the viewmodel.

Note that this of course only works if the data context has been set via XAML. If you would use code-behind or perhaps a ViewModelLocator, this won’t work. You can still then use design-time data and you’ll get the same IntelliSense there as well.

Resources

It has also become easier to work with resources. If you have declared a resource anywhere in your project, you’ll get IntelliSense suggesting it to you. Below, you can see the instance of the viewmodel used above being suggested.

Notice that also the other resources (such as Brushes) are being suggested. VS2013 also gets the resources defined in the generic.xaml and adds them to the list. So although these resources have now been moved to a file outside of the scope of the project, we can still get the resources while editing the XAML code.

Go To Definition

With Visual Studio 2013, it has now become possible to do a Go To Defintion on a lot of things, including resources and data binding statements.

Assume we have the following code (which is some default code that gets generated when executing the new Hub template):

If we now press F12 (the default shortcut for navigating to the definition), VS2013 will search all possible resources and open the containing file if found. In this case, we’ll see the generic.xaml being opened.

This generic.xaml is the file that contains the default style definitions for controls. Previously, these were contained in the StandardStyles.xaml but that has changed with Windows 8.1. Now these styles have all been moved to the generic.xaml.

But back to what we were looking at: we can see that we can navigate to resources. But F12 can do much more. Assume we have the same example again with the viewmodel. If we select the FirstName property and the F12 on that, we’ll be transferred to the property in the viewmodel automatically.

If you F12 on a built-in type, VS2013 will open the Object Browser. If we for example F12 with a StackPanel selected, we’ll see the following happening.

Other XAML editing improvements

VS2013 also includes a number of handy editing improvements:

Closing tag matching: if we change the opening tag (say we want to change a Grid into a StackPanel), we can simply change the opening tag and VS2013 will update the closing tag for us (VS2013 had this already for some time for HTML editing but now also has this for XAML).
XAML snippets: VS2013 now also supports snippets in XAML. We can manage snippets via the Snippet Manager (the default installation doesn’t contain any sadly). Tim Heuer has a good overview on how to create your own snippets here: http://timheuer.com/blog/archive/2013/07/08/xaml-code-snippets-for-visual-studio.aspx
Improved commenting: if we want to comment out a large block of XAML and there are already XAML comments in there, the commenting feature used to fall over this. In VS2013, things have improved here as well, as VS2013 will notice that the block you want to comment out already contains XAML comments and make sure these get included in the comment as well.

Summary

In this article, we looked at the new features of Visual Studio 2013. With that, we have concluded this series on the new developer features of Windows 8.1.

Stay tuned for more great content on Windows 8 here at SilverlightShow!

About the author

Gill Cleeren is Microsoft Regional Director, Silverlight MVP, Pluralsight trainer and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina. Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd, TechDays, DevDays, NDC Oslo, SQL Server Saturday Switzerland, Silverlight Roadshow in Sweden, Telerik RoadShow UK… Gill has written 2 books: “Silverlight 4 Data and Services Cookbook” and Silverlight 5 Data and Services Cookbook and is author of many articles for magazines and websites. You can find his blog at www.snowball.be. Twitter: @gillcleeren

Hello Windows 8.1: what's new in the update for developers: Part 5: More improvements to the user experience

editorial@silverlightshow.net (Gill Cleeren ) — Wed, 20 Nov 2013 11:21:00 GMT

Download the source code for this article

Hi and welcome to the fifth part of our exploration of developer updates in Windows 8. We’ve covered a lot of ground already, starting with our tour of XAML improvements (together with Andrea Boschin’s articles), going through some interesting improvements in WinRT and also taking a look at some important changes in the user experience. The latter was the topic of the 4^th article in this series. In this part, we are going to continue by looking at some experience-related changes that we have in Windows 8.1.

Don't miss

All SilverlightShow Ebooks

We are going to start by looking at the new tile sizes and we’ll also briefly look at the new UX guidelines issued by Microsoft. Let’s get started straight away!

New Tiles sizes

In the entire Windows 8 experience, the Start screen is a central aspect. It allows us to pin tiles and this way, it offers the user a customizable way of changing how it behaves. On that Start screen, the tiles play a very important role. The tiles are the ways of interacting with the Start screen. We have already covered here at SilverlightShow the tiles for Windows 8 already quite a lot. Tiles are much more than a shortcut on your desktop. They allow the user customize the Start screen by pinning those tiles which are important for him and often, give a good ‘tile experience’. Since the tile is more than just a way to open an app, it’s important that the developer makes good use of the tile. By showing updates on the tile (local or via push notifications), the tile can lure the user back into the app by showing interesting content. This way, the tile can be considered an extension of the application.

In Windows 8, we were limited to using 2 tile sizes. While those were OK, they didn’t allow fine-grained control over the Start screen, certainly if you compared to the experience we’re getting on Windows Phone. Below, you can see a screenshot of the default Windows 8 experience. Only 2 types of tiles are supported: the square and the wide tile. The square tile was 150x150 pixels, the wide tile was 310x150 pixels.

With Windows 8.1, Microsoft is introducing two more tile sizes, so we now have 4 in total. The extra’s we’re getting are the small (70x70 pixels) and the large tile (310x310 pixels). This gives the end-user more control on how he wants to organize his Start screen. Below is another screenshot, this time of Windows 8.1. This screen features all tile sizes.

Since now 3 out of 4 tile sizes are square, Microsoft has renamed the original square tile size to medium. So, to conclude, we now have small, medium, large and wide tiles available. This of course also has a consequence for the live tile templates, but more on that a little further.

Some other things have changed with the new tiles as well. In Windows 8, we had to include a square tile but when we included a wide tile, the wide tile was pinned by default to the Start screen. In Windows 8.1, we can now specify that you want either the wide or the square tile to be used. You make this selection in the application manifest. Note you can’t set the small or the large as default pin size. Also note that Windows 8.1 doesn’t add the tile by default to the Start screen (which is a great improvement).

In our assets, we must include as the bare minimum the square and the small tile. If you omit the small tile assets, your app will still build and run, since Windows will create the small tile from the assets of the square tile.

A more important change is the name of the live tile templates. When we update a tile, we basically are sending a piece of XML (the tile template). Since the square tile is no longer named “square”, the templates have changed names as well. For example, the commonly used TileSquareImage is now renamed to TileSquare150x150Image (so including the size since we have 3 which are square).

If you’re just updating the tiles from the application, you won’t have a lot of problems (you can use the updated version of the NotificationExtensions library) to work with these new tile template names. But if you’re working with a push notification that pushes both to Windows 8 and Windows 8.1 clients, you may need to change a few things. If you think about it, it’s quite logical: the new names are only known by 8.1. By default, Windows 8 would ignore the new names, thinking they aren’t valid. In this case, what you need to do is including a fallback mechanism. What you need to do, is including a version=2 and a fallback name. The latter indicates the old name the template was known by, therefore letting Windows 8 understand the template as well. If you’re sending a tile update with a large tile update, that won’t do a lot since Windows 8 didn’t have those tiles yet.

Let’s take a look at a sample. We are going to use the NotificationsExtensions library in order not having to write the XML but using the object model around the templates. Below is a screenshot of the generated XML in the application.

Assume that for this application, the developer wants to give the user the choice to either create a medium (square150x150), wide (310x150) and a large (310x310) tile update. If we want to make sure that just any of these 3 templates will receive the update, we need to include them all in the tile update (if we omit one or more, only when the user has the application pinned in the same tile size, the tile will update). Also note that if the user has the application pinned in the small tile size, no live tile update will be received (small tiles don’t support live tile updates, they only support badge updates). That’s why we never have to include that template.

In the sample, we have created a reference to the NotificationsExtensions library.

Once we have this reference in place, we can start using the object model around the tiles. In the code below, we are going to create an update for the large tile using the ITileSquare310x310Text05 template. We also want the update to appear if the user has the app pinned using a wide tile; in this case, we’ll use the ITileWide310x150Text03 template. And to be complete, we also need to specify what we want to show if the app is pinned with the square tile: we use the ITileSquare150x150Text04 for this.

   1:  string userMessage = TileTextTextBox.Text;

   2:  ITileSquare310x310Text05 tileContent =

   3:      TileContentFactory.CreateTileSquare310x310Text05();

   4:  tileContent.TextHeading.Text = userMessage;

5:

   6:  ITileWide310x150Text03 wide310x150Content =

   7:      TileContentFactory.CreateTileWide310x150Text03();

   8:  wide310x150Content.TextHeadingWrap.Text = userMessage;

9:

  10:  ITileSquare150x150Text04 square150x150Content =

  11:     TileContentFactory.CreateTileSquare150x150Text04();

  12:  square150x150Content.TextBodyWrap.Text = userMessage;

  13:  wide310x150Content.Square150x150Content = square150x150Content;

14:

  15:  tileContent.Wide310x150Content = wide310x150Content;

16:

  17:  TileUpdateManager.CreateTileUpdaterForApplication().

  18:      Update(tileContent.CreateNotification());

19:

  20:  ResultTextBox.Text = tileContent.GetContent();

Note that we’re basically chaining the tile updates. This results in the following XML to be sent to the tile:

   1:  <tile>

   2:    <visual version='2'>

   3:      <binding template='TileSquare150x150Text04' fallback='TileSquareText04'>

   4:        <text id='1'>New article on SilverlightShow!text>

   5:      binding>

   6:      <binding template='TileWide310x150Text03' fallback='TileWideText03'>

   7:        <text id='1'>New article on SilverlightShow!text>

   8:      binding>

   9:      <binding template='TileSquare310x310Text05'>

  10:        <text id='1'>New article on SilverlightShow!text>

  11:      binding>

  12:    visual>

  13:  tile>

Note the fallback attribute on each of the binding elements: this way, a Windows 8 installation that would receive this same XML would still be able to update its tile. Also note that the version is now 2.

If you want a visual example of all tile templates that are now available in Windows 8.1, take a look at http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx.

More chrome

To finish this article, let’s take a look at the general UX guidelines. I’m not going to take you through all of these guidelines, they can be found at http://msdn.microsoft.com/en-US/library/windows/apps/hh779072.

However, I do want to put some emphasis on some striking changes that we see in the built-in applications such as the Music or the Health and Fitness app. One of the biggest design principles in Windows 8 was the Content Before Chrome principle. While this still stands in Windows 8, there are some remarkable changes here. Below you can see a screenshot of the XBOX Music app. What we see on the left here, is pure navigation. Those are tabs and in fact, the entire application is now basically a tabbed interface. Also, not that right below the Collection title, we have a couple of buttons, which also do some form of navigation.

In the Health and Fitness application, we see the same trend.

In the screenshot above, all those buttons basically do nothing but navigation. They are content, so they adhere to the principle but it’s interesting to see that those are controls, directly in the app’s UI that perform some action. Previously, Microsoft would have recommended to hide those, perhaps in the app bar. Now, they are visible directly from the application.

Is this a good thing? Definitely! Microsoft lets the design guidelines for Windows 8 evolve, based on feedback. With Windows 8.1, we’re getting more options this way to create more compelling user interfaces, which can only be a benefit for the end user!

Summary

In this article, we’ve looked at some more user experience changes coming with Windows 8.1. Stay tuned for the last article on the tooling using Visual Studio and Blend!

About the author

Hello Windows 8.1: what's new in the update for developers: Part 4: The new user experience

editorial@silverlightshow.net (Gill Cleeren ) — Mon, 18 Nov 2013 12:15:00 GMT

Download the source code for this article

Hi and welcome to the fourth part in this series on new features in Windows 8.1. So far, we’ve covered the new OS from the user’s point of view, some of the new XAML features, some interesting WinRT classes. In this part, we’ll cover some novelties in the user experience like the new screen sizes and the new options for working with tiles.

Don't miss

All SilverlightShow Ebooks

New Window sizes

In Windows 8, apps could basically run in 3 modes. By default, an application was running full-screen. However, Windows 8 wasn’t limited to running just one app at any given point like for example iOS. With SnapView, an app could run in a so-called “snap view”, basically a narrow view of 320 px (x the scale factor if any) that is either docked on the left or the right of the screen. The second app running at this point was then in filled mode. So in total, apps could either be in full, filled or snapped mode. When publishing an app to the store, one of the requirements was making sure that your app would run perfectly in these 3 modes. It wasn’t allowed to omit adding the snap view: if running in snapped mode didn’t make sense for your scenario, you still had to include it and perhaps show an image or some text asking the user to run the app in full-screen mode.

While this was OK, it was still somewhat limiting. That’s probably what Microsoft also thought and so with Windows 8.1, they’ve completely changed the way this works. We now basically can run more apps and they can run in all kinds of screen sizes. Also, the snap mode concept has now become optional, but more on that later.

As you can see from the screenshot below, we can run 3 apps on one screen, where one of the 3 is running in snapped mode.

Or we can run 10 apps, spread over 3 screens. I’m not sure this is a very useful setup but it proves the point that we can run up to 4 apps on one screen. The number of apps you can run on your screen depends on the screen resolution and the physical size of the monitor.

The requirements that you need to follow when building an app have thus also changed. Your app needs to offer the full experience, anywhere from 500px upwards. That means that your app can focus on that 500px being the minimum resolution but it has to make sure that the user can get the full experience at this resolution. The latter is important and is also a change with what we had with snap view. In snapped mode, the app had to give the user a vertical scroll experience, since the 320px-wide window was too narrow to do horizontal scrolling. Now, we can use a horizontal scrolling experience without problems: 500px is wide enough for this, the user won’t accidentally drag the resize-gutter.

So how does this translate into your app then? Well, that depends a bit on the scenario. If you have a “regular” horizontal scrolling app, you probably don’t have to do anything special. Just test that your app looks good at a width of 500px should be enough. In the screenshot below, you can see the Bing Travel app, which is running in the new minimum width of 500px. It simply offers the same experience as in full screen.

If the app is a multi-column app, one option you have is hiding columns when you have less available space. The Mail app does this, as you can see on the screenshot below. Notice the arrow at the top, which will unhide other colums.

If your app is a fixed-size app, you can make it smaller, keeping the aspect ratio in place, as shown below.

Let’s now take a look at how all this works from Visual Studio. For this demo, I’m going to start by using Visual Studio 2012 (the “old” version!) and simply create a new Grid-based application. This template includes a SnapView mode by default.

When we simply build and run this app on Windows 8.1 (which doesn’t have snap mode built-in by default), the application will run in some kind of compatibility mode, known as pillarboxing. Note in the screenshot below that the snap view still works. Any resolution between 320px and 500px is however now supported, but the snap view sits in the middle of 2 black pillars, hence the name pillarboxing.

When we now open this same project in Visual Studio 2013, we can retarget the app to become a Windows 8.1 app. Simply open the solution and from the Solution Explorer, select Retarget to Windows 8.1.

When we now run the app again (as a Windows 8.1 app), the app doesn’t support snap view anymore: the narrowest we can make it is now 500px, as shown below.

If we have a valid reason to continue supporting snap view even in Windows 8.1, we still can. However, we need to do this explicitly. Several scenarios come to mind where this is indeed still useful, including a monitoring app, a Twitter app or a video player app that wants to allow the user to use a smaller window to continue watching video.

To do so, go to the application manifest and in there, set the value for minimum width from there.

If we now select 320px and then run the app again, we get the following result. As you can see, the app now supports any width from 320px upwards. Between 320px and 500px, we see the snap view but this isn’t running in the pillarboxing mode any longer: the snap view window now gets all the available space on the screen.

Some of the code related to managing the views, is deprecated. Assume in your Windows 8 code, you’ll have code that checks which is the current application state (FullScreen, Snapped, Filled) so that based on this value, you can use the VisualStateManager to go to a particular state. If we run this code in Visual Studio 2013, we can see that this code is now deprecated, as shown below.

So instead of checking in which state we are, we’ll need to work with numeric values that indicate the current width of the screen. Some code for this is shown next.

Also, the commonly used TryUnsnap() method is deprecated in Windows 8.1, quite logical since snapping isn’t supported as a default feature anymore.

The new Search experience

Another area where some the user experience has changed quite a lot in Windows 8.1, is Search. Previously, searching in an app had to be done by using the Search contract. The Search contract was accessible through the Search charm in the Charms bar. With the Search contract, it was also possible to search within apps: apps could register for the contract and in turn, Windows placed the apps in a list that users could select as the target for their searches.

One problem that arose with this approach to searching is that many people had problems locating the Search option within an app (and perhaps left the app, frustrated they couldn’t search it…). In Windows 8.1, Microsoft has changed Search by making it available through a control instead: the SearchBox control. The control lives in the Windows.UI.Xaml.Controls namespace, just like many other controls. In the screenshow below, you can see the control in action.

As you can probably get from the screenshot, the user experience we’re getting from the control is pretty similar to what we had before in the Search pane, but now integrated in the app’s UI. And that would be a correct assumption: the control offers search suggestions and search recommendations in much the same way as before.

Code-wise, things haven’t changed a lot either: the control supports the same events and search mechanisms as well. Let’s take a look at some sample code.

The control can be added just like any other control in XAML.

   1:  <SearchBox Name="MainSearchBox" QuerySubmitted="MainSearchBox_QuerySubmitted"

   2:             SuggestionsRequested="MainSearchBox_SuggestionsRequested" Width="200"

   3:             HorizontalAlignment="Center">SearchBox>

In code, we can now handle what needs to happen when the user types (give suggestions) and when he hits Enter (query is being submitted). In the code below, we can see that the entered query arrives in code via the SearchBoxQuerySubmittedEventArgs.

   1:  private void MainSearchBox_QuerySubmitted(SearchBox sender,

   2:       SearchBoxQuerySubmittedEventArgs args)

   3:  {

   4:      QueryTextBlock.Text = "You searched for " + args.QueryText;

   5:  }

When we start typing, we want to show a list of suggestions. In the event handler, we’re getting in an instance of SearchBoxSuggeestionsRequestedEventArgs. This contains the current value in the SearchBox (QueryText) as well as the SearchSuggestionCollection (through the Request property). Using these two, we can get a list of suggestions and add these to the SearchSuggestionCollection. Note that the limitation of 5 items we had in Windows 8 is gone in Windows 8.1 for the SearchBox control.

   1:  private void MainSearchBox_SuggestionsRequested(SearchBox sender, SearchBoxSuggestionsRequestedEventArgs args)

   2:  {

   3:      string queryText = args.QueryText;

   4:      SearchSuggestionCollection suggestionCollection = args.Request.SearchSuggestionCollection;

   5:      foreach (string suggestion in cities)

   6:      {

   7:          if (suggestion.StartsWith(queryText, StringComparison.CurrentCultureIgnoreCase))

   8:          {

   9:              suggestionCollection.AppendQuerySuggestion(suggestion);

  10:          }

  11:      }

  12:  }

If you’ve developed before against the Search contract, you’ll see that the code is pretty similar. In fact, when you have to make changes, they’ll be limited mostly to making your code point to the control instead of the SearchPane, the rest is very similar.

If you have an app that works with the Search contract today, what will happen? Well, remember that in the beginning of this article series, we talked about ‘Almost non-breaking’? This is one area where things will break in terms of UX. While the code will continue to work, the user won’t be getting a great experience anymore with your app. This therefore definitely requires an update of your existing app!

Summary

In this part, we looked at 2 major changes in the UX, namely the window sizes and the Search option. Stay tuned for more Windows 8.1 changes.

About the author

Hello Windows 8.1: what's new in the update for developers: Part 3: More WinRT improvements

editorial@silverlightshow.net (Gill Cleeren ) — Wed, 13 Nov 2013 11:57:00 GMT

Download the source code for this article

Hello and welcome to part 3 of our exploration of new developer features in Windows 8.1! In this third part, we will continue looking at some new additions and changes to the WinRT library, the base class library for Windows 8 development. Just to recap, we already covered some XAML stuff and the RenderTargetBitmap class in the previous article. There are some really interesting classes in WinRT that enable new app scenarios and that’s the focus of this article. Among others, we will cover speech synthesis, the new HTTP API and the Contact Manager API.

Don't miss

All SilverlightShow Ebooks

The new HTTP API

For their data needs, Windows 8 applications are required to work with services. Apart from a SQLite implementation, Windows 8 apps have no local DB access (unless we build one on top of XML files). For up-to-date date however, we have to resort to using services. Windows 8 has quite a few options in this area, including WCF, REST, RSS and much more.

REST (XML or JSON based) services are very popular nowadays. Many web APIs are using it to expose their functionality. In Windows 8, we had the System.Net namespace which contained the HttpClient class (which replaced the WebClient class we had previously in Windows 8). With Windows 8.1, we are getting a new version of the HttpClient, which now lives entirely in WinRT, the Windows.Web.Http.HttpClient (and related classes in Windows.Web.Http). In terms of functionality, the API is more powerful than the one it is replacing; in terms of API, it’s still pretty similar to the old one. Some of the extra functions that are supported in this new version are caching support, access to cookies from the code (wasn’t possible with the old API) and filters.

In the first demo, we’ll use the HttpClient and ask it to load a file from the cache if available. Initially, we’re making the call to the network resource, as shown below.

After this call, the page is cached by the system. Subsequent calls can now be served from cache.

Let’s see how we’ve made these call using code. We’re using an HttpClient and the HttpBaseProtocolFilter. The latter is used to configure how the call is made using the HttpClient instance so it’s this filter that we use to specify we want to use the default cache behaviour. On the new HttpClient, we can use the same methods to get a network resource, in this case, the GetAsyns. After we’ve received the response in the form of an HttpResponseMessage (again the same class as with the “old” HttpClient), we can use the Source property to figure out if we got the cached version of a new instance.

   1:  private HttpBaseProtocolFilter filter;

   2:  private HttpClient httpClient;

3:

   4:  public MainPage()

   5:  {

   6:      this.InitializeComponent();

7:

   8:      filter = new HttpBaseProtocolFilter();

   9:      httpClient = new HttpClient(filter);

  10:      //Let's use default cache behavior --> always used cached version

  11:      filter.CacheControl.ReadBehavior = HttpCacheReadBehavior.Default;

12:

  13:  }

  14:  …

  15:  HttpResponseMessage response = await httpClient.GetAsync(new Uri(AddressTextBox.Text));

  16:  string result = string.Empty;

  17:  result = response.Source + Environment.NewLine;

  18:  result += SerializeHeaders(response);

19:

  20:  ResultTextBox.Text = result;

If we now want to get access to the cookies that were sent to the device when making the request, we can again use the HttpClient class which now gives access to this collection. In the screenshot below, we can see the cookies being read.

Getting access to the cookies is done using the following lines of code. On the filter, we use the HttpCookieManager, which returns us a collection of cookies associated with the request.

   1:  HttpBaseProtocolFilter filter = new HttpBaseProtocolFilter();

   2:  HttpCookieCollection cookieCollection =

   3:       filter.CookieManager.GetCookies(new Uri(AddressTextBox.Text));

The HttpClient has more options, including for example the RetryFilter. This is handy if the server replies with a 503 including a Retry-After header, which will then indicate to the HttpClient that the request is to be retried after the indicated amount of time. As you can understand, this new API gives us many more options built-in, allowing us to focus on the business-side of things, instead of the technical stuff surrounding the actual creation of the requests.

Speech Synthesis from a WinRT app

Another interesting new feature in Windows 8.1 is speech synthesis. As the name implies, this enables a Windows 8.1 application to read out text to the user. While this may not seem like a big deal, there are a number of interesting scenarios possible with this:

Turn-by-turn navigation applications can now use the built-in speech synthesis capabilities to read out instructions
An ebook application can read out the book contents instead of the user having to read the book
Prompt the user for input

Another interesting aspect is accessibility of your application. If you want to build an app that makes it easy for people with accessibility issues to work with your app and have it read out the names of the input fields for the user. This is certainly an interesting aspect since in some countries, government-owned software and sites need to be conform certain rules regarding accessibility.

The entire concept works based on the classes available in the Windows.Media.SpeechSynthesis namespace. Basically, what happens is that we can build up a stream by reading out text and that stream will then be the source for a MediaElement that will then read out the contents of the stream. Let’s take a look.

Windows 8 comes with a number of built-in voices, based on the installed languages. On my device, there are 3 voices installed (because of my langauge settings).

The 2 main classes that enable this are the SpeechSynthesizer and the SpeechSynthesisStream. We have to use the SpeechSynthesizer, assign it a voice to use and pass it the text it needs to read out. That returns a SpeechSynthesisStream which in turn can be set as the source for the MediaElement that needs to read out the contents.

In the code below, we do the first part: we assign the voice to use and also fill the ComboBox with all available voices.

   1:  speechSynthesizer = new SpeechSynthesizer();

   2:  this.InitializeComponent();

3:

   4:  var allVoices = Windows.Media.SpeechSynthesis.SpeechSynthesizer.AllVoices;

5:

   6:  VoiceInformation currentVoice = this.speechSynthesizer.Voice;

7:

   8:  foreach (VoiceInformation voice in allVoices)

   9:  {

  10:      ComboBoxItem item = new ComboBoxItem();

  11:      item.Name = voice.DisplayName;

  12:      item.Tag = voice;

  13:      item.Content = voice.DisplayName;

  14:      this.VoiceComboBox.Items.Add(item);

15:

  16:      if (currentVoice.Id == voice.Id)

  17:      {

  18:          item.IsSelected = true;

  19:          this.VoiceComboBox.SelectedItem = item;

  20:      }

  21:  }

When we now click on the Button, we need to indicate the text we want to read out. Since this is a call that can take some time, it’s an async process. This returns a SynthesisStream instance. If the latter isn’t null, we use this stream as the source for the MediaElement. This MediaElement has its AutoPlay property set to true so it will start playing automatically.

   1:  try

   2:  {

   3:      synthesisStream = await this.speechSynthesizer.SynthesizeTextToStreamAsync(MainTextBox.Text);

   4:  }

   5:  catch (Exception ex)

   6:  {

   7:      synthesisStream = null;

   8:  }

9:

  10:  if (synthesisStream != null)

  11:  {

  12:      MainMediaElement.AutoPlay = true;

  13:      MainMediaElement.SetSource(synthesisStream, synthesisStream.ContentType);

  14:      MainMediaElement.Play();

  15:  }

  16:  else

  17:  {

  18:      MessageDialog dialog = new MessageDialog("unable to synthesize text");

  19:      await dialog.ShowAsync();

  20:  }

The Contact Manager classes

In Windows Phone, it has been possible for some time to allow apps to manage the contacts of the user as well as manage the calendar. This feature was so far missing in Windows 8, therefore, it was hard to create apps that interact with the calendar or provide address book interactions.

With Windows 8.1, an API is available to do this, namely the contact manager API and the appointments API. Let’s start by looking at the first one.

In the Windows.ApplicationModel.Contacts namespace, we find all kind of classes that allow us to interact with the contact we have in the people app. The most important classes here are the Contact and the ContactManager. The Contact class represents a contact; we have all kinds of related classes such as ContactAddress, ContactEmail and ContactJobInfo. All of these allow us to represent parts of the “contact card” of a contact. That contact card is an interesting aspect of the ContactManager class. The latter allows us to enter information and we can search for a contact. Once found, we get back a contact card, shown below.

Let’s see in code how we can do this.

First, we get the contact email. For this, we use the ContactEmail class. We assign this to the Contact we also create.

   1:  Contact contact = new Contact();

   2:  ContactEmail contactEmail = new ContactEmail();

   3:  contactEmail.Address = EmailAddressTextBox.Text;

   4:  contact.Emails.Add(contactEmail);

Next, we use the ContactManager class to retrieve all the information about the contact we find on the system.

   1:  FrameworkElement fe = sender as FrameworkElement;

2:

   3:  // Get the selection rect of the button pressed to show contact card.

   4:  Windows.UI.Xaml.Media.GeneralTransform buttonTransform = fe.TransformToVisual(null);

   5:  Point point = buttonTransform.TransformPoint(new Point());

   6:  var rect = new Rect(point, new Size(fe.ActualWidth, fe.ActualHeight));

7:

   8:  ContactManager.ShowContactCard(contact, rect, Windows.UI.Popups.Placement.Default);

Other noteworthy changes

We’ve now already covered a number of interesting classes. But there are other interesting changes.

Geofencing support

Geofencing is becoming more and more used. Perhaps first: what’s a geofence? As the word implies, it’s an imaginary fence around a certain point. When the device enters the geofence, we can choose to run code. This enables again some cool scenarios. Imagine you’re building an app for Starbucks. In the app, you can create geofences around all Starbucks’s. When the device enters a geofence, the app will be notified about this. Or you can create a geofence around yourself and when you’re in the vicinity of one of your friends, the app can be notified as well.

When the app is notified about this, we can run code. This is possible with a new type of trigger, the LocationTrigger. With this trigger, we can trigger a background task that then will for example show a toast notification about the fact you’re close to a Starbucks to grab a cup of coffee!

Changes to the BackgroundTransfer API

When uploading or downloading files, we can use the BackgroundTransfer API. Using this API, it’s possible to register transfers with a background process that won’t be suspended when the main app goes into the suspended mode.

Some improvements were made to this API. It’s now possible to use a BackgroundTransferGroup. This class lets us group transfers and assign them a priority. Also, we can now notify the user about the fact a transfer is finished using a tile or a toast update. The latter is an interesting feature, since previously, it wasn’t possible to let the user know that a transfer was ready.

POS support

The last interesting aspect we’ll talk about is better devices support and POS (Point-Of-Service) support. Windows 8.1 adds much better support for hardware, including USB, Bluetooth, HID (Human Interface Device) and even 3D printing.

POS support is probably the most interesting one. It enables us to build cash register systems since we can now talk to magnetic swipe readers and barcode scanners.

Summary

In this third part, we’ve discussed some more WinRT classes that enable some cool scenarios. In the next article, we’ll discuss UX related topics, including the new size options. See you there!

About the author

Windows 8.1: Play with Bluetooth Rfcomm

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 11 Nov 2013 12:26:00 GMT

Scanning the new namespaces added to Windows 8.1 you'll find a new interesting surprise in the field of bluetooth support. The new operating system infact, adds support for the Bluetooth Rfcomm into the "Windows.Devices.Bluetooth.Rfcomm" namespace. The "Radio frequency communication" protocol, is a simple set of transport protocols that allow the comunication between devices using reliable data streams similar to the TCP protocol in the networking.

What this means is that the Rfcomm protocol allows you to establish a persistent connection between two devices with a real socket. This is interesting for remote controlling devices, to acquire continuous data streams and opens to a wide set of applications that takes advantage of custom peripherals sensor.

Don't miss

All SilverlightShow Ebooks

How it works

Creating a connection over a Rfcomm channel is not so easy as creating a socket between two machines on the network. The very first thing you need to understand is that pairing bluetooth devices is something completely out of your control. You can only create a connection between devices that have been already paired and also if this may seems a limitation, it takes out of your control a number of boring things like security checks. The pairing of devices already implements a way to create a secure identification and you do not need to enter in this area. So, when you will scan for available devices (I'll show you this later in the article) simply expect to find devices that have successfully completed the pairing process.

After you understand this point, the connection process is someway simple and depends on the role of the parts of the connection. Given A and B the connecting endpoints you will have a "server" (let say it is the A) and a client (B). First of all, the A endpoint needs to bind to the Bluetooth interface and opens a listening channel that await for an incoming connection. In this phase, called "advertising", the A endpoint simply signal its availability and awaits for some peer to connect. The B endpoint scans the paired devices and find the available peer. Then it try to open a socket to the listening host. At this point the server accept the connection, disposes the listener and gets the socket representing the established connection. From this point the connection is fully available and both the parts may read and write as if it is a normal ethernet connection.

So, there are some points that may vary in these steps. As an example the listener may keep working the listening channel after a connection has been received but at the proof of facts the process of creating the data stream over bluetooth is clear. It remains to put this in practice and for this purpose, what is better that try con connect a Windows 8.1 device with a Windows Phone 8 peer?

Connect WP8 and W8.1 over bluetooth

In the following example I'll explain the code required to create an established connection between my Lumia 925 (Windows Phone 8) and the ASUS VivoTab that I recently (and successfully) upgraded to Windows 8.1. In this scenario the tablet will be the server endpoint that listen for a single connection. On the other side the Lumia 925 will try to connect to the tablet. After the connection is established every tap on the screen of the phone will be transmitted to the tablet over the bluetooth channel and it will represents the tapped point on its screen. So let start with the server part. First of all you have to setup device capabilities in the manifest. These are represented by three elements that you should add partly by the editor and partly in XML manually. Here is the resulting XML:

   1: <Capabilities>

   2:   <Capability Name="privateNetworkClientServer" />

   3:   <Capability Name="internetClientServer" />

   4:   <m2:DeviceCapability Name="bluetooth.rfcomm">

   5:     <m2:Device Id="any">

   6:       <m2:Function Type="serviceId:A7EA96BB-4F95-4A91-9FDD-3CE3CFF1D8DA" />

   7:     m2:Device>

   8:   m2:DeviceCapability>

   9: Capabilities>

The first two capabilities can be set directly into the editor of the manifest and represents the "Internet (Client & Server)" and the "Private Networks (Client & Server)". The other part identifies the Rfcomm protocol and the Identifier of the service we are creating. This identifier is a UUID (Guid) generated by the developer and it will be used to create the Rfcomm provider. Then in the page load of the MainPage we have to start the listening channel:

   1: private async Task StartListen()

   2: {

   3:     Provider = await RfcommServiceProvider.CreateAsync(

   4:         RfcommServiceId.FromUuid(RfcommServiceUuid));

5:

   6:     StreamSocketListener listener = new StreamSocketListener();

   7:     listener.ConnectionReceived += HandleConnectionReceived;

8:

   9:     await listener.BindServiceNameAsync(

  10:         Provider.ServiceId.AsString(),

  11:         SocketProtectionLevel.BluetoothEncryptionAllowNullAuthentication);

12:

  13:     var writer = new DataWriter();

  14:     writer.WriteByte(ServiceVersionAttributeType);

  15:     writer.WriteUInt32(ServiceVersion);

16:

  17:     var data = writer.DetachBuffer();

  18:     Provider.SdpRawAttributes.Add(ServiceVersionAttributeId, data);

  19:     Provider.StartAdvertising(listener);

  20: }

The very first action in this code is to create an instance of a RfcommServiceProvider. This provider identifies the protocol and it will be created using the RfcommServiceUuid that we wrote in the manifest. Then it is created a StremSocketListener and it is binded to the Bluetooth channel using the provider itself. Finally, using a DataWriter some info are associated with the provider to identify the connection. More info on these attributes in this link: https://www.bluetooth.org/en-us/specification/assigned-numbers/service-discovery

Once the provider has been put in advertising mode using the StartAdvertising method, a remote device can try to open a connection (I'll speak this part in a few). When a connection is detected the ConnectionReceived event is raised and it is handled as in the following snippet:

   1: private void HandleConnectionReceived(StreamSocketListener listener, StreamSocketListenerConnectionReceivedEventArgs args)

   2: {

   3:     Provider.StopAdvertising();

   4:     listener.Dispose();

   5:     listener = null;

6:

   7:     this.Socket = args.Socket;

   8:     this.Reader = new DataReader(this.Socket.InputStream);

   9:     this.Run();

  10: }

The provider's advertising is stopped and the listener is dropped. This is because I only want to handle a single connection. You can also try to handle multiple connections leaving the advertising alive. The received socket represents the established connection and it should be used to read and write data. On the side of the Windows Phone 8 the thing is someway easy

   1: private async Task Connect()

   2: {

   3:     PeerFinder.AlternateIdentities["Bluetooth:PAIRED"] = "";

4:

   5:     var devices = await PeerFinder.FindAllPeersAsync();

   6:     var device = devices.FirstOrDefault();

7:

   8:     if (device != null)

   9:     {

  10:         this.Socket = new StreamSocket();

  11:         await this.Socket.ConnectAsync(device.HostName, "1");

  12:         this.Writer = new DataWriter(this.Socket.OutputStream);

  13:         this.bConnect.Visibility = Visibility.Collapsed;

  14:         this.LayoutRoot.Tap += LayoutRoot_Tap;

  15:     }

  16: }

The PeerFinder class is used to scan the available devices, then the very first is taken. Here I assume that there is a single device available but in a real world case you should present a list of peers to the user that selects the one you want to connect to. When a device is found the socket is created and connected using the HostName. At this point the Windows 8.1 should ask the user if he accepts the connection. The rest of the code is to setup the device for the following communication. The implementation wait for taps on the screen and in case it collect the X and Y coordinates and send them along the established channel:

   1: private async void LayoutRoot_Tap(object sender, System.Windows.Input.GestureEventArgs e)

   2: {

   3:     if (this.Writer != null)

   4:     {

   5:         var position = e.GetPosition(this.LayoutRoot);

   6:         this.Writer.WriteInt32(1);

   7:         this.Writer.WriteInt32((int)position.X);

   8:         this.Writer.WriteInt32((int)position.Y);

   9:         await this.Writer.StoreAsync();

  10:     }

  11: }

The code sends three integers. The first represents the command, in case of future extensions, then the coordinates. Once the message has been queued the StoreAsync method send all the packet on the stream. On the other side:

   1: private async void Run()

   2: {

   3:     while (true)

   4:     {

   5:         try

   6:         {

   7:             Command command = (Command)await this.Reader.ReadInt32Async();

8:

   9:             switch (command)

  10:             {

  11:                 case Command.Tap:

  12:                     await this.HandleTap();

  13:                     break;

  14:             }

  15:         }

  16:         catch (PeerDisconnectedException)

  17:         {

  18:             return;

  19:         }

  20:     }

  21: }

22:

  23: private async Task HandleTap()

  24: {

  25:     int x = await this.Reader.ReadInt32Async();

  26:     int y = await this.Reader.ReadInt32Async();

27:

  28:     await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,

  29:         () =>

  30:         {

  31:             Canvas.SetLeft(ellipse, x);

  32:             Canvas.SetTop(ellipse, y);

  33:         });

  34: }

The run method is an endless loop that listen for a integer. The integer is the command sent by the peer. Once a command is received the code selects the handler (HandleTap in this case) and it reads the following two integer. Then it moves a little circle in the given position using a canvas. Pay attention that the ReadInt32Async method is not part of the DataReader class but it is and extension method:

   1: public async static Task ReadInt32Async(this DataReader reader)

   2: {

   3:     uint available = await reader.LoadAsync(sizeof(Int32));

4:

   5:     if (available < sizeof(Int32))

   6:         throw new PeerDisconnectedException();

7:

   8:     return reader.ReadInt32();

   9: }

When to use bluetooth?

As usual, after the technical troubles has been solved - and to prepare this example I had to solve a number of them - is it time to start thinking to possible application. Given that a number of devices supporting this protocol may already exists, I think the success it can partially depends on the ability of creating custom devices. This is not exactly my usual range of work but I hope that someone may take advantage of this article to build some astounding apps.

Hello Windows 8.1: what's new in the update for developers: Part 2: XAML and WinRT improvements

editorial@silverlightshow.net (Gill Cleeren ) — Wed, 06 Nov 2013 11:59:00 GMT

Download the source code for this article

Welcome to the second part of this article series on what’s new in the Windows 8.1 update for developers. In the first part, we’ve spent some time looking at the new features, mostly from an end-user’s perspective. We haven’t seen any code yet. That’s about to change with this second part.

Don't miss

All SilverlightShow Ebooks

The goal of this article is showing you the new stuff in XAML and WinRT. The WinRT library has been extended with a great deal of extra classes and features that allow compelling experiences. Part of all that is of course XAML, in which a huge number of extra controls has been added.

What’s new in XAML

The XAML/C# combination is the preferred way of building apps for the Windows 8 store. A huge part of the apps currently in the Store has been built using XAML and C#. With the initial release of Windows 8, Microsoft spent a lot of effort on the HTML and JavaScript libraries, which resulted in a number of controls only being available for HTML/JavaScript developers and XAML developers not getting them out-of-the-box. We had to resort to external libraries (one of the important ones being the Callisto library by Tim Heuer) to get some extra controls for our apps to use.

With Windows 8.1, this has changed quite dramatically: a huge number of extra controls has been added in XAML, bringing the 2 UI languages (XAML and HTML) on par. I’m not going to give you an overview of all XAML controls, since we already have an article on SilverlighShow that shows a lot of new controls. I’m instead going to continue where Andrea in his article left of, explaining you some interesting facts and controls.

WebView improvements

The WebView may have caused you some headache in the past. With Windows 8, this control had a bug (or was it a feature…?) that it always wanted to be the top-level control. That means that if you had a WebView on your page and an AppBar on there as well, the AppBar would never appear over the WebView, since the latter always showed as the top-level. Quite annoying, isn’t it?

This little thing may not seem like a big deal, but for some apps that perhaps use a WebView for integrating a web experience with an app experience, this is important! Notice in the screenshot that the AppBar (in this case, it’s a CommandBar even) can sit perfectly on top of a WebView.

The changes for the WebView don’t stop there though. Another improvement is that we now can load HTML from more sources. Previously with Windows 8, we could load HTML using a URI (using the Navigate() method), using content from the app package or by passing the HTML and then navigating to it using NavigateToString(). In Windows 8.1, the WebView can now also load HTML from the Application Data API folders (the local and temporary ones). This way, we can create an app that perhaps downloads a ZIP file which contains HTML files, unpacks them into a sub-folder of the Local storage folder (ms-appdata:///local) and from there, reads out the HTML files using the WebView.

In the code below, you can see how we are reading out some HTML located in a subdirectory of the Local Storage folder. We can only get to the HTML file by specifically passing the URL as the parameter for the Navigate() method.

   1:  string url = "ms-appdata:///local/Htmls/test.html";

2:

   3:  MyWebView.Navigate(new Uri(url));

Furthermore, the WebView has been enhanced to support the following as well:

Taking a screenshot of the content of the WebView and saving it to a local image (for example, a png file). This is supported by using the WebView’s CapturePreviewToStreamAsync() method
More information on the event lifecycle of the loaded page becomes available for the app using it through new events such as NavigationStarting, ContentLoading, DOMContentLoaded and NavigationCompleted. This gives the surrounding app more options to display for example loading icons while the page is loading
Notifying the app about “changes” in the HTML. Suppose the app needs to be notified about the user completing a field in the HTML page. We can use ScriptNotify to enable this event-raising in the app. The page can send back some data such as a string with this as well.

There are some other (mostly less important) changes made to the WebView API, check out the MSDN page for this control if you want to read all the supported items: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.webview.aspx

Data binding improvements

Data binding has been one of my favourite features in XAML for years. When Windows 8 was released, some interesting features we had with Silverlight weren’t available yet. In fact, I always compared the Windows 8 data binding options to be on-par with only Silverlight 3. This means that a lot of cool features we got in Silverlight 4 and 5 were still missing.

Windows 8 brings some new options, mostly things that we got with Silverlight 4. More specifically, we now have support for TargetNullValue, FallbackValue and UpdateSourceTrigger in Windows 8.1. Let’s take a look at these in a bit more detail.

FallbackValue

Assume the following, very simple class structure:

Assume that we have the following UI.

   1:  <Grid>

   2:      <Grid.RowDefinitions>

   3:          <RowDefinition Height="50">RowDefinition>

   4:          <RowDefinition Height="50">RowDefinition>

   5:          <RowDefinition Height="50">RowDefinition>

   6:          <RowDefinition Height="50">RowDefinition>

   7:          <RowDefinition Height="50">RowDefinition>

   8:      Grid.RowDefinitions>

   9:      <Grid.ColumnDefinitions>

  10:          <ColumnDefinition Width="200">ColumnDefinition>

  11:          <ColumnDefinition Width="200">ColumnDefinition>

  12:      Grid.ColumnDefinitions>

  13:      <TextBlock Text="First name" Grid.Row="0">TextBlock>

  14:      <TextBlock Text="Last name" Grid.Row="1">TextBlock>

  15:      <TextBlock Text="Function" Grid.Row="2">TextBlock>

  16:      <TextBlock Text="Employee badge" Grid.Row="3">TextBlock>

  17:      <TextBlock Text="Company car type" Grid.Row="4">TextBlock>

  18:      <TextBox Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1">TextBox>

  19:      <TextBox Text="{Binding LastName}" Grid.Row="1" Grid.Column="1">TextBox>

  20:      <TextBox Text="{Binding EmployeeBadgeId}" Grid.Row="2" Grid.Column="1">TextBox>

  21:      <TextBox Text="{Binding Function}" Grid.Row="3" Grid.Column="1">TextBox>

  22:      <TextBox Text="{Binding CompanyCarType}" Grid.Row="4" Grid.Column="1">TextBox>

  23:  Grid>

If we now bind to a Person instance, we’ll get a lot of binding errors, as can be seen in the screenshot below. It’s quite logical we are getting these, since we’re binding to properties that don’t exist, which will logically result in a binding error.

We can now make use of the FallBackValue property. The value we specify in a binding for this property will be shown when the binding fails (for whatever reason that may be).

   1:  <TextBox Text="{Binding FirstName}" Grid.Row="0" Grid.Column="1">TextBox>

   2:  <TextBox Text="{Binding LastName}" Grid.Row="1" Grid.Column="1">TextBox>

   3:  <TextBox Text="{Binding EmployeeBadgeId, FallbackValue='Not an employee'}" Grid.Row="2" Grid.Column="1">TextBox>

   4:  <TextBox Text="{Binding Function, FallbackValue='Not an employee'}" Grid.Row="3" Grid.Column="1">TextBox>

   5:  <TextBox Text="{Binding CompanyCarType, FallbackValue='Not a manager'}" Grid.Row="4" Grid.Column="1">TextBox>

The following will now display. Note that we could have gotten the same result by using a converter. The FallbackValue is just a bit of a shortcut in order not to have to write a converter.

TargetNullValue

Assume now that we are binding to a value which evaluates to null (the Manager hasn’t received a company car sadly).

   1:  Manager m = new Manager();

   2:  m.FirstName = "Gill";

   3:  m.LastName = "Cleeren";

   4:  m.Function = "Director";

   5:  m.EmployeeBadgeId = "12345";

   6:  m.CompanyCarType = null;

We can again display a message of choice by using the TargetNullValue as follows:

   1:  <TextBox Text="{Binding CompanyCarType, FallbackValue='Not a manager', TargetNullValue='No company car for this manager'}" Grid.Row="4" Grid.Column="1">TextBox>

The result is shown below.

The TargetNullValue is another property on the Binding new in 8.1. It allows us to specify what has to happen when the property we’re binding too evaluates to null.

UpdateSourceTrigger

The last new property we’re getting related to data binding is the UpdateSourceTrigger. Previously, when using a two-way binding, the source was always updating automatically (so when the value in the UI was changed by the user, the source also updated). UpdateSourceTrigger can change that. When we set it to Explicit, we can specify when we want the update of the source to take place.

Take a look at the following XAML code. Notice that the Mode for the binding has now been set to TwoWay and the UpdateSourceTrigger is Explicit. This means that although the binding is TwoWay, changing the value won’t happen directly anymore.

   1:  <TextBox Name="CompanyCarTextBox" Text="{Binding MyManager.CompanyCarType, Mode=TwoWay,

   2:      FallbackValue='Not a manager', TargetNullValue='No company car for this manager',

   3:      UpdateSourceTrigger=Explicit}" Grid.Row="4" Grid.Column="1">TextBox>

Instead, the value will now only update when we want it too. We can do this using the following code.

   1:  private void UpdateButton_Click(object sender, RoutedEventArgs e)

   2:  {

   3:      var expression = CompanyCarTextBox.GetBindingExpression(TextBox.TextProperty);

   4:      expression.UpdateSource();

   5:  }

The other values for UpdateSourceTrigger are Default and PropertyChanged. Most often, PropertyChanged is the default and is actually the same as we had previously.

RenderTargetBitmap

We will close this article by looking at another UI related class in WinRT namely the RenderTargetBitmap. This class is one of my favourite additions to Windows 8.1 since it enables a lot of cool scenarios, such as a meme generator application.

The RenderTargetBitmap class enables us to capture just any XAML element and export it to an image, for example a *.png that we then can save to the local disk. Since the XAML element itself can be a container element as well (like a Grid), it’s perfectly possible to allow the user to create an interface (a meme, a Christmas card…) and then export this to a physical file from the app using a FileSavePicker. Let’s take a look at how this controls works. We’ll build a very basic meme generator, based on the Most Interesting Man meme, as shown below.

For the XAML, take a look at the code for the article. We’ll focus on the code here.When clicking on the Export button, we are first instantiating the RenderTargetBitmap. It is passed through the RenderAsync method, the name of the element we want to export. Once rendered using the async RenderAsync, we use the GetPixelsAsync to get access to the pixels that were rendered.

   1:  RenderTargetBitmap renderTargetBitmap = new RenderTargetBitmap();

   2:  await renderTargetBitmap.RenderAsync(MemeGrid);

   3:  var pixelBuffer = await renderTargetBitmap.GetPixelsAsync();

After this, we can ask the user to select a location to save the file using a FileSavePicker.

   1:  var fileSavePicker = new FileSavePicker();

   2:  fileSavePicker.DefaultFileExtension = ".png";

   3:  fileSavePicker.FileTypeChoices.Add(".png", new List<string> { ".png" });

   4:  fileSavePicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;

   5:  fileSavePicker.SuggestedFileName = "Meme.png";

6:

   7:  var saveFile = await fileSavePicker.PickSaveFileAsync();

With this in place, we can now write the image pixels to the selected file. We first get in the StorageFile and open it. Then we create the encoder and pass it some values to indicate the parameters for the image creation (image size, DPI…). Finally, the FlushAsync will flush the image data to the physical file. We now have a saved image on disk on the selected location!

   1:  if (saveFile != null)

   2:  {

   3:      using (var fileStream = await saveFile.OpenAsync(FileAccessMode.ReadWrite))

   4:      {

   5:          var imageEncoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, fileStream);

6:

   7:          imageEncoder.SetPixelData(

   8:              BitmapPixelFormat.Bgra8,

   9:              BitmapAlphaMode.Ignore,

  10:              (uint)renderTargetBitmap.PixelWidth,

  11:              (uint)renderTargetBitmap.PixelHeight,

  12:              DisplayInformation.GetForCurrentView().LogicalDpi,

  13:              DisplayInformation.GetForCurrentView().LogicalDpi,

  14:              pixelBuffer.ToArray());

15:

  16:          await imageEncoder.FlushAsync();

  17:      }

  18:  }

Summary

In this second part, we looked at some interesting, new aspects from XAML and we started looking at some new classes part of WinRT as well. The next article in this series will build on this, exploring some more interesting classes in the framework. I hope to see you there as well!

About the author

Hello Windows 8.1: what's new in the update for developers: Part 1: Overview of the new features

editorial@silverlightshow.net (Gill Cleeren ) — Tue, 29 Oct 2013 12:17:00 GMT

Hi and welcome to a new series of articles here on SIlverlightShow where we will give an overview of the new concepts and changes in the first big update of Windows 8, known to mankind as Windows 8.1. Over the next couple of articles, we will take a look at the things that have changed. You’ll soon understand that while the changes you’ll have to do in your code are often subtle, they will lead to a much better user experience which is in-line with the new version of the OS.

Don't miss

All SilverlightShow Ebooks

In this first part, we are going to introduce the new version and see what has changed. After that, we’ll explore how we can use these new functions from a developer’s perspective!

Welcome to 8.1

As mentioned, we are first going to take a look at all the new stuff in this release of Windows. We’re going to do that from the end-user’s perspective. Of course, we’ll explore the dev features, but that’s for later.

I want to start with this important statement, which I’m going to refer back to from the rest of the articles several times: Windows 8.1 is JUST an update, nothing more. The update is “almost non-breaking”. With “almost non-breaking”, I mean the following. Code-wise, all your Windows 8 code will still run, there’s no problem there. Some Windows 8 APIs are deprecated, but they aren’t removed from the API. However, in terms of user experience, things have changed. If you don’t update your application code to 8.1, your users will get a less-than-optimal experience from your app, which is something I assume you don’t want. So, code-wise, no breaking changes, but in terms of user experience, there are some things you need to take into consideration to make sure that your users are getting the best experience you can create.

The new Start screen

The very first thing you’ll see after you have upgraded to (or for that matter, just installed) Windows 8.1, is the new Start screen. I’ve posted a screenshot of my current Start screen, which should give you an idea of what has changed in that area.

Probably the most string thing here is the background. Indeed, that is not one of the included Start screen backgrounds we had with Windows 8. Instead, this is the background of my desktop environment. One of the main complaints that people had with Windows 8 was that it somehow felt as if we had 2 operating systems running next to each other. Just by adding this – let’s face it – small change, the “two operating systems” already look a lot more integrated!

New tile sizes

Another thing we can get from the screenshot above is that we can now have several types of tiles which weren’t previously available in Windows 8. With Windows Phone 8, Microsoft allowed phone users to create small and large tiles, in addition to the previously available square and wide tiles. In Windows 8.1, Microsoft did the same for Windows 8: we now have 4 tile sizes available. This allows the user to customize his Start screen more easily to his needs.

The small tile size allows us to create an area in the Start screen where we pin tiles of which we don’t expect (or basically care for) live tile updates. Indeed, the small tile size doesn’t support tile updates, they only support badge updates. In the above screenshot, you can see my mail tile having a badge update: the number 24 indicates I have to get back reading my email since I have 24 unread mails! In general, this small tile size is ideal for apps such as Internet Explorer or regular desktop apps which don’t utilize the tile functionality.

The other new tile size is the large tile, as shown below.

This new size allows apps to give more information to the user, such as in the case of the weather apps, give an overview of the weather in more cities.

The new tile sizes have an effect on existing apps: the tile template names have changed, causing some minor issues if your app already uses tiles now. We’ll take a look at what we need to do to fix all this in a later article.

The Return of the Start button

The above header sounds a bit like a bad Hollywood movie but again it’s in important aspect when it comes to giving the users what they want. A lot of fuzz was created with Windows 8 regarding the fact that the user experience was too different from what we had previously. Probably the silliest of all the remarks being made was the fact that the Start button (and the Start menu) had gone. Although they hadn’t. They were simply replaced by a) the lower left pixels on your screen and b) the Start screen.

Many internet-fights have been fought over this matter and Microsoft decided in Windows 8.1 that the change was perhaps a bit too dramatic. They have created a compromise: the Start button is back and it takes us to the modern (and in my opinion, much better) Start screen.

From a developer’s perspective, there’s really no value here. But for many users, this might be a big deal, resulting in a higher adoption rate for Windows 8 and thus resulting in more app installs for you! So good news anyway!

The new app sizes

One of the cool features of Windows 8 was the ability to run an application in Snap view. When snapped, the application was always 320px wide (x scale factor if any). This view was certainly interesting to allow the user to have more than one app open on-screen. Typically, apps that offer a monitoring activity such as a Twitter app included this view (it’s a Store requirement to have this view but not all apps did something useful with it). Also media apps often had this view to allow the user to continue viewing a video while doing some work.

In this area, an application could thus be in Full screen mode, in Snapped mode or in Filled mode (the remainder of the screen when having an another app snapped on screen).

Windows 8.1 gives us more flexibility in this area. It’s now possible to have 2 (or more, depending on your screen size and resolution) apps on screen with different resolutions. The minimum supported size is now 500px, instead of 320px. This means that your app should give the user a great experience on any resolution from 500px upwards. Take a look at the screenshots below.

On my Surface here, I can have 2 apps running side-by-side, resizing them like I want. If I attach more external displays, I can run more (up to 10 apps) at the same time.

This is another aspect where I reckon that the change is almost non-breaking. If you run a Windows 8 app on Windows 8.1, the snap view will still work, but in a compatibility more (using black bars for all sizes between 320 and 500px). It’s therefore recommended that you upgrade your app so it supports and handles these new size options correctly. We’ll show how to do that later!

Search has changed

In Windows 8, Microsoft recommended that searching was done using the Search charm. This way, we can offer the user a unified searching model. While the idea was great, a lot of people struggled with the Search in Windows 8. They couldn’t find it, which was probably because it was hidden behind a charm and when no one tells the user to look there for the Search option, he simply dismisses the app.

In Windows 8.1, Microsoft has cut back on the guidelines around Search, now allowing us to add a regular search box in our apps. The options we have with this new control are still pretty much the same but they are now wrapped in a control instead of being addressable through the Search Pane. This effectively means that we can still send suggestions and recommendations to the search control.

Take for example the Music app, which now features a Search box control.

We can see that the control is indeed part of the regular page UI and still offers the same experience as before.

In one of the coming articles, we’ll see that how we can work with the new Search. We’ll explore what happens when you still want to support the Search contract as well or what happens when you run a Windows 8 app that’s built around Search on Windows 8.1.

More chrome

This last topic is a bit more design-linked than the previous ones. You probably know that for Windows 8, Microsoft has developed a design language (first known as Metro, later on renamed to Modern UI). This language was quite strict and one of the main aspects of the language was the limitation of use of chrome, the so-called content-before-chrome principle. This basically said that the user should see content, that’s what the user is using the application for. Don’t bother showing the user all kinds of buttons and toolbars, they create nothing more than a distraction and take away screen estate that should be used to display content.

For Windows 8.1, Microsoft has created an evolution of these guidelines. Content is still very important, but some more chrome is making its way into the applications. We can even see that even in the built-in apps that come with a default Windows 8.1 installation.

Take again the music app and notice that we now have a sort of tab navigation on the left. That wasn’t a recommendation to use before in Windows 8.

Another app where this is clearly visible, is the Health and Fitness app. Take a look at the screenshot below. The part on the left is nothing short of a menu of buttons/options that allow us to navigate to different parts of the application.

Even the Search control we saw in the previous topic is an evolution. Previously, Microsoft recommended against using a Search box within the app; now they recommend doing so.

Again, for existing applications, this is not really an issue. However, once more apps start changing their UI slightly, it’s recommended doing so for your apps as well. Otherwise, the user may find your app difficult to navigate, resulting in less positive reviews.

Summary

In this first part of this new article series, we’ve looked at the user’s perspective of what changed in Windows 8.1. Starting with the next article, we’re going to see how we can use these from our own apps. Stay tuned!

About the author

Windows 8.1: Location-aware apps - Part #2: Working in background

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 28 Oct 2013 12:41:00 GMT

Don't miss

All SilverlightShow Ebooks

In the previous article I've talked about the basic location api and I've introduced the geo-fencing features that are new in Windows 8.1. These API, partly already available in the very first release of the operating system, are for sure a interesting opportunity to build location aware applications, taking the full advantage from the "mobility" of modern devices.

The API that I've explained, are all made to be used when you application is running, but as you probably figured out, this is not exactly the most common situation for our applications.

Location aware background tasks

If you try to stop and think about the lifetime of an application, you probably will find that also when they are used a lot, for the major part of their life they are switched off, probably for more time than they are running. In a tracking application that should collect positions of the device along the time, this is not an ideal situation.

If you think that a Windows 8.1 device can run a maximum of 4 applications at a time, under particolar conditions, you understand that it is completely unacceptable to track positions only when the application is running. Even when snapped, there are a number of events that can make your app going to sleep and then stopping to track.

For this reason with Windows 8.1 they added the capability of tracking the position in a background task. Just for remember, a background task is a separate task that is started when the application is run for the first time and then it remains active also if the application has been closed or has been put to sleep. Together with the common background task that we know in Windows 8, the new relase added a new type that is dedicated to location services. To activate this kind of background service you have to open the manifest in Visual Studio and go to the "Declarations" tab. Then add a "Background Service" and select the type on the right side.

I'll return in a few on the registration topic. This is infact the last action you have to accomplish just before deploy the application and try to run. Before this you have to phisically create the background task. For location purposes, there are two type of tasks you can use: a "Timer", used to collect locations as an example, and a "Location" task that is mostly used to support geofencing. Both the types must be created using a class declared into a Windows Runtime Component. This is an important point because nothing prevents to create the task in a class library but is will not work as expected, so please be always careful in this point.

So first of all let create a Windows Runtime Component, remember to reference it from your application project and then you can create your background task skeleton inside of it:

public sealed class LocationService : IBackgroundTask

{

    public void Run(IBackgroundTaskInstance taskInstance)

    {

        var deferral = taskInstance.GetDeferral();

  

        try

        {

            // do the work here...

        }

        finally

        {

            deferral.Complete();

        }

    }

}

The background task, when invoked take a reference to a deferral. This is used to communicate to the runtime when the task has completed but remember, it does not give you more time than the few seconds granted by the operating system. Then you have to manually register the background task in code. You call your registration service when the user asks to run the background service. You have always to create also the code to unregister the background task in the case the user would not want to run the background task anymore.

private const string LocationServiceName = "LocationService";

private const string LocationServiceEntryPoint = "XPG.Geolocation.Tasks.LocationService";

  

private IBackgroundTaskRegistration GeoLocationTask { get; set; }

  

private async void RegisterBackgroundTask()

{

    this.GeoLocationTask = BackgroundTaskRegistration.AllTasks.FirstOrDefault(

        bt => bt.Value.Name == LocationServiceName).Value;

  

    if (this.GeoLocationTask == null)

    {

        BackgroundAccessStatus backgroundAccessStatus = 

            await BackgroundExecutionManager.RequestAccessAsync();

  

        if (backgroundAccessStatus == BackgroundAccessStatus.Unspecified ||

            backgroundAccessStatus == BackgroundAccessStatus.Denied)

            throw new Exception("Error registering background task: not authorized");

  

        BackgroundTaskBuilder taskBuilder = new BackgroundTaskBuilder();

  

        taskBuilder.Name = LocationServiceName;

        taskBuilder.TaskEntryPoint = LocationServiceEntryPoint;

  

        TimeTrigger timeTrigger = new TimeTrigger(15, false);

  

        taskBuilder.SetTrigger(timeTrigger);

  

        this.GeoLocationTask = taskBuilder.Register();

    }

  

    this.GeoLocationTask.Completed += OnCompleted;

}

        

private void UnregisterBackgroundTask()

{

    if (this.GeoLocationTask != null)

    {

        this.GeoLocationTask.Completed -= OnCompleted;

        this.GeoLocationTask.Unregister(true);

        this.GeoLocationTask = null;

    }

}

  

private void OnCompleted(BackgroundTaskRegistration sender, BackgroundTaskCompletedEventArgs args)

{

    Debug.WriteLine("Task {0} has completed", sender.Name);

}

In the very first lines of code I check if the task has already registered. This is important to avoid duplicate instances that can lead to confusion while running and debugging. Then, if the task has not registered, I request the access to background services. This presents to the user the common request that asks if he consents to run the task in background. In the case the user denies we have to gracefully exit from registration and continue to run the application. Differently, using the BackgroundTaskBuilder the task is created and registered. Pay attention to the name of the task and to the Task entry point because is it often cause of not working tasks. Associated to this task there is a TimeTrigger, that will raise the task once every 15 minutes. The geo location task has also a completed event that is useful to update the user interface when the application is running and the task completes its work. Inside the Location task I get the location and store it wherever I want:

private CancellationTokenSource CancellationTokenSource { get; set; }

  

public async void Run(IBackgroundTaskInstance taskInstance)

{

    var deferral = taskInstance.GetDeferral();

  

    try

    {

        if (this.CancellationTokenSource == null)

            this.CancellationTokenSource = new CancellationTokenSource();

  

        taskInstance.Canceled += taskInstance_Canceled;

  

        Geolocator locator = new Geolocator();

  

        Geoposition position = await locator.GetGeopositionAsync()

            .AsTask(this.CancellationTokenSource.Token);

  

        this.StoreLastPosition(DateTime.Now, position.Coordinate.Point);

    }

    catch (Exception ex)

    {

        Debug.WriteLine(ex.Message);

    }

    finally

    {

        taskInstance.Canceled -= taskInstance_Canceled;

        deferral.Complete();

    }

}

  

private void taskInstance_Canceled(IBackgroundTaskInstance sender, BackgroundTaskCancellationReason reason)

{

    if (this.CancellationTokenSource != null)

    {

        this.CancellationTokenSource.Cancel();

        this.CancellationTokenSource = null;

    }

}

  

private void StoreLastPosition(DateTime dateTime, Geopoint geopoint)

{

}

Inside the Run method a CancellationToken is created to be able to stop che geo location task if a cancellation occurs before the operation is completed. Given that a background task can run only for a limited time, it is required to always have an handle that allows to stop the asynchronous operation if it is required. In the Cancel event the CancellationToken is Canceled causing the Task to exit.

Geofencing in background

Upto here we have implemented a background task using a TimeTrigger. This kind of trigger is not new to Windows 8.1. In the new release of the operating system they added also a LocationTrigger. A LocationTrigger is strictly related to the geofencing system. It triggers the background task execution when the status of a geofence, registered with the GeofenceMonitor has changed. This is really awesome give that we can use the GeofenceMonitor as I've explained in the previous number of this series and then attach a LocationTrigger to a background task and get notifications when the device enters or exits the geofences. Here is how to register the Location trigger.

private async void RegisterGeofenceBackgroundTask()

{

    this.GeoLocationTask = BackgroundTaskRegistration.AllTasks.FirstOrDefault(

        bt => bt.Value.Name == GeofenceServiceName).Value;

  

    if (this.GeoFenceTask == null)

    {

        BackgroundAccessStatus backgroundAccessStatus =

            await BackgroundExecutionManager.RequestAccessAsync();

  

        if (backgroundAccessStatus == BackgroundAccessStatus.Unspecified ||

            backgroundAccessStatus == BackgroundAccessStatus.Denied)

            throw new Exception("Error registering background task: not authorized");

  

        BackgroundTaskBuilder taskBuilder = new BackgroundTaskBuilder();

  

        taskBuilder.Name = GeofenceServiceName;

        taskBuilder.TaskEntryPoint = GeofenceServiceEntryPoint;

  

        LocationTrigger locationTrigger = new LocationTrigger(LocationTriggerType.Geofence);

  

        taskBuilder.SetTrigger(locationTrigger);

  

        this.GeoFenceTask = taskBuilder.Register();

    }

  

    this.GeoFenceTask.Completed += OnCompleted;

}

The code is pretty similar to the one used for a TimeTrigger but it differs for the declaration of the LocationTrigger. This kind of trigger only accept a LocationTriggerType equals to Geofence that is the sole available at the moment. Here we do not declare any geofence to monitor. These have to be already added to the geofence monitor previously. So the trigger will fire when the monitor raises an event of GeofenceStateChanged.

The background task is in charge of finding what is the geofences that have been affected by this change. For this purpose you can use the ReadReports method.

public sealed class GeofenceService : IBackgroundTask

{

    private CancellationTokenSource CancellationTokenSource { get; set; }

  

    public void Run(IBackgroundTaskInstance taskInstance)

    {

        var deferral = taskInstance.GetDeferral();

  

        try

        {

            this.EvaluateGeofences();

        }

        catch (Exception ex)

        {

            Debug.WriteLine(ex.Message);

        }

        finally

        {

            deferral.Complete();

        }

    }

  

    private void EvaluateGeofences()

    {

        foreach (var report in GeofenceMonitor.Current.ReadReports())

        {

            Debug.WriteLine("Geofence {0} changed to {1}", report.Geofence.Id, report.NewState);

        }

    }

}

The ReadReports method returns all the changes occured since last time the method was called. This is really perfect to get a list of events that we can evaluate to understand what is the one that has triggered the background service.

Improved location-awareness

In this article and in the previous, I've explained how to take advantage of location services that are exposed by Windows 8 and recently powered by the 8.1 release. It is sure that the recent release added some very important trick for the development of location-aware apps. The geofencing is really a beautiful feature that can lead to a number of applications, also for business purposes. I hope that next releases also add some more control to the location aspects, to give another major gear to this category of apps.

Windows 8.1: Location-aware apps - Part #1: What's new in geolocation

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 21 Oct 2013 13:34:00 GMT

Don't miss

All SilverlightShow Ebooks

Mobile devices have grown a lot in the last years and a lot of practical applications are developing a huge market around them. One of the most important points that made the success of mobile devices is the availability of sensor that uses the Global Positioning System (GPS) to detect the geographic location of the devices. GPS Sensor is supported in Windows Store apps since the very first release but it has got a number of new and important features that maximizes the capabilities of your device giving new horizons to your ideas.

At the basic.

People that build a GPS application in Windows 8 knows that the only class used by the location system is the Geocoordinate. This type contains a number of properties related to the location: Latitude, Longitude and Altitude describes the tridimensional position detected by the sensor, heading (direction) and speed add some more useful information that are calculated on the basis of multiple sampling. In Windows 8.1, all these properties still exist but they have been deprecated. If you try to use them you get a warning with this text: "Altitude may be altered or unavailable after Windows 8.1. Instead, use Geocoordinate.Point".

The following diagram shows the types involved in this changes: The new "Point" property in the Geocoordinate class opens to a new interesting perpective, just because it opens to new future extensions. At the basic of this property there is the IGeoShape interface that, as the name suggests, may describe complex shapes and not only points.

As you can see, there is almost another classe implementing IGeoShape. It is the Geocircle. This class is used to describe a circular area, made of a center and a radius around it. The use of this class is related to the Geofencing, that is the interception of events related to a geographic area. (I'll cover this argument later).

Together with the Point property, the Geocoordinate class got another two properties. The SatelliteData is the central point when you need to determine the accuracy of the satellite information. It's properties are able to describe the precision on the basis of the position of satellites in the sky. The argument is pretty complex but, to oversimplify, this parameter can figure if you are getting information from satellites that cover only a little part of the sky (less precise) or well distributed and effective. Finally the PositionSource property lets you know how the position has been detected. In Windows 8 the position can be calculated with many sources, Cellular cells, Satellites, Wi-fi and IP address. All these have different precision and it is important to know what is the source of your measurement.

Getting the position

The way you get a position in Windows 8.1 has not changed, but I'll include an example for the sake of completeness. The main handle for the reading of the location is in the Geolocator class.

   1: private async void Button_Click(object sender, RoutedEventArgs e)

   2: {

   3:     Geolocator locator = new Geolocator();

   4:     locator.DesiredAccuracy = PositionAccuracy.High;

5:

   6:     var location = await locator.GetGeopositionAsync().AsTask();

7:

   8:     this.DisplayInfo(location);

   9: }

Once you create an instance of the type, you can first of all determine the accuracy you want, setting the DesiredAccuracy property to Default or High. As a practical result, when you set the value to High the device will try to use always the most reliable source available, that is Satellite. It this is not available because the device does not have a GPS sensor the positioning is calculated to the next accurate source and then so on. On my desktop PC, that does not have a GPS sensor, nor a cellular or wi-fi connection, the value always returns IPAddress that is the less precise source available. Definitely you have never to strictly rely on positioning precision, since it always try to return a value but this may be very inaccurate. Here is the result of the snippet on my tablet.

As you can see the PositionSource is Wi-Fi. This is because I'm in a closed room and the GPS probably is not able to receive accurate information.

The number "4326" in the SpatialReferenceId refers to the WGS84 projection system that is the most common spatial reference, used by Bing and Google as an example. This means you can directly use the Latitude and Longitude on a Bing Map without the need of any conversion.

The Geolocator allows you to get the position, as a sequence of events, on the basis of a threshold distance between samples. To setup this you can hook up the PositionChanged event and setup the MovementThreshold property to the required amount of meters. Additionally you can also set the ReportInterval property to indicate the minimum time between different samples, so you can slow down the flow of information and preserve battery from being drained.

Slice the world

Getting a position from your device is for sure a great thing if you need to mark static positions on the earth surface, but listen to me who I've worked on geospatial solutions, it is nothing. When you have a device able to track a geographical position and you want to develop a system on top of it, you immediately meet the need to handle the dynamic aspect of geo location and not only the collection of positions. And in a device like this, it may become an hard task to monitor changes of position, while on the go, and check if they match with given point to track some high level object like a vehicle trip or a goods move.

Windows 8.1 makes a great step forward in this direction letting you define a so-called "geo-fence", that is a geographical area that is monitored by the device automatically. A Geofence in WinRT is defined as an element that have an "ID", useful to handle multiple locations, and a shape that is an instance of IGeoShape.

Given what we previously said, at the moment WinRT only supports circular shapes. a Geopoint is an IGeoShape but it is too small to be handled by a positioning system. It is almost impossible to detect a Geofence as a point source. So the only shape we can reasonably use is the Geocircle. In my experience, the tracking of circular position does not always suffice, expecially if you have to handle close positions. But for many applications circular areas are good.

The main point to handle Geofences is the GeofenceMonitor. It is a singleton object, returned by the Current property and is represents the system-wide instance of the monitor. So be careful. This object esposes a Geofences collection that shows only geofences added by the current application/user. You can user this property to append new geofences, but you always have to handle this collection like a persistent item. Infact if you add an element and then you close the app, when you enter agin the element is still there. So, the better is to handle your collection being always care of the IDs you entered and at least clear them when you enter the application or double check before adding that the element does not exists.

Let me propose a simple example. In this example I'll use the previous code to detect the current position and add a geofence around it.

   1: private async void Button_Click(object sender, RoutedEventArgs e)

   2: {

   3:     Geolocator locator = new Geolocator();

4:

   5:     var location = await locator.GetGeopositionAsync().AsTask();

6:

   7:     this.DisplayInfo(location);

8:

   9:     Geofence fence = GeofenceMonitor.Current.Geofences.FirstOrDefault(o => o.Id == "here");

10:

  11:     if (fence == null)

  12:     {

  13:         GeofenceMonitor.Current.Geofences.Add(

  14:             new Geofence(

  15:                 "here",

  16:                 new Geocircle(location.Coordinate.Point.Position, 50.0),

  17:                 MonitoredGeofenceStates.Entered,

  18:                 false,

  19:                 TimeSpan.FromSeconds(10)));

  20:     }

  21: }

So, after the position has been detected, the first operation is to check is a Geofence with id equals to "here" already exist. Only if the instance does not exists a new Geofence is created and added to the collection. The new geofence has a number of properties. Other to the ID and shape

monitoredStatus is a flag property that indicate events we need to be nodified. We can use a boolean OR to specify multiple values like Entered | Exited
singleUse let say if the geofence is persistent. Is single use is true, the Geofence is automatically removed after it has been hit by an event.
dwellTime is the threshold value the device should remain into the geofence before an event is raised. In this case 10 seconds.

In the example, when you hit the button, the position is detected and added as a Geofences. After 10 seconds the GeofenceStateChanged event should be raised (stated that we are still in it). And we handle is as follow:

   1: private void MainPage_Loaded(object sender, RoutedEventArgs e)

   2: {

   3:    GeofenceMonitor.Current.GeofenceStateChanged += Current_GeofenceStateChanged;

   4: }

5:

   6: private async void Current_GeofenceStateChanged(GeofenceMonitor sender, object args)

   7: {

   8:    await this.Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,

   9:        () =>

  10:        {

  11:            Geofence changed = (from gf in sender.Geofences

  12:                                where gf.MonitoredStates != MonitoredGeofenceStates.None

  13:                                select gf).FirstOrDefault();

14:

  15:            if (changed != null)

  16:            {

  17:                txtMessage.Text = string.Format("The geofence with id '{0}' changed to '{1}'", changed.Id, changed.MonitoredStates);

  18:            }

  19:        });

  20: }

In this code I search for Geofences that are in a status different from "None" and I display a message in a textbox. With more that a single Geofence the code should be much more complex to handle multiple changes. Be sure you can handle more that a single Geofence signaled ad a time, because nothing prevents you to add items that cover the same position.

Workin' on the go...

The Geofences system is really interesting and straightforward to be used. Unfortunately the code I've shown only works while the application is running. And we for sure know that this is not always true in a WinRT system. It is the reason why the geofencing also supports background tasks, ad this will be the argument from the next article in the series.

Windows 8.1: Exploring new controls (Hub, CommandBar, Flyouts and Pickers)

editorial@silverlightshow.net (Andrea Boschin ) — Tue, 15 Oct 2013 14:40:00 GMT

As often happens, the timeframe passed between the release of Windows 8 and the new release numbered 8.1, have brought to the light some things that developers felt missing during the their work. Many of these are simply obvious features left behind just for time issues, others are answers to new needs that could not be imagined in the first release, and others again are some effective behaviors proposed by some successful application. In this release all these paradigms have created a new output, in the form of a number of "Controls" that are now available to developers.

Don't miss

All SilverlightShow Ebooks

On the front of the "time victims" there are new pickers that simplify the input of Date and Time values and some new flyouts to better answer to the needs of the Moder UI requirements. There is then a new CommandBar, made to implement easily the most common layout of an Application Bar, without the headaches coming from its layout. Finally there is also a new Hub control that make easy and widely available the hub paradigm presented by some application in Windows 8. Turn on the lights and let start explore them.

The missing pickers and flyouts

Every application, also the most simple, has the need of asking input from the user and usually this is a point where errors and difficulties become hard to be handled. The TextBox control, the sole available before Windows 8.1, it is really hard to ask the user to input different datatypes and create a constrained interface to prevent input errors. The date and time values are a really practical example of this problem and from time to time Microsoft and third party companies provided some specific control in every platform. Windows 8.1 make available the new DatePicker and TimePicker controls, not only to avoid input errors, but also to give a uniform usability to Moder UI interfaces. Here is some examples:

   1: <DatePicker Header="Abbreviated"

   2:             DayFormat="{}{day.integer}" DayVisible="True"

   3:             MonthFormat="{}{month.integer}" MonthVisible="True"

   4:             YearFormat="{}{year.abbreviated}" YearVisible="True" />

5:

   6: <DatePicker Header="With padding zero"

   7:             DayFormat="{}{day.integer(2)}" DayVisible="True"

   8:             MonthFormat="{}{month.integer(2)}" MonthVisible="True"

   9:             YearFormat="{}{year.full(4)}" YearVisible="True" />

10:

  11: <DatePicker Header="Custom format"

  12:             DayFormat="{}{dayofweek.abbreviated} - {day.integer(2)}" DayVisible="True"

  13:             MonthFormat="{}{month.abbreviated(3)}" MonthVisible="True"

  14:             YearFormat="{}{year.abbreviated}" YearVisible="True" />

15:

  16: <DatePicker Header="Week day only"

  17:             DayFormat="{}{dayofweek.full}" DayVisible="True"

  18:             MonthVisible="False" YearVisible="False" />s

The previous examples produce the following output. In this screenshot I've included two Cultures (it-IT and en-US) to show how the control automatically handles internazionalization.

With format properties you can choose from a wide set of formats that are good for the finest tastes. You can also exclude one or more parts of the date when you do not need to get a complete date from your user. As for dates you can also use the TimePicker to get a time value:

   1: <TimePicker ClockIdentifier="24HourClock" Header="24 hour clock"/>

2:

   3: <TimePicker ClockIdentifier="12HourClock" Header="24 hour clock"/>

This code shows the following result:

With the ClockIdentifier property you are able to switch between a 12/24 time picker. The output of the controls are a plain DateTime for the DatePicker and a Timespan fo the TimePicker. This let you to simply add the timespan to the date to get a full DateTime including time.

The two control present a wide list of values when an item is selected and this let the user to select easily the choosen value also if he is using a finger instead of the mouse pointer. These controls are definitely awesome and well designed.

Another trouble with Windows 8, especially in XAML are the flyouts. Flyout is a generic name give to each part of the user interface that "flies" over other control. This includes the generic popups, menu and the settings panel. To solve these troubles, Windows 8.1 include some new Flyout controls targeted to these issues. Every FrameworkElement can get an attached flyout, using the special attached property "FlyoutBase.AttachedFlyout". This lets you position a flyout relatively to the item it is attached to, setting the Placement property to one of foru predefined value. Once a flyout has been attached to an element, you can show it using the FlyoutBase.ShowAttachedFlyout() method. Here is an example:

   1: <Ellipse Tapped="Ellipse_Tapped" Fill="Blue" Width="50" Height="50">

   2:     <FlyoutBase.AttachedFlyout>

   3:         <Flyout>

   4:             <Ellipse Width="100" Height="100" Fill="Red">Ellipse>

   5:         Flyout>

   6:     FlyoutBase.AttachedFlyout>

   7: Ellipse>

This code adds a flyout to an Ellipse and sets its content to another (much bigger) Ellipse. To open the flyour you have to manually handle the "Tapped" event and call the ShowAttachedFlyout methot passing a reference to the ellipse to which the flyout is attached.

   1: private void Ellipse_Tapped(object sender, TappedRoutedEventArgs e)

   2: {

   3:     FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);

   4: }

This code opens the flyout as expected, positioned on the top of the element. The flyout is a rectangle area with a border. The Button is a special case for flyouts because it have a "Flyout" property and automatically handle the click to open the attached flyout. So in this case you can simply write this in XAML:

1:

2:

   3:         "Bottom">

   4:             "Enter the name" />

5:

6:

7:

The previous code, without any codebehind, shows the flyout on the left side.

The flyout is a simple container where you can put your own element in plain XAML, and it will behave as if it was in the main Visual Tree. So you can handle events, use databinding and resources. If you need to create a flying menu instead, there is a special Flyout control called menù flyout. Inside it you can use a set of menu items and separators to create list of options the user can select. At the right side an example of this kind of menù.

The control is really simple and includes text items, toggle buttons that appear as a tickmark and a special separator item:

   1: <Button Content="Do you like Windows 8?">

   2:     <Button.Flyout>

   3:         <MenuFlyout Placement="Top">

   4:             <ToggleMenuFlyoutItem Text="Yes" IsChecked="True" />

   5:             <ToggleMenuFlyoutItem Text="No" IsChecked="False" />

   6:             <MenuFlyoutSeparator />

   7:             <MenuFlyoutItem>CancelMenuFlyoutItem>

   8:         MenuFlyout>

   9:     Button.Flyout>

  10: Button>

Finally, the SettingsFlyout let you handle the settings panel with few lines of code. Implementing the settings contract was not so simple before Windows 8.1 because you was in charge of creating all the UI for the settings options. In Windows 8.1 you can create a special UserControl called SettingsFlyout and design it aspect as you do with a normal page. After selecting the "New Item" in Visual Studio you can add a SettingsFlyout element and start with its interface in the designer.

   1: <SettingsFlyout

   2:     x:Class="XPG.WinRTBehaviors.AppSettings"

   3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   5:     xmlns:local="using:XPG.WinRTBehaviors"

   6:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

   7:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

   8:     mc:Ignorable="d" Title="Settings" d:DesignWidth="346">

9:

  10:     <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch">

11:

  12:         <ComboBox Header="Language" HorizontalAlignment="Stretch" Margin="0,0,0,25" SelectedIndex="0">

  13:             <ComboBoxItem>ItalianComboBoxItem>

  14:             <ComboBoxItem>EnglishComboBoxItem>

  15:         ComboBox>

16:

  17:     StackPanel>

18:

  19: SettingsFlyout>

Then in the page, handling the CommandRequested event for the settings contract you have to provide a command to open your settings flyout. Into the command you create an instance of the flyout you have created and then call the Show method as you do with a popup.

   1: private void MainPage_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPane sender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)

   2: {

   3:     Windows.UI.ApplicationSettings.SettingsCommand settingsCommand =

   4:         new Windows.UI.ApplicationSettings.SettingsCommand(1, "Settings",

   5:             (handler) =>

   6:             {

   7:                 AppSettings settings = new AppSettings();

   8:                 settings.Show();

   9:             });

10:

  11:     args.Request.ApplicationCommands.Add(settingsCommand);

  12: }

It is really easy and straightforward.

Simplify your AppBar experience: the CommandBar

Setting up an application bar in XAML is an easy task, but most of the times you simply need to place some buttons inside it, and preparing the layout may be annoying. The new CommandBar control is made to avoid the overhead of work you have in these case and to consolidate the Modern UI guidelines that have a strong requirement for the positioning of buttons inside an application bar. The CommandBar appear as a simple container that hosts a number of buttons.

   1: <Page.BottomAppBar>

   2:     <CommandBar>

   3:         <AppBarButton Icon="Home" Label="Go to home" />

   4:         <AppBarButton Icon="Add" Label="Add item" />

   5:     CommandBar>

   6: Page.BottomAppBar>

All the items that are directly inside the CommandBar are considered "primary" buttons. They are hosted on the immediate right of the application bar as the guidelines prescribe. When you need to add buttons to the left side (the contextual items), you have to use the SecondaryButtons property as in the following example.

   1: <Page.BottomAppBar>

   2:     <CommandBar>

   3:         <AppBarButton Icon="Home" Label="Go to home" />

   4:         <AppBarButton Icon="Add" Label="Add item" />

   5:         <CommandBar.SecondaryCommands>

   6:             <AppBarButton Icon="Delete" Label="Delete" />

   7:             <AppBarButton Icon="MoveToFolder" Label="Move" />

   8:             <AppBarSeparator />

   9:             <AppBarToggleButton Icon="Bold" Label="Bold" />

  10:         CommandBar.SecondaryCommands>

  11:     CommandBar>

  12: Page.BottomAppBar>

This configuration shows the following application bar:

In this command bar you can see the separator and the Bold button is defined as AppBarToggleButton so you can switch it on or off. The Icon property of the buttons can be set with a predefined serie of given values. This helps to keep the look and feel of applications very similar in the glyphs they uses. You can also use your own bitmap of XAML path to define the image in the icon:

   1: <AppBarButton Label="Icon with bitmap">

   2:     <AppBarButton.Icon>

   3:         <BitmapIcon UriSource="ms-appx:///Assets/Icons/mycustomicon.png"/>

   4:     AppBarButton.Icon>

   5: AppBarButton>

To specify a path you can use the PathIcon element. Additionally, with the FontIcon element you can use a glyph from a font, specifying the FontFamily and the code as and exadecimal value.

Enhance the apps with the Hub control

One of the more requested features in Windows 8, just after the launch, is the Hub constrol that many applications showed since first days. The news application, but also the sports, meteo and travel come with a similar aspect that allows the user to slide between different sections stacked side by side horizontally. In Windows 8.1 the hub contro become real and the following picture shows how it appear.

In this example I've created with little effort using my pictures in instagram (http://instagram.com/thesmallgrove), you see three sections stacked. The first one (white) is the main section, usually reserved to introduce news. In this figure is shows the most recent picture. The second section contains recent shoots and finally another section shows categories. Nothing prevents you to add other sections and they will be showed scrolling horizontally since the screen usually covers only the first sections (in this example the first and part of the second). The code to create this example is slightly simple; first of all add a Hub control:

   1: <Hub Header="TheSmallGrove pictures" Background="White">

2:

   3: Hub>

Here I define the main title of the hub. This title is fixed on the screen and the hub scrolls under it. A section is created using a HubSection element inside the Hub control

   1: <HubSection MinWidth="1000" Header="Sunset in Peschici (Apulia)">

   2:     <DataTemplate>

   3:         <StackPanel>

   4:             <Image Source="http://distilleryimage8.ak.instagram.com/f0a5619826b411e39cc222000a9f38cc_7.jpg" Margin="0,20,0,0" />

   5:             <StackPanel>

   6:                 <TextBlock Style="{ThemeResource BodyTextBlockStyle}"><Run Text="Taken:" FontWeight="Bold" /><Run Text="August, 12 2012" />TextBlock>

   7:                 <TextBlock Style="{ThemeResource BodyTextBlockStyle}"><Run Text="Camera:" FontWeight="Bold" /><Run Text="Leica V-Lux 2" />TextBlock>

   8:                 <TextBlock Style="{ThemeResource BodyTextBlockStyle}"><Run Text="Place:" FontWeight="Bold" /><Run Text="Peschici, Apulia (Italy)" />TextBlock>

   9:             StackPanel>

  10:         StackPanel>

  11:     DataTemplate>

  12: HubSection>

This snippet shows the very first section. Inside a section you have to use a DataTemplate to fill the content. Then inside the DataTemplate you place the portion of the Visual Tree. Each section has a title itself and you also convert it to an hyperlink using the IsInteractive property. The other sections are stacked into the hub control. Here is the complete code:

   1: <Hub Header="TheSmallGrove pictures" Background="White">

   2:     <HubSection MinWidth="1000" Header="Sunset in Peschici (Apulia)">

   3:         <DataTemplate>

   4:             <StackPanel>

   5:                 <Image Source="http://distilleryimage8.ak.instagram.com/f0a5619826b411e39cc222000a9f38cc_7.jpg" Margin="0,20,0,0" />

   6:                 <StackPanel>

   7:                     <TextBlock Style="{ThemeResource BodyTextBlockStyle}"><Run Text="Taken:" FontWeight="Bold" /><Run Text="August, 12 2012" />TextBlock>

   8:                     <TextBlock Style="{ThemeResource BodyTextBlockStyle}"><Run Text="Camera:" FontWeight="Bold" /><Run Text="Leica V-Lux 2" />TextBlock>

   9:                     <TextBlock Style="{ThemeResource BodyTextBlockStyle}"><Run Text="Place:" FontWeight="Bold" /><Run Text="Peschici, Apulia (Italy)" />TextBlock>

  10:                 StackPanel>

  11:             StackPanel>

  12:         DataTemplate>

  13:     HubSection>

14:

  15:     <HubSection Header="Recent" IsHeaderInteractive="True"

  16:             Background="Gainsboro" MinWidth="400">

  17:         <DataTemplate>

  18:             <Grid>

  19:                 <Grid.ColumnDefinitions>

  20:                     <ColumnDefinition Width="Auto" />

  21:                     <ColumnDefinition Width="Auto" />

  22:                     <ColumnDefinition Width="Auto" />

  23:                     <ColumnDefinition Width="Auto" />

  24:                 Grid.ColumnDefinitions>

  25:                 <Grid.RowDefinitions>

  26:                     <RowDefinition Height="Auto" />

  27:                     <RowDefinition Height="Auto" />

  28:                     <RowDefinition Height="Auto" />

  29:                     <RowDefinition Height="Auto" />

  30:                 Grid.RowDefinitions>

  31:                 <Image Grid.Column="0" Grid.Row="0" Width="190" Height="190" Source="http://distilleryimage8.ak.instagram.com/f0a5619826b411e39cc222000a9f38cc_7.jpg" Margin="0,0,20,20" />

  32:                 <Image Grid.Column="1" Grid.Row="0" Width="190" Height="190" Source="http://distilleryimage3.ak.instagram.com/b4d88ab42b5a11e3ab8622000ab5c723_7.jpg" Margin="0,0,20,20" />

  33:                 <Image Grid.Column="2" Grid.Row="0" Width="190" Height="190" Source="http://distilleryimage1.ak.instagram.com/7e800e48270d11e3bf1c22000aa8008f_7.jpg" Margin="0,0,20,20" />

  34:                 <Image Grid.Column="3" Grid.Row="0" Width="190" Height="190" Source="http://distilleryimage6.ak.instagram.com/07cad20225d611e3a73522000a1faf50_7.jpg" Margin="0,0,20,20" />

  35:                 <Image Grid.Column="0" Grid.Row="1" Width="190" Height="190" Source="http://distilleryimage1.ak.instagram.com/1deed2dc24f911e3be6b22000aa80214_7.jpg" Margin="0,0,20,20" />

  36:                 <Image Grid.Column="1" Grid.Row="1" Width="190" Height="190" Source="http://distilleryimage7.ak.instagram.com/2f7722e8244011e3ab6722000a1fb853_7.jpg" Margin="0,0,20,20" />

  37:                 <Image Grid.Column="2" Grid.Row="1" Width="190" Height="190" Source="http://distilleryimage7.ak.instagram.com/5c23c6d623c111e39a4b22000a1fb593_7.jpg" Margin="0,0,20,20" />

  38:                 <Image Grid.Column="3" Grid.Row="1" Width="190" Height="190" Source="http://distilleryimage7.ak.instagram.com/b3e01a62239611e3b6c622000a1f92d1_7.jpg" Margin="0,0,20,20" />

  39:                 <Image Grid.Column="0" Grid.Row="2" Width="190" Height="190" Source="http://distilleryimage6.ak.instagram.com/bac0f9f6292111e3995e22000ab5a7b8_7.jpg" Margin="0,0,20,20" />

  40:                 <Image Grid.Column="1" Grid.Row="2" Width="190" Height="190" Source="http://distilleryimage10.ak.instagram.com/ddbd777827cc11e3a9dd22000a9e29a7_7.jpg" Margin="0,0,20,20" />

  41:                 <Image Grid.Column="2" Grid.Row="2" Width="190" Height="190" Source="http://distilleryimage2.ak.instagram.com/794a6a5230f111e3815722000aaa049c_7.jpg" Margin="0,0,20,20" />

  42:                 <Image Grid.Column="3" Grid.Row="2" Width="190" Height="190" Source="http://distilleryimage3.ak.instagram.com/b97c03bc2e9211e3aa3022000a9e2931_7.jpg" Margin="0,0,20,20" />

  43:                 <Image Grid.Column="0" Grid.Row="3" Width="190" Height="190" Source="http://distilleryimage7.ak.instagram.com/c1db47722cce11e3a23c22000a1f9d66_7.jpg" Margin="0,0,20,20" />

  44:                 <Image Grid.Column="1" Grid.Row="3" Width="190" Height="190" Source="http://distilleryimage7.ak.instagram.com/9dae4d1c228911e3bb0922000a1fbf4a_7.jpg" Margin="0,0,20,20" />

  45:                 <Image Grid.Column="2" Grid.Row="3" Width="190" Height="190" Source="http://distilleryimage6.ak.instagram.com/52eedb6021db11e3935222000a1fb825_7.jpg" Margin="0,0,20,20" />

  46:                 <Image Grid.Column="3" Grid.Row="3" Width="190" Height="190" Source="http://distilleryimage8.ak.instagram.com/62bd4818210611e39ff222000aa8009c_7.jpg" Margin="0,0,20,20" />

  47:             Grid>

  48:         DataTemplate>

  49:     HubSection>

50:

  51:     <HubSection Header="Categories" Foreground="White"

  52:             Background="#666666" MinWidth="300">

  53:         <DataTemplate>

  54:             <StackPanel>

  55:                 <TextBlock Text="Still Life" Style="{ThemeResource TitleTextBlockStyle}" />

  56:                 <TextBlock Text="Portrait" Style="{ThemeResource TitleTextBlockStyle}" />

  57:                 <TextBlock Text="Landscape" Style="{ThemeResource TitleTextBlockStyle}" />

  58:                 <TextBlock Text="Famous places" Style="{ThemeResource TitleTextBlockStyle}" />

  59:             StackPanel>

  60:         DataTemplate>

  61:     HubSection>

62:

  63: Hub>

One interesting thing is that the Hub control implemente the ISemanticZoomInformation interface. This allows you to use the control in the ZoomedIn/ZoomedOut properties of the SemanticZoom control and navigate between different views using the pich gesture.

Take it under control.

This release seems to strongly enhance the developer experience, solving much of the issues we experienced previously. thes controls I've shown in this article comes together with a number of new features in the existing control set. It is really important that you scan for these changes because much of the times they makes you really fast and productive.

Windows 8.1: Behaviors SDK - Part #2

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 07 Oct 2013 12:22:00 GMT

After the last article where I spoken about the use of behaviors in Windows 8.1, it is time now to go deep inside the SDK and try to create our own behaviors. The SDK in Windows 8.1 includes a number of predefined behaviors that out-of-the box cover a number of cases, both with different activations (event driven and data driven) and with a number of actions, from the simplest property change to the manipulation of states and the invocation of commands. Connecting together predefined activation behaviors and actions suffice for most of the problems you may meet during development, but there are cases when only a specifically-tailored logic can solve an hassle. Here is the need of creating some behaviors and actions with our hands.

Actions or Behaviors?

Don't miss

All SilverlightShow Ebooks

Once you added the references to the behavior SDK, as I shown in the previous number, you have in your hand not only the existing behaviors but also the toolset you need to create your own. The first is to correctly decide how to choose between behaviors and actions.

For a correct choice you have to carefully watch at the problem you have to solve. It is not true that behaviors are made only to activate actions, but it is for sure that actions need a behavior to be applied to an element. Infact, since an action strongly requires that someone else activate its logic, the behaviors are directly connected to an element in the Visual Tree and can both attach event and properties and manipulate them.

Generally speaking, you should fall to create Actions when the predefined trigger behaviors suffice to activate your logic. So if you can rely on EventTriggerBehavior or on DataTriggerBehavior you can for sure implement and action and leave out of your mind the activation problem.

Differently, if you can go with predefined actions but you are unable to start them with one of the predefined triggers then you have to implement a behavior. This let you too hook up the control and then requires to scan actions and execute them.

Finally, if you need complex logic that require to hook up multiple events and properties, both the get/set states and information, then the better is to use a behavior and forget actions.

Create a simple trigger behavior

Let say we need to implement a new activation trigger. It's hard to figure out what you may need that does not fall into handling events and data changes. The only thing I have imagined is to handle the time dimension. So, for this example I'll show how to create a behavior able to trigger actions on the basis of a periodic timeout, a sort of snooze alarm, that will awake something in our user interface.

Implementing a behavior in Windows 8.1 do not mean extending an abstract class, like it was in Silverlight, but it requires you to implement a simple interface. This interface called IBehavior - it resides under the Microsoft.Xaml.Interactivity namespace - is a lightweight version of the Behavior class that we used in Silverlight, but it has a drawback. It directly applies to every DependencyObject without any distinction, so we cannot apply limitations on the basis of the target type. this makes programming slightly more difficult because you have to double check that the associated object can be manipulated by your logic. For this purpose we can create our own abstraction:

   1: public abstract class Behavior : DependencyObject, IBehavior

   2:      where T : DependencyObject

   3: {

   4:      public T AssociatedObject { get; private set; }

5:

   6:      protected abstract void OnAttached();

7:

   8:      protected abstract void OnDetached();

9:

  10:      DependencyObject IBehavior.AssociatedObject

  11:      {

  12:          get { return this.AssociatedObject; }

  13:      }

14:

  15:      void IBehavior.Attach(DependencyObject associatedObject)

  16:      {

  17:          if (associatedObject != null &&

  18:              !associatedObject.GetType().GetTypeInfo().IsSubclassOf(typeof(T)))

  19:              throw new Exception("Invalid target type");

20:

  21:          this.AssociatedObject = associatedObject as T;

  22:          this.OnAttached();

  23:      }

24:

  25:      void IBehavior.Detach()

  26:      {

  27:          this.OnDetached();

  28:          this.AssociatedObject = null;

  29:      }

  30: }

The class explicitely implements the IBehavior interface, so I'm able to override the AssociatedObject property and publish it to inherited classes. This property is strongly typed using the generic type T and this make the work much more easy. In the Attach methos then I check that the incoming object is compatible with T and in case I throw and exception.

To create a trigger we need to collect some actions and then raise the execution when it is required. It is another point we can handle with a base class. I will call it Trigger:

   1: [ContentProperty(Name = "Actions")]

   2: public abstract class Trigger : Behavior

   3:     where T : DependencyObject

   4: {

   5:     public Trigger()

   6:     {

   7:         this.Actions = new ActionCollection();

   8:     }

9:

  10:     public ActionCollection Actions

  11:     {

  12:         get;

  13:         private set;

  14:     }

15:

  16:     public void Execute(object sender, object parameter)

  17:     {

  18:         foreach (IAction item in this.Actions.OfType())

  19:         {

  20:             item.Execute(sender, parameter);

  21:         }

  22:     }

  23: }

The Trigger class exposes an Actions property. This is used to host child actions. Blend will recognize it and the designer should show the hierarchy correctly. The "ContentProperty" attribute on the class is used to allow direct content in the XAML to be mapped to this property. Finally the "Execute method crawls the child actions and calls tha Execute method of the IAction interface. Now the implementation is much more easy:

   1: public class TimeTrigger : Trigger

   2: {

   3:     private DateTime PreviousTime { get; set; }

   4:     private Timer Timer { get; set; }

5:

   6:     public int Interval

   7:     {

   8:         get; set;

   9:     }

10:

  11:     protected override void OnAttached()

  12:     {

  13:         this.PreviousTime = DateTime.Now;

  14:         this.Timer = new Timer(OnTick, null, 0, 1000);

  15:     }

16:

  17:     protected override void OnDetached()

  18:     {

  19:         // does nothing...

  20:     }

21:

  22:     private void OnTick(object state)

  23:     {

  24:         DateTime now = DateTime.Now;

25:

  26:         if (now.Subtract(this.PreviousTime).TotalSeconds >= this.Interval)

  27:         {

  28:             this.PreviousTime = now;

29:

  30: #pragma warning disable 4014

31:

  32:             this.AssociatedObject.Dispatcher.RunAsync(CoreDispatcherPriority.Normal,

  33:                 () =>

  34:                 {

  35:                     base.Execute(this.AssociatedObject, now);

  36:                 });

37:

  38: #pragma warning restore 4014

  39:         }

  40:     }

  41: }

The TimeTrigger class uses a Timer to raise an event every second. Then it check the time passed after the previous event and when it is greater than the specified interval it raises the actions. Take note that the "#pragma disable/restore" is used to prevent a warning that is raised because the RunAsync method of the dispatcher is asynchronous and we do not use the "async/await" pattern. It is not so important to await the execution here so I simply call it and forget. The call is marshaled to the UI thread just because the Timer represents a different thread and we need to avoid cross threading issues.

To test this trigger you can use a ChangePropertyAction ann you should see the change happening after the interval is passed. Blend should show the new behavior in its assets panel, together with core behaviors.

Camera... Action!

The implementation of a trigger behavior is slightly complex if you start from the IBehavior interface, but once you created your infrastructure classes it becomes rally easy. For actions instead, there is not a good reaso to bouild some infrastructure over the IAction interface. The interface has a single method and it goes directly to the implementation.

Let see a simple action. When our time trigger raises the action I would like to randomly change the color of the shape. So I create a GenerateRandomColor action:

   1: public class GenerateRandomColor : DependencyObject, IAction

   2: {

   3:   private Random generator = new Random(DateTime.Now.Millisecond);

   4:   private List colors = new List();

5:

   6:   public GenerateRandomColor()

   7:   {

   8:       Type type = typeof(Colors);

9:

  10:       foreach (var property in type.GetRuntimeProperties())

  11:       {

  12:           if (property.PropertyType == typeof(Color))

  13:               colors.Add((Color)property.GetValue(null));

  14:       }

  15:   }

16:

  17:   public static readonly DependencyProperty PropertyNameProperty =

  18:          DependencyProperty.Register("PropertyName", typeof(string), typeof(GenerateRandomColor), new PropertyMetadata(null));

19:

20:

  21:   public string PropertyName

  22:   {

  23:       get { return (string)GetValue(PropertyNameProperty); }

  24:       set { SetValue(PropertyNameProperty, value); }

  25:   }

26:

  27:   public object Execute(object sender, object parameter)

  28:   {

  29:       FrameworkElement element = sender as FrameworkElement;

30:

  31:       if (element != null & !string.IsNullOrEmpty(this.PropertyName))

  32:       {

  33:           PropertyInfo property = element.GetType().GetRuntimeProperty(this.PropertyName);

34:

  35:           if (property != null && property.PropertyType == typeof(Brush))

  36:           {

  37:               property.SetValue(element, this.GetRandom());

  38:           }

  39:       }

40:

  41:       return null;

  42:   }

43:

  44:   private Brush GetRandom()

  45:   {

  46:       int random = generator.Next(0, 1000) % this.colors.Count;

  47:       return new SolidColorBrush(this.colors[random]);

  48:   }

  49: }

Into the Action, in the ctor I scan the Colors class to create a palette. This copies the default system colors to a list to have a cout of them an a index to retrieve the instance. When the action is called, a number is generated in the range from 0 and the max number of colors in the array. The color is picked and it is assigned to the target property. The code uses some reflection to dynamically pick up the target property and made the assignment. Nothing else.

Now that the action is ready we can use Blend to configure the behavior. Pay attention that you will be required to manually enter the property name. There is not a way to instruct Blend to use the property selector as for ChangePropertyAction. The finally XAML markup should be like this:

   1: <Rectangle Fill="White" Width="100" Height="100">

   2:     <Interactivity:Interaction.Behaviors>

   3:         <code:TimeTrigger Interval="15">

   4:             <code:GenerateRandomColor PropertyName="Fill" />

   5:         code:TimeTrigger>

   6:     Interactivity:Interaction.Behaviors>

   7: Rectangle>

When you run the example, after 15 seconds you will have to see the rectangle change its color randomly. Then again after another 15 seconds and so on.

Why and when?

Behavior are a wonderful tool in your hands but, as it always happens, you have to carefully evaluate when and why to use them. It's definitely wrong to use extensively behaviors, expecially if you do not need to reuse it. Behaviors are tailored to take a recurrent piece of logic, applied to an user interface, and make it reusable across different pages and often across different apps. Another good reason to use behaviors may be to remove parts of codebehind, that may translates values of the view model into operations that cannot be handled by VisualStateManager or Converters. This lead to simplify the application, and mostly to isolate a specific locic that usually become again highly reusable. So please pay always attention on how you use the toolset because a wrong use may be worst of the problem you are trying to address.

Windows 8.1: Behaviors SDK - Part #1

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 30 Sep 2013 11:37:00 GMT

Together with Silverlight 3.0 RTM, hidden inside the release of Blend 3.0 in later 2009, Microsoft released an interesting feature that in the projects had to support Sketckflow users. These small pieces of codes, at the first sight appeared as a "draggable" logic, made to increase the designers productivity by adding specific behaviors to objects, directly from the design surface. The "behaviors", this is the name given to these new elements, were part of the Blend 3.0 SDK as a separate download and this contributed to them success. Infact, the behaviors have gained an important part into the scene, just because they are not only part of Blend, but also and expecially because they was easy to be created by developers that started to take advantage of them immediately.

Don't miss

All SilverlightShow Ebooks

After the first release, behavior continued to live not only in Silverlight, but also in Windows Phone and they have been always appreciated for the capability of abstracting an user interface behavior, including it into a small reusable class. This is really important, not only to grant designers to add these behaviors without the need of knowing how to write code, but also, because they are able to strip away some UI logic that previously required programming the codebehind of pages and controls. So they are an important piece into the daily fight to the mixing of business logic and interface logic.

Windows 8.1 and the Behaviors SDK

This said, it is very understandable the disappointment that comes when people discovered that behaviors have been pulled out of XAML for Windows 8. This disappointment was really justified because behaviors have been a filler for missing aspects in Silverlight and, when they have been removed, nothing have been put in place to fill these same gaps. One of the most common usage of behaviors was the invocation of ICommand instances in ViewModel, to attach a command to almost every available event in the View. With their departure this problem returned to the writing into codebehind.

Luckily, the team behind XAML for Windows 8 listened carefully to people and in the latest release of Windows 8.1 they added the support for a subset of Behaviors, that is still reduced if compared with Silverlight and Windows Phone but they suffice to resolve the most of the problems they originally covered.

Behavior SDK, to confirm a tradition, is not directly part of the core libraries, but it comes as a separate set of assemblies, shipped together with Visual Studio 2013. To add behaviors to your application, the first stop is the "references dialog", where you can include the "Behavior SDK (XAML)" item into the "Windows -> Extensions" tab.

After having added this reference, the behaviors become available and the first place where they appear is its natural location: Blend. To experiment with behaviors, just create a simple blank application and the open it in Blend for Visual Studio 2013. Behaviors appears (again) in the "assets" tab under the omonimous section. There is a small set of predefined behaviors in place and we can directly start to familiarize with them.

Before to start, it is important to understand some subtle differences, you may have noticed in the figure on the left side.

There are two type of items in this list. The ones that have a small arrow as the icon and the ones that have a gear. The first are called Actions and the second are Behaviors. The differences come from the fact that Actions needs a behavior to run while behaviors can be directly attached to objects and they are able to attach its properties and events. Leaving on the side the "IncrementalUpdateBehavior" - it is specially tailored to add incremental loading to ItemsControl -there are two remaining behaviors: EventTriggerBehavior and DataTriggerBehavior.

An easy example: EventTriggerBehavior

As the name suggests, EventTriggerBehavior is able to attach a specific event of the object which it is attached to, and when the event is raised it executes one or more actions. Let me do an example using a simple Action called ChangePropertyAction. Drag inside the canvas of the page two rectangles of 100x100 of size. Then, dragging it from the Assets tab, add an instance of this action to one of the rectangles.

The resulting structure in the Project is reported on the right side. Blend automatically added a "EventTriggerBehavior" and then it added the ChangePropertyAction to it. Now we have to configure the behavior. After having selected it in the structure, in the properties tab we are able to choose an event from a dropdown list. These are the events published by the "Rectangle". For this example simply choose the PointerPressed event. The "Source object" property should be set to the rectangle where the behavior has been attached.

Now its time to select the inner action. This action has a "Target object" property that is initially set to the same object to which the behavior has been applied. Dragging the circle on the right side over the target object we have to select the secondary rectangle as the target. This way the dropdown list will show the name of all the Dependency Properties of the target rectangle. Selecting a property we are presented with a panel that let us select the desired value. As an example if you choose the "Background" property the designer presents the color selector. Select your preferred color and then run the example.

Please take note that the codebehind of the application is still empty a no other code have been added. Running the exaample we should see the secondary rectangle changing its fill color when the primary is clicked. As an experiment you can add some other ChangePropertyAction instances and connect it with other properties of the same target or of others.

Introducing the DataTriggerBehavior

DataTriggerBehavior instead is able to detect the change of a property, basing it works on the INotifyPropertyChanged interface. Using this trigger you can monitor a property and have the actions called when a specific value has been set. To make an example we should try to add a ViewModel to the page. This ViewModel should implment INotifyPropertyChanged and it have a "Now" property that contains the most recent time. Here is the code:

public class MainPageViewModel : INotifyPropertyChanged

{

    public event PropertyChangedEventHandler PropertyChanged;

  

    public CoreDispatcher Dispatcher { get; set; }

    public Timer Timer { get; set; }

  

    private DateTime now;

    public DateTime Now 

    {

        get { return now; }

        set

        {

            if (now != value)

            {

                now = value;

                this.RaisePropertyChanged("Now");

            }

        }

    }

  

    private void RaisePropertyChanged(string propertyName)

    {

        PropertyChangedEventHandler handler = PropertyChanged;

  

        if (handler != null)

            handler(this, new PropertyChangedEventArgs(propertyName));

    }

  

    public MainPageViewModel()

    {

        this.Dispatcher = Window.Current.Dispatcher;

        this.Timer = new Timer(Tick, null, TimeSpan.Zero, TimeSpan.FromSeconds(1));

    }

  

    private async void Tick(object state)

    {

        await this.Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => this.Now = DateTime.Now);

    }

}

The example ViewModel also have a Timer instance that automatically changes the value of the "Now" property every half a second. This result to a notification to the View that we may connect with a DataTriggerBehavior. Let see the XAML code; now it is time to go back to Visual Studio 2013 to have a look to the code, but remember that you can accomplish the same using only the Blend's designer.

<Page

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:XPG.WinRTBehaviors"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity" xmlns:Core="using:Microsoft.Xaml.Interactions.Core"

    xmlns:Media="using:Microsoft.Xaml.Interactions.Media"

    x:Class="XPG.WinRTBehaviors.MainPage"

    x:Name="page" mc:Ignorable="d">

    

    <Page.DataContext>

        <local:MainPageViewModel />

    Page.DataContext>

  

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Interactivity:Interaction.Behaviors>

            <Core:DataTriggerBehavior Binding="{Binding Now.Second, Mode=OneWay}" ComparisonCondition="GreaterThanOrEqual" Value="0">

                <Core:ChangePropertyAction TargetObject="{Binding ElementName=r9}" PropertyName="Visibility">

                    <Core:ChangePropertyAction.Value>

                        <Visibility>VisibleVisibility>

                    Core:ChangePropertyAction.Value>

                Core:ChangePropertyAction>

            Core:DataTriggerBehavior>

            <Core:DataTriggerBehavior Binding="{Binding Now.Second, Mode=OneWay}" ComparisonCondition="GreaterThanOrEqual" Value="6">

                <Core:ChangePropertyAction TargetObject="{Binding ElementName=r8}" PropertyName="Visibility">

                    <Core:ChangePropertyAction.Value>

                        <Visibility>VisibleVisibility>

                    Core:ChangePropertyAction.Value>

                Core:ChangePropertyAction>

            Core:DataTriggerBehavior>

            <Core:DataTriggerBehavior Binding="{Binding Now.Second, Mode=OneWay}" ComparisonCondition="GreaterThanOrEqual" Value="12">

                <Core:ChangePropertyAction TargetObject="{Binding ElementName=r7}" PropertyName="Visibility">

                    <Core:ChangePropertyAction.Value>

                        <Visibility>VisibleVisibility>

                    Core:ChangePropertyAction.Value>

                Core:ChangePropertyAction>

            Core:DataTriggerBehavior>

            <Core:DataTriggerBehavior Binding="{Binding Now.Second, Mode=OneWay}" ComparisonCondition="GreaterThanOrEqual" Value="18">

                <Core:ChangePropertyAction TargetObject="{Binding ElementName=r6}" PropertyName="Visibility">

                    <Core:ChangePropertyAction.Value>

                        <Visibility>VisibleVisibility>

                    Core:ChangePropertyAction.Value>

                Core:ChangePropertyAction>

            Core:DataTriggerBehavior>

            <Core:DataTriggerBehavior Binding="{Binding Now.Second, Mode=OneWay}" ComparisonCondition="GreaterThanOrEqual" Value="24">

                <Core:ChangePropertyAction TargetObject="{Binding ElementName=r5}" PropertyName="Visibility">

                    <Core:ChangePropertyAction.Value>

                        <Visibility>VisibleVisibility>

                    Core:ChangePropertyAction.Value>

                Core:ChangePropertyAction>

            Core:DataTriggerBehavior>

            <Core:DataTriggerBehavior Binding="{Binding Now.Second, Mode=OneWay}" ComparisonCondition="GreaterThanOrEqual" Value="30">

                <Core:ChangePropertyAction TargetObject="{Binding ElementName=r4}" PropertyName="Visibility">

                    <Core:ChangePropertyAction.Value>

                        <Visibility>VisibleVisibility>

                    Core:ChangePropertyAction.Value>

                Core:ChangePropertyAction>

            Core:DataTriggerBehavior>

            <Core:DataTriggerBehavior Binding="{Binding Now.Second, Mode=OneWay}" ComparisonCondition="GreaterThanOrEqual" Value="36">

                <Core:ChangePropertyAction TargetObject="{Binding ElementName=r3}" PropertyName="Visibility">

                    <Core:ChangePropertyAction.Value>

                        <Visibility>VisibleVisibility>

                    Core:ChangePropertyAction.Value>

                Core:ChangePropertyAction>

            Core:DataTriggerBehavior>

            <Core:DataTriggerBehavior Binding="{Binding Now.Second, Mode=OneWay}" ComparisonCondition="GreaterThan" Value="42">

                <Core:ChangePropertyAction TargetObject="{Binding ElementName=r2}" PropertyName="Visibility">

                    <Core:ChangePropertyAction.Value>

                        <Visibility>VisibleVisibility>

                    Core:ChangePropertyAction.Value>

                Core:ChangePropertyAction>

            Core:DataTriggerBehavior>

            <Core:DataTriggerBehavior Binding="{Binding Now.Second, Mode=OneWay}" ComparisonCondition="GreaterThan" Value="48">

                <Core:ChangePropertyAction TargetObject="{Binding ElementName=r1}" PropertyName="Visibility">

                    <Core:ChangePropertyAction.Value>

                        <Visibility>VisibleVisibility>

                    Core:ChangePropertyAction.Value>

                Core:ChangePropertyAction>

            Core:DataTriggerBehavior>

        Interactivity:Interaction.Behaviors>  

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition/>

        Grid.ColumnDefinitions>

        <StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" UseLayoutRounding="True">

            <Rectangle x:Name="r1" Fill="#FF007D91" HorizontalAlignment="Center" Stroke="Black" VerticalAlignment="Center" Width="25" Height="25" RenderTransformOrigin="0.5,0.5" Margin="0,5,0,0" Visibility="Collapsed"/>

            <Rectangle x:Name="r2" Fill="Blue" HorizontalAlignment="Center" Stroke="Black" VerticalAlignment="Center" Width="25" Height="25" RenderTransformOrigin="0.5,0.5" Margin="0,5,0,0" Visibility="Collapsed"/>

            <Rectangle x:Name="r3" Fill="#FF6800FF" HorizontalAlignment="Center" Stroke="Black" VerticalAlignment="Center" Width="25" Height="25" RenderTransformOrigin="0.5,0.5" Margin="0,5,0,0" Visibility="Collapsed"/>

            <Rectangle x:Name="r4" Fill="#FFE800FF" HorizontalAlignment="Center" Stroke="Black" VerticalAlignment="Center" Width="25" Height="25" RenderTransformOrigin="0.5,0.5" Margin="0,5,0,0" Visibility="Collapsed"/>

            <Rectangle x:Name="r5" Fill="Red" HorizontalAlignment="Center" Stroke="Black" VerticalAlignment="Center" Width="25" Height="25" RenderTransformOrigin="0.5,0.5" Margin="0,5,0,0" Visibility="Collapsed"/>

            <Rectangle x:Name="r6" Fill="#FFFF4600" HorizontalAlignment="Center" Stroke="Black" VerticalAlignment="Center" Width="25" Height="25" RenderTransformOrigin="0.5,0.5" Margin="0,5,0,0" Visibility="Collapsed"/>

            <Rectangle x:Name="r7" Fill="#FFFF8B00" HorizontalAlignment="Center" Stroke="Black" VerticalAlignment="Center" Width="25" Height="25" RenderTransformOrigin="0.5,0.5" Margin="0,5,0,0" Visibility="Collapsed"/>

            <Rectangle x:Name="r8" Fill="#FFF3FF00" HorizontalAlignment="Center" Stroke="Black" VerticalAlignment="Center" Width="25" Height="25" RenderTransformOrigin="0.5,0.5" Margin="0,5,0,0" Visibility="Collapsed"/>

            <Rectangle x:Name="r9" Fill="White" HorizontalAlignment="Center" Stroke="Black" VerticalAlignment="Center" Width="25" Height="25" RenderTransformOrigin="0.5,0.5" Margin="0,5,0,0" Visibility="Collapsed"/>

        StackPanel>

        <TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding Now.Second, Mode=OneWay}" FontSize="96" FontFamily="Consolas"/>

    Grid>

Page>

In this XAML we have 9 small rects stacked and each rectangle is connected with a DataTriggerBehavior that checks the "Second" value of the DateTime in "Now". Each trigger is set to launch a ChangePropertyAction at different values (0, 6, 12, 18, 24, etc...) with a condition od "GreateThanOrEquals". The property to change is "Visibility". When you run the example you have the Second property continuously increasing and the triggers are set at increasing values. This makes the rects appear one every 6 seconds in a sequence. The strange thing is that once the trigger is set, it is not reset when the value fall back to less then the threshold. This is because the DataTriggerBehavior changes always the property from Collapsed to Visible. It does not have any knowledge of the inverse operation. To make the opposite operation you have to attach another series of triggers with the LessThan clause switching a ChangePropertyAction that set again the Collapsed value.

About Other Actions

With this example I've only scratched the surface. Side by side with ChangePropertyAction there are a number of other actions ready out of the box. Here is a brief list:

CallMethodAction: the action will call a method on a target object. If used with EventTriggerBehavior it is like attaching an event handler in code.
ControlStoryBoardAction: it is able to control a storyboard, invoking Play, Stop and other actions.
GoToStateAction: It is useful to change a state of the VisualStateManager.
InvokeCommandAction: This action is useful for MVVM programming since it is capable of invoking a command on the ViewModel. USed with the EventTriggerBehavior lets you attach commands to each event of every control.
NavigateToPage: This is useful to trigger navigation to another page in your project
PlaySoundAction: Intuitively this is for plating a sound when a condition is hit.

A combination of one or more types from this list can generate complex logic, without impacting the codebehind or the viewmodel. This often becomes too much complex, requiring long design sessions, but be aware that you can also write your own behaviors and triggers to include logic that are not available with predefined actions or to reduce the complexity. I'll be back on the building of custom behavior and action in the next article.

Windows Store apps with XAML and HTML: Organize your UI layer in HTML

editorial@silverlightshow.net (Andrea Boschin ) — Tue, 24 Sep 2013 11:18:00 GMT

Download the source code for this article

Don't miss

All SilverlightShow Ebooks

In my last article I showed a simple example about the organization of the UI layer using Model View ViewModel in XAML. There is not any doubt that this pattern is a great help to make the application more maintainable, thanks to the effective separation between logic and views. MVVM is born with XAML, but after you embraced its power, it is hard to give up and return to the previous ways to develop applications. So my question is: "is it possible to apply the same pattern outside of XAML, also in an HTML5 app?" The first and evident obstacle to this achievement is the complete lack of databinding in Javascript and additionally the lack of some tools, like observables types, that directly feed the pattern.

Meet Knockout JS

Luckily someone has my same feel and he created a javascript framework that enables MVVM in web pages, to support that so called Single Page Applications (something you have to try if you are a web developer). Knockout JS is a very impressive and powerful toolset that adds the missing tools to Javascript. It is based on the concept of observables object and on a set of bindings that may be added to a plain html page to simulate the databinding you are use to see in XAML. As I said Knockout JS (http://knockoutjs.com/) is for html pages but it is enough smart and flexible to be used inside a Windows Store app, without great troubles.

At the very basis of the library there are observables. These are objects that are able to encapsulate a plain variable and make it able to notify its status changes. After you included Knockout JS in a page, you can make a variable (or an array) observable using something like this:

   1: // simple types

   2: this.name = ko.observable("Andrea")

3:

   4: // arrays

   5: this.names = ko.observableArray(["Andrea", "Gaia", "Daniela"]);

After you exposed a property like these in a Javascript class (the viewmodel), you can connect it to the view using a simple "data-bind" attribute. It appears like this:

   1: <span data-bind="text: name" />

Then, the last thing is to connect the View with ViewModel. Usually this happens in the document's ready event. This starts Knockout binding and make the magic happen. Usually people that uses jQuery write something like this:

   1: $(function(ev)

   2: {

   3:     ko.applyBindings(new MyViewModel());

   4: });

So now you can update your property and have it updated into the view automatically. The trick is to call a method with the same name of the property instead of assigning the value to the property itself:

   1: // for simple properties

   2: this.name("Gaia");

3:

   4: // for arrays (add an element)

   5: this.names.push("Vanessa");

Observable arrays can be manipulated with a set of methods that is similar to the ones you are use to see in a plain javascript array.

Apply Knockout JS to Windows Store apps

What you seen in the previous section, also applies to a Windows Store app in HTML. Knockout JS works like a breeze and you only have to take care of where to activate the bindings. Usually the best place is the ready event into the page's codebehind.

But we should make a step behind: let say we want to replicate the example of the previous article. You firstly create the NamePage.html and this automatically creates the NamePage.js. Then you reference this page in the default.html as usual and then you need to add references to Knockout JS. The default.html page is the best place to put the script tags because it is the container for each other page:

   1: DOCTYPE html>

   2: <html>

   3: <head>

   4:     <meta charset="utf-8" />

   5:     <title>Elite.HTML5vsXAML.Htmltitle>

6:

7:

   8:     <link href="http://Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />

   9:     <script src="http://Microsoft.WinJS.1.0/js/base.js">script>
   2:     

   1: 

   2:  

   3:     

   4:     

   1:     

   2:  

   3:     

   4:     "/css/default.css" rel="stylesheet" />

   5:     

   2: