MVP goodies :)

It was April 1st, but the mail was real – I was re-awarded the MVP status for Visual C#. It was about time I replace the stickers on my devices anyway :) I hope that this year will be filled with more C# development now that Roslyn is officially available.

Speaking of Roslyn, the real shocker was the announcement at last week’s Build conference about Roslyn being open source. Wow, this will have a great impact on open source community in .NET world. If only .NET Native is open source (asking for open source .NET itself is a long shot), that would open the flood gates towards other platforms in no time. Even though everyone claimed .NET is dying or being abandoned just a year ago, at Build we had a chance to see the beautiful future for .NET.

Pictured: beautiful .NET future

Pictured: beautiful .NET future

This week I had two sessions at WinDays and NTK about the future of C# and awesome things you can do with Roslyn. Next week I am talking about app to app communication between Windows Phone and Windows Store applications at MS Network. I have to mention that all three conferences are held in beautiful locations in this region: Umag, Bled and Banja Vrućica.

Happy coding :)

This is definitely the coolest thing I found today: running XNA in Visual Studio 2013. Thanks to the unofficial contribution, it is possible to use XNA 4.0 in Visual Studio 2013, 2012 and 2010. Find the appropriate download links at codeplex.

This brings XNA development back in the latest version of Visual Studio, but sadly, although you can develop Windows Phone 7 XNA games in VS 2013, you cannot deploy them from Visual Studio since it doesn’t support WP 7. But that can be fixed since the final XAP is valid and XapDeploy can be used to deploy built games to emulator.

XNA 4.0 running from Visual Studio 2013

XNA 4.0 running from Visual Studio 2013

So as XNA projects can be loaded in the same solution as MonoGame projects, porting old games will be easier. Since the project promises porting XNA to DirectX 11, we now have two projects with same scope in mind.

The next release of C# is on its way and brings cool new features. One very popular request is the ability to initialize automatic properties, those without an explicit backing field, to some value without resorting to constructor. You could vote on the UserVoice here. Here is the proposed syntax:

public int X { get; set; } = x;

And if you need readonly properties:

public int Y { get; } = y;

Although a small change, this can clear up the code significantly.

TL;DR it cannot be done. But, if you have access to the application’s source code, there is a small workaround.

So, why would we want that in the first place? UI automation is not as uncommon as one would think. Its primary use is for creating UI tests for which you need the ability to simulate clicks.

So, how does one simulate click on UI elements? By using a derived class from System.Windows.Automation.Peers.AutomationPeer.

But there is no such class for ApplicationBarIconButton and there is no way for us to manually invoke click events. Usually we could use reflection for this purpose, but platform security forbids us from accessing private methods and fields so that goes out of the window.

Luckily, we can create our own class that inherits ApplicationBarIconButton and exposes such function. It is pretty short code to write actually:

public class ApplicationBarIconButton : ApplicationBarIconButton
{
    public new event EventHandler Click;

    public void RaiseClick()
    {
        if (Click != null)
            Click(this, EventArgs.Empty);
    }
}

And that’s it, just replace every regular ApplicationBarIconButton with this in XAML and you are done. In your testing framework find buttons, cast them to this type and call RaiseClick.

Note that this won’t actually work if you are using some bindable replacement for the regular binding-unfriendly

ApplicationBar.

I wrote about some advanced techniques for adapting Windows Phone UI for big screens and 1080p resolutions on Nokia’s Developer Wiki: Advanced Techniques for Big UI. The article was written as a part of Nokia Imaging and Big UI Wiki Competition 2013Q4 which ended two days ago. There are great entries in this competition and I recommend reading them if you want to become familiar with Nokia Imaging SDK 1.0 and developing applications for the big screen.

Here is an introduction:

Designing applications for Windows Phone 7.x (from now on WP7) was easy since there was only one supported resolution – 480 x 800 (WVGA). In addition, screen sizes did not vary that much between vendors. This “un-fragmentation” was hailed as a great feature for the young OS since applications would look the same on all devices that ran Windows Phone 7.

Windows Phone 8 introduced two additional resolutions: 768 x 1280 (WXGA) and 720 x 1280 (720p). The first is an up-scaled version of the original resolution and they share the same aspect ratio (15:9). The latter resolution actually has a different aspect ratio (16:9). This meant that applications had some extra space at the bottom for the UI, but in general if layout is done dynamically, UI does not need to be altered significantly to account for the extra space. The devices got a little larger, but this also meant little to the application design process.

However, coming with GDR3 update, Windows Phone 8 got a new resolution – 1080p. Along with the new, and currently the highest available, resolution, devices also grew in size. For the first time Windows Phone 8 is ran on devices with 6 in screen diagonal. Applications can no longer simply scale up to accommodate such large devices, they need to change their layout a bit as well.

This article presents a couple ideas for adapting the application’s UI for the large screen. It also contains some helper classes useful for detecting current resolution and current screen size. There is also a small trick used here to use 720p emulator image as a 1080p device with “faked” screen diagonal of 6. This allows for easy testing of mentioned techniques without having a physical device with either 6 screen diagonal or 1080p resolution.

Read more on wiki page.

I’ve already talked about creating a so-called “empty list box template” for situations when you have no items and an empty screen area might confuse users. You could fake it by adding a little TextBlock control that would be shown when you have an empty ListBox control to tell the user that (s)he would normally have a list of items there.

To do that, I blogged about two different techniques: ListBox empty template – using visual states (part 1) and ListBox empty template – using control templates and behaviors (part 2).

One thing I haven’t talked about before is what should that text look like. In my opinion, unless you are completely reinventing your UI, you should strive for consistency. The best way to do that is mimicking the built-in apps. You already have such style in the stock applications: e.g. if you open Marketplace and search for some non-existing application, you will get the message that there are no such applications as you can see below. If you want to use exactly that style, you can use a predefined style called EmptyListHeaderStyle:

<TextBlock Style="{StaticResource EmptyListHeaderStyle}"
           Text="Some items should appear here..." />
Simple style for the "no results found" text

Simple style for the “no results found” text

If you are still targeting Windows Phone 7, you won’t be able to use that style because it was introduced in Windows Phone 8. But if you still want to use it, copy/paste the following style definitions in your favorite place for styles:

<System:Double x:Key="EmptyListHeaderFontSize">32</System:Double>

<Style x:Key="EmptyListHeaderStyle" TargetType="TextBlock" BasedOn="{StaticResource PhoneTextBlockBase}">
  <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}"/>
  <Setter Property="FontSize" Value="{StaticResource EmptyListHeaderFontSize}"/>
  <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
</Style>

UPDATE: Please not that Windows Phone 7 does not have PhoneTextMidContrastColor, but PhoneSubtleBrush is close enough. It matches the dark theme version exactly, but is slightly different in the light theme.

As you all probably know, Windows Phone GDR3 supports 1080p resolutions and there are now phablets out there running it having impressive 6” screen size. For us developers and designers, there are two important aspects to this story:

  1. We know have devices with really large screen estate which means that we can now display more content than before. Stretching the content is not really the solution here.
  2. 1080p resolution means that assets such as backgrounds and other images, at least if you are not using vectorized images, need to increase in detail

To detect that your app is running on 1080p hardware, you need to check the scale factor (App.Current.Host.Content.ScaleFactor) for the screen which is 1.5 (same as for 720p devices) and not the expected 2.25. Then you can use the new DeviceExtendedProperties property “PhysicalScreenResolution” to check the actual screen size:

private static bool Is1080p
{
	get
	{
		if(_size.Width == 0)
		{
			try
			{
				_size = (Size)DeviceExtendedProperties.GetValue("PhysicalScreenResolution");
			}
			catch (Exception)
			{
				_size.Width = 0;
			}
		}
		return _size.Width == 1080;
	}
}

Once you detect that you are running on 1080p hardware, you can load different images, change global styles and much, much more. I will delve into details in my next post. For more information, check out the following links:

Also, don’t forget that Nokia Create competition is still going on and this month’s Mini Mission requires you to update your app to support big screen. Check it out on the official contest page.

I’ve found this tip recently that isn’t documented at all, and yet is important for every Windows Phone designer and developer. If you have scrollable content on your page, you should put 95px bottom padding at the end of your content. This way the content doesn’t reach all the way to the very bottom of the page.

For example, here is a simple page that is slightly higher than the visible area:

Simple scrollable page with zero padding at the bottom

Simple scrollable page with zero padding at the bottom

If user scrolls to the end of the page, the rubber band effect will come into view and the content will be pulled slightly above the bottom. But once the scroll is released, the content bounces back down to the edge of the screen once again.

Simple scrollable page with zero padding at the bottom scrolled all the way up

Simple scrollable page with zero padding at the bottom scrolled all the way up

While it doesn’t poke your eyes and it generally works OK, having content stretched all the way to the bottom is not ideal. The quick fix for this is adding 95px margin to the bottom to move your content away from the bottom – regardless if it is bottom of the phone chrome or the application bar. The final result is more pleasing to the eye.

Scrollable page scrolled to the bottom with 95px padding

Scrollable page scrolled to the bottom with 95px padding

You can see the same padding in effect if you check the profile and history pages on any of your contact. It is also present on the new appointment page in the Calendar app and in the Internet Explorer’s settings page. Speaking of settings, scroll down to the bottom in the Settings application.

Like every other design tip – the effect is subtle, but it works :)

If you are using Grid based layout in your application, you know how writing row and column definitions can quickly become tedious. And it also occupies a lot of space. Since I needed a less verbose way to quickly define the layout, I quickly thought of writing a custom attached property that will generate those definitions.

On the image below you can see the result: a 2×2 grid containing another 2×2 grind inside one of its cell.

A simple grid based layout

A simple grid based layout

And the shorter code for that? Here it is:

<Grid a:GridEx.RowDefinitions="*,*"
	  a:GridEx.ColumnDefinitions="*,*"
	  Grid.Row="1" Margin="12">

	<Grid a:GridEx.RowCol="*,*|*,*">
		<Rectangle Fill="Red" />
		<Rectangle Fill="Green" Grid.Column="1"/>
		<Rectangle Fill="Blue" Grid.Row="1" />
		<Rectangle Fill="Yellow" Grid.Row="1" Grid.Column="1"/>
	</Grid>

	<TextBlock  Text="Upper left"/>
	<TextBlock Grid.Row="1" Text="Lower left"/>
	<TextBlock Grid.Column="1" Text="Upper right"/>
	<TextBlock Grid.Row="1" Grid.Column="1" Text="Lower right" />
</Grid>

The first two line show the shorter way for writing row and column definitions independently while in the line 5 you can see how to quickly define both row and column definitions in a single line. These two attached properties parse the strings and fill the right definitions.

Full source code can be found at github: tpetrina/wp-helpers. You can also use the above syntax in your projects by adding a NuGet package WindowsPhone.Helpers.

I am very proud to be a part of Windows Phone Week – a global event that takes place in cities all around the world. Its focus is to bring Windows Phone development to the masses and is entirely community organized. Zagreb is one of the hosting cities and tomorrow six speakers will present five sessions in total at a local Microsoft office. The event is being organized thanks to Domagoj Pavlešić (MVP for Client Dev, Nokia Developer Champion) and Andrej Radinger (MVP for Windows Phone).

You can think of it as a sort of mini-conference since it only has one track, and it only lasts for half a day. But that didn’t stop people from registering anyway. The event was “sold out” really quickly and I expected a packed room tomorrow. Events like these prove how strong the community around Windows Phone is and how people perceive it as a platform. It is really exciting and I hope that those who are still unsure about investing their time into the platform will jump in with both feet after tomorrow.

There are some valuable prizes to win which will surely motivate people start developing if they get a hold of such device. Domagoj will also give a free Nokia Premium Developer token for those who started working on their app but need an extra push to go ahead and publish their first app. I also need to thank Nokia for supporting such events, they are truly an awesome company.

Anyway, here are the details for my session. I will talk about game development for Windows Phone 8.

Game development for Windows Phone

Revenue from games on mobile devices takes a huge chunk out of the total revenue. Combined with the fun aspect of building games, this is a huge motivation for building games. If you need help to get started, this session will show you how to develop games for Windows Phone OS. You will hear about XNA, MonoGame, SharpDX and see them in action. There are also some other buzzwords that will be flying around. Enter the world of imagination where the only limit is your own imagination.

If you want to read more about how the entire thing got organized, you can visit the official Windows Phone Developer Blog.