XAML and GIS

I’ve been playing around a lot with my wife’s new iPhone a lot lately. One feature I love on some of the apps is when you reach the top of a page a header image will stretch out to indicate you are at the top of the page. This is a fun feature that’s super easy to add using a behavior.

The behavior will focus on scaling the image up by a factor but only when the ScrollerViewer is being “stretched”.

In my last post I explained how to create a behavior that would provide a parallax effect on any control. I was playing with the behavior the other day and I wanted to reverse the scrolling of a header image from going down to going up. I switched the ParallaxMultiplier property from a negative number to a positive number and noticed that the image started to scroll off the screen.

This is not at all what I wanted. I want to see the image in the space provided, but scroll, or parallax, the image as I scroll the content. I want the image to scroll upwards so I can still see the top/center of the image as I scroll the page down.

To fix this I need to adjust the expression. Currently the expression is "ScrollManipulation.Translation.Y * ParallaxMultiplier". We need to move the image down as the scroller moves. To do this we can subtract the Y Translation of the scroller. But we only want to do this for a multiplier greater than zero.

In October James Clarke tweeted some source code to add a parallax effect to UWP apps using the new Windows Composition framework.

At the time the new SDK was not available so you could not get it working. Now that the new SDK is released we can start building apps using Windows Composition. The sample that James posted is nice and short, but it’s still code that you would need to repeat over and over. As I’ve mentioned before, I’m not a fan of repeating code. I am however a fan of custom controls and behaviors. This effect can easily be made into a behavior.

In James’ sample he is parallaxing an image, but there is no reason it has to be an image. It could be any visual element. This allows you to use graphics or whatever you want as a background.

I am continually creating classes from JSON. In the past I have used json2csharp.com to accomplish this task. It is a very simply website with one large textbox. Paste your text or a link to text and click the generate button and suddenly you have C# classes!

Visual Studio 2015 removes the need for this website. The Visual Studio team has added a new way to paste JSON or XML text and have classes created. This new feature even works better than json2charp.com did. To use the new feature follow the below steps

Open a file. If you want to paste JSON the file must be a class file (have the .cs extension).

Copy some JSON

Select Edit –> Paste Special –> Paste JSON As Classes

It will generate as many classes as are needed. I’ll give a few examples to see the benefits of this new feature and how it could be improved.

Simple base types

{

"firstName" : "John",

"lastName" : "Doe",

"age" : 13,

"dateOfBirth" : "2002-10-05T14:13:25-06:00"

}

And the generated class

publicclass Rootobject

{

publicstring firstName { get; set; }

publicstring lastName { get; set; }

publicint age { get; set; }

public DateTime dateOfBirth { get; set; }

}

You’ll notice that the properties are in lower camel case to match the property names of the JSON. Notice that the age property is correctly of type int and that the dateOfBirth property is of type DateTime. json2csharp.com would turn this property into a string. However, the dateOfBirth property in JSON format included an offset from UTC so the property should have been of type DateTimeOffset to ensure that it is properly de-serialized.

Multiple classes

What if you have multiple classes that need to be de-serialized? Each class will be generated.

{

"id" : 12345,

"friend" : {

"name" : "Mickey"

}

}

publicclass Rootobject

{

publicint id { get; set; }

public Friend friend { get; set; }

}

publicclass Friend

{

publicstring name { get; set; }

}

Collections

Collections of items are handled as well, but not in a very great way. If you change the friend property to be a collection of friends, we get the following

publicclass Rootobject

{

publicint id { get; set; }

public Friend[] friends { get; set; }

}

publicclass Friend

{

publicstring name { get; set; }

}

Notice that it made a Friend array rather than using the preferred (in my opinion) IEnumerable<Friend>. This is primarily because some JSON converters need a concrete class to de-serialize to. Serializers like JSON.Net allow you to specify an interface and it will default to using a concrete class. So if you specify IEnumerable<T> JSON.Net will create a new List<T>.

Error handling

If the JSON you are pasting contains errors, Visual Studio will tell you the line and position of the error! Maybe you wrote the JSON incorrectly or copied only part of it. The following example is missing a comma.:

{

"id" : 12345

"name" : "Shawn"

}

The following error message is shown:

Room for improvement

One of the biggest problems with json2csharp.com is it’s ability to “reuse” a class. This problem is present within the new Visual Studio feature as well. Take the following example of providing paging links in a result.

{

"items" : [

{

"id" : 11,

"id" : 12

}

],

"previous":{

"href": "http://paging.com/1"

},

"next":{

"href": "http://paging.com/3"

}

}

The resulting class generation is to create a class for “previous” and for “next”.

publicclass Rootobject

{

public Item[] items { get; set; }

public Previous previous { get; set; }

public Next next { get; set; }

}

publicclass Previous

{

publicstring href { get; set; }

}

publicclass Next

{

publicstring href { get; set; }

}

publicclass Item

{

publicint id { get; set; }

}

It would be great if it would “reuse” the first class it created rather than creating a new one. Deleting the extra classes can become quote a pain when you have some json that returns say 10 or more links to other information as well. Side note: If anyone knows if I can help contribute to this tool please let me know!

Another area for improvement is to say you want to default to using a particular JSON serializer so that it could capitalize property names. For example, if I could specify that I wanted to use JSON.Net then it would capitalize the classes and add the JsonPropertyAttribute for proper serializing and de-serializing.

I saw a question today about changing the foreground color of the “visible” or “selected” HubSection. Someone had pointed out that I have a behavior for getting the selected index of a Hub and it could be combined with a converter to give the desired output. I thought the solution to this problem was actually quiet simpler. If we can change the visual state of the hub sections when they change, we can give them a “selected” or “unselected” state. For this we can listen to the SectionsIsViewChanged event

Notice the VisualStateGroup with the “Selected” and “Unselected” states. You’ll want to add this style to your page, or app resources. Using this new way of styling does require the use of the new CustomHub control over the standard Hub control.

If you are concerned about security within your apps, you will want to disable the ability to taker screenshots of your app. This was a feature introduced in Windows Phone 8 as well as Windows Store 8.1 apps. With universal apps, you can now disable screenshots with the same one line of code

Windows 10 launched today and with it comes a new SDK for building “Universal Apps”. This new SDK comes with a lot of new functionality. One of those pieces is a new way to set the wallpaper of a device. This new API is available on the new UserProfilePersonalizationSettings class. This class is used for setting the lockscreen, and the device wallpaper. The new UserProfilePersonalizationSettings class has a TrySetWallpaperImageAsync method that accepts any local StorageFile (I have not been able to set the wallpaper using the FileOpenPicker). This means you can save an image to the local or roaming folders, or use an existing image packaged with your app.

Windows 10 launched today and with it comes a new SDK for building “Universal Apps”. This new SDK comes with a lot of new functionality. One of those pieces is a new way to set the lockscreen of a device. This new API is available on the new UserProfilePersonalizationSettings class. Previously you only had the ability to set the lockscreen within phone apps using the SetImageUri method on the static LockScreen class. The method accepted a Uri that had to be local to the app.

The new UserProfilePersonalizationSettings class has a TrySetLockScreenImageAsync method that accepts any local StorageFile (I have not been able to set the lockscreen using the FileOpenPicker). This means you can save an image to the local or roaming folders, or use an existing image packaged with your app.

In this simple example I’m storing the _positionKey key in a static field. This is ok for a simple case, but you may want to store this somewhere else.

Precautions:

I did notice that if you are animating the items of your ListView and using the ListViewPersistenceHelper, that there are some unintended side effects. The first few items of your ListView will still show the animation when navigating backward while the other items remain still. You can see this in the image below.

A simple work around for this is to reset the ItemContainerTransitions of the ListView in the OnNavigatedTo method if the _positionKey is not null.

The Microsoft Band team released “Web Tiles” today. Web Tiles are a simple way to show tiles on your Microsoft Band without needing to write an app. The tiles update from a web url. As far as I can tell, the web url must return json data. This data can be whatever but it needs to be open to everyone meaning no authentication. All of the articles today talk about the structure of a web tile and what each piece means. All this information is great, but if you only need a simple tile you can do without it.

Along with the release of Web Tiles, Microsoft also released a Web Tiles Authoring website. This website walks you through creating a new tile step by step. Let’s take a look at how this works

Step 1: Choose a layout

Here you pick which of the six layouts you’d like to use for the tile. You can choose from displaying a single page tile or multiple page tile. Multiple page tiles must link to an RSS or ATOM feed. This is not a requirement of web tiles; it is only a requirement for the authoring tool. Web tiles can have multiple pages without needing an ATOM or RSS feed.

Step 2: Assign the url

Here you enter the url that will contain the data for your tile. If you picked a multiple page layout from Step 1, you must enter a URL for RSS or an ATOM feed. Again, this is not a requirement for web tiles, only for the authoring tool.

Step 3: Selecting information to display

Here you select what information from your json feed you would like to display. You simply drag the data from the right and drop it onto the place you’d like to display it.

Here we see that I selected to display the weather with the state being the header, the second line being the temp and the third line being some description.

Step 4: Make it yours

Here you’ll set the information to make the tile yours.

Step 5: Download!

Download this awesome web tile to send to your favorite people

Hopefully the tool will be improved to allow for multiple pages when your resource is not an ATOM or RSS feed.