| Comments

I’m just coming back from Build 2014 and it was a great pleasure to talk to customers/developers.  It is one of the best parts of my job right now in seeing how customers use the technology our team represents.  If you are a XAML developer and didn’t have a chance to go to Build or haven’t watched all the sessions, here’s a quick short list of recommendations I’d have:

There are many more (app model, localization, accessibility, tiles, notifications, etc.) so please do look at the event site and download/watch your favorites.  I think the list above gives you a good intro to the UI area changes and introduction to the concepts of Universal Windows apps.  If you haven’t heard of that concept yet, you can jump to the Keynote from Day 1 for the quick demo.

Add Reference

The last session above is one that I want to write about today in this post.  In current form, a Universal Windows app in Visual Studio Update 2 allows you to maximize your sharing of code/assets across your Windows Store and Windows Phone app.  If you are like most developers, you rely on a great ecosystem of libraries and SDKs to augment your app and add functionality, UI or make things easier to develop.  In our keynote sample, the app we migrated (SportsLeague app) used JSON.NET and we showed that we are able to re-use the same library (which in this case happened to be a Portable Class Library, aka PCL) across the different endpoints.

One thing that is important is that you will need to add these references to each of your project ‘heads’ (the term we use to describe each endpoint in a shared project solution).  For some that are using direct binary DLL references to PCL libraries should be okay.  For others that are using Extension SDKs and/or NuGet packages, you may find yourself into some scenarios where either the SDK is different or the NuGet package isn’t updated yet to understand the Windows Phone 8.1 project type.  There are a number of these that are already updated like JSON.NET, Caliburn.Micro, etc.  If you find yourself using a library that isn’t updated yet, you may want/need to prod the author to update.  Better yet, if it is Open Source, submit a pull request with the update yourself!

SQLite or other native Extension SDKs

The other category are things that might be platform-specific and/or native.  These things are generally more complex than something that might work in a PCL and have dependencies on various native compiler/linker options or have been compiled in such a way that are different for the Phone device versus a tablet device.  One such example is SQLite.

SQLite is an in-process library that implements a self-contained, serverless, zero-configuration, transactional SQL database engine. The code for SQLite is in the public domain and is thus free for use for any purpose, commercial or private. SQLite is currently found in more applications than we can count, including several high-profile projects.

SQLite links against the C++ Runtime and as such needs to make sure the right linking happens for the phone and tablet CRT profiles.  Right now, the SQLite for Windows Phone Runtime 8.1 is in some testing, but since a lot of people have been asking me about it, I’ll share my private build from source of the SDK.  This comes with a “works on my machine” guarantee :-).  This is a build of SQLite from their source, which is Open Source, and modified to compile/link against the Windows Phone 8.1 SDK.  When the official version comes out you should update to that version from their site.  For now, you can download my build of  UPDATE (12-MAY-2014): SQLite team put out their official build for Windows Phone 8.1: SQLite for Windows Phone 8.1 here.

Updating your Extension SDKs and NuGet packages

If you are an author of one of these SDKs that people use, please consider doing an update to make your customers happy.  If you are an Extension SDK provider you will want to produces an Extension SDK for Windows Phone 8.1.  If you already have a WinRT SDK, then you may just be able to copy the manifest, etc. and just produce changes to your manifest so it installs to the right location.  Here is an example:

<Installation AllUsers="true" Scope="Global">
  <InstallationTarget Id="Microsoft.ExtensionSDK" 
    TargetPlatformIdentifier="WindowsPhoneApp" 
    TargetPlatformVersion="v8.1" 
    SdkName="SQLite.WinRTPhone81" SdkVersion="3.8.4.1" />
</Installation>

As you can see in lines 3,4 above the TPI/V values are different than your existing SDK which tell the SDK where to install.

If you are an author of a NuGet package, you also will want to make your package Windows Phone 8.1 aware.  Again, if you have an existing package that works with Windows 8.1, then you may just be able to duplicate the content/lib/tools to a folder labeled ‘wpa81’ and test that out.  Example NuSpec:

<?xml version="1.0" encoding="utf-8"?>
<package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
    <metadata>
        <id>Callisto</id>
        <version>1.5.0</version>
        <title>Callisto</title>
        <authors>Tim Heuer</authors>
        <owners>Tim Heuer</owners>
    </metadata>
    <files>
        <file src="lib\portable-win81+wpa81" target="lib\portable-win81+wpa81" />
    </files>
</package>

If you see at line 11 the ‘portable-win81+wpa81’ it allows me to combine the two targets telling NuGet this applies to either.  Of course if I had any nuanced differences I could also just use ‘wpa81’ and put the phone-specific lib (or assets) there.

In both cases if you have any UI aspects, most likely you may want to do some work here to make sure that any UI assets are tailored to the device targets for a great experience.

I hope this helps clarify some of the reference questions that I’ve received and I hope that if you are an SDK author you will work quickly to help your customers realize their goals of a universal Windows app!

Hope this helps!

| Comments

Well, the official Windows Phone Developer Tools are out!  Go get them. (warning likely some caching issues..direct installer here.)

The awesome Silverlight toolkit team is at it again, this time for Windows Phone 7.  The team is releasing a series of controls/libraries to help WP7 developers fill some gaps and simply make things easier and more consistent.  The initial set includes the following:

These controls are available for download including the source code.  Here’s a quick synopsis of them for you to enjoy.  Note that the “toolkit” prefix on the controls is declared in the app as:

   1: xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 
   2: xmlns:toolkitPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit"

after adding a reference to the Microsoft.Phone.Controls.Toolkit assembly.

ContextMenu

In WP7 there is a notion of a context menu, where when the user holds down an item (tap and hold) it pops up a menu in-line with some options.  This is used in areas like the application list, where if you tap and hold an application you get the option to pin it to the start menu, uninstall, etc.  For the toolkit control this is implemented as a ContextMenu service.  For example, if I wanted to enable a context menu on my canvas I would use this markup:

   1: <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Width="345" Height="91" Margin="0,50,0,0">
   2:     <toolkit:ContextMenuService.ContextMenu>
   3:         <toolkit:ContextMenu>
   4:             <toolkit:MenuItem Header="pin to start menu" Click="OnMenuClicked" Tag="START_MENU" />
   5:             <toolkit:MenuItem Header="delete" Click="OnMenuClicked" Tag="DELETE" />
   6:             <toolkit:MenuItem Header="share" Click="OnMenuClicked" Tag="SHARE" />
   7:         </toolkit:ContextMenu>
   8:     </toolkit:ContextMenuService.ContextMenu>
   9:     <Rectangle Fill="#FFF4F4F5" Height="91" Stroke="Black" Width="345"/>
  10:     <TextBlock TextWrapping="Wrap" Text="Tap and Hold (zoom)" Foreground="Black" Canvas.Left="71" Canvas.Top="27"/>
  11: </Canvas>

And the result would look like:

ContextMenu control

There is an option to disable ‘zoom’ of the context menu, which follows the UI consistency of the device itself and is the default.  Additionally you could implement the actual command using ICommand on the particular item.

DatePicker and TimePicker

These are two controls I’ve seen attempted to create to mimic the actual device controls in the WP7 OS itself.  Some implementations have been better than others.  Here the UI is matched with the semantics of the device.  When using the control, it will automatically provide you with a TextBox input and when the user selects it, the picker will display.  The markup is very simple:

   1: <toolkit:DatePicker />

to produce the user experience when the user clicks on the input area:

WP7 Toolkit pickers

While shown above is the DatePicker, the TimePicker operates in similar fashion.

For the pickers you may notice that in my screenshot above I have the checkmark and the “x” icons in the ApplicationBar.  If you didn’t read the code comments in the toolkit you likely have “x” icon placeholders and are wondering why.  The toolkit provides the necessary icons for these, but you have to bring them into your application.  Once installed, look for them in the SDK folder and then add them using this well-known path:

WP7 toolkit icon layout

Once you have the PNG files there, be sure to mark them as Content so they are included correctly and then you should be good!

ToggleSwitch

If you notice areas in WP7 that have simple on/off settings you may want to provide a consistent look in your application.  The ToggleSwitch control does just that, providing not only the actual ToggleButton, but also the area for label/etc.  This area could be templated as well so if you needed more than just a single text heading listing.  The code:

   1: <toolkit:ToggleSwitch Header="my setting name" Height="118" Margin="0,0,-24,-34" Width="480"/>

and the resulting UI:

ToggleSwitch control

GestureHelper

Wish you had a library that made it easier to know when a ‘flick’ or ‘pinch’ gesture happened?  Enter GestureHelper.  Using this on elements like this:

   1: <Image x:Name="GesturedImage" Source="dividbyzero.jpg" HorizontalAlignment="Center" VerticalAlignment="Center" Width="450" 
   2:     RenderTransformOrigin="0.5,0.5">
   3:     <Image.RenderTransform>
   4:         <ScaleTransform x:Name="ImageScaling" ScaleX="1" ScaleY="1" />
   5:     </Image.RenderTransform>
   6:     <toolkit:GestureService.GestureListener>
   7:         <toolkit:GestureListener PinchDelta="OnPinchDelta" />
   8:     </toolkit:GestureService.GestureListener>
   9: </Image>

enables you to respond to these events when they happen and react accordingly:

   1: private void OnPinchDelta(object sender, PinchGestureEventArgs e)
   2: {
   3:     ImageScaling.ScaleX = e.DistanceRatio;
   4:     ImageScaling.ScaleY = e.DistanceRatio;
   5: }

Very helpful library!!  NOTE: the above sample is actually not goot ‘pinch’ scaling for an image, but merely here to demonstrate a quick point.

WrapPanel

The WrapPanel has been specifically ported for WP7.  Using the similar syntax:

   1: <toolkit:WrapPanel Orientation="Horizontal">
   2:     <Rectangle Fill="Blue" Width="100" Height="100" Stroke="Black" />
   3:     <Rectangle Fill="Red" Width="100" Height="100" Stroke="Black" />
   4:     <Rectangle Fill="Green" Width="100" Height="100" Stroke="Black" />
   5:     <Rectangle Fill="Gray" Width="100" Height="100" Stroke="Black" />
   6:     <Rectangle Fill="Yellow" Width="100" Height="100" Stroke="Black" />
   7:     <Rectangle Fill="Orange" Width="100" Height="100" Stroke="Black" />
   8:     <Rectangle Fill="Teal" Width="100" Height="100" Stroke="Black" />
   9:     <Rectangle Fill="White" Width="100" Height="100" Stroke="Black" />
  10:     <Rectangle Fill="Pink" Width="100" Height="100" Stroke="Black" />
  11:     <Rectangle Fill="Magenta" Width="100" Height="100" Stroke="Black" />
  12: </toolkit:WrapPanel>

would produce the elements within the WrapPanel to be placed accordingly for you:

WP7 Toolkit WrapPanel

This will be helpful especially in areas of displaying items in storage locations (i.e., pictures, album art) I think.

Summary

These controls are being made available for you to freely consume in your applications.  Go to the Silverlight Toolkit site right now and download the Silverlight for Windows Phone Toolkit and begin incorporating them into your applications today.  Be sure to leave feedback on the Codeplex site with any issues you may find with your scenarios.

Be sure to visit the Silverlight Toolkit site for the bits and also ensure you subscribe to Jeff Wilcox and David Anson’s blogs for what likely will follow more detailed and useful information about the toolkit items!

Hope this helps!

| Comments

One of the biggest discussions I started getting into when Windows Phone development was announced to the world was sparked with this single question I posed to our internal Windows Phone developer teams:

What is the use case for when you would want to use a Pano versus Pivot application layout?

I asked this in the context of an application for Yelp that I was writing.  Information was similar but not identical.  It was only similar in the sense that the data was all about user reviews and venues.  In my eyes I saw this like the fact that games are similar in that they are games, but their individual information (the play) is different.

I guess I was expecting a definitive or clear view on when to use either given my use case I presented.  I laughed as I collected numerous various viewpoints from all areas of the dev platform folks.  It was clear there was no clarity for me.  I actually have saved the most concise definition the discussion generated and had been wanting to blog about it for a while.

Today, Jaime released a bunch of videos from a ‘design days’ event that was held in Redmond for Windows Phone developers.  They are all great, but there was one that caught my eye: Windows Phone Design Days – Pivot and Pano.  In this video a few UX researchers walk through some of the key tenets of each control.  Here’s some of my mental notes:

Pivot

  • Application view manager
  • Filter same data on different views (the “inbox” is a great example of this)
  • Optimized for current screen size
  • Filter of data doesn’t have to be same view (agenda/day)
  • Related content is ok to pivot on as long as related content is truly related
  • Focused

Panorama

  • Horizontal broad canvas, not confined to current screen size
  • A ‘top layer’ view into underlying experiences/tasks
  • Exploratory in nature
  • Don’t use if you need an application bar
  • Don’t have a pano that takes the user to a pivot control constantly
  • Leverage things inherently interesting (use ‘about me’ type information)
  • Never place a pano *in* a pivot

There was some good information in this video (like don’t use pivot/pano for wizard-based UI) and one of the better descriptions/examples of answering my root question.  The other videos are great and I encourage you to take a look at them.

I’d encourage you to take a look at all of these videos to get a good sense on some of the user experience research done for Windows Phone developers and how you can learn to target a great experience in your app/game.

| Comments

I recently got an inquiry to my Microsoft Translator sample on if this would work with the Silverlight in the Windows Phone 7 SDK.  I hadn’t tried it before, so I created a sample Windows Phone 7 application and copied the code over.  I used a basic UI to mock up the similarities:

Translator phone sample screenshot

And then clicked the button.  The text translated fine, but no audio.  I didn’t get any warnings that the WaveMSS code sample I was using wouldn’t work.  Then I remembered about XNA.

NOTE: I actually think this is a bug in PCM audio and MediaStreamSource and have been having a dialog with the team about it.

In Windows Phone 7 your Silverlight applications can use some XNA Game Framework APIs.  A big component of games is audio!  Enter SoundEffect.  I added a reference to Microsoft.Xna.Frameowkr and changed my OnSpeakCompleted from:

   1: void OnSpeakCompleted(object sender, TimHeuer.Silverlight.SpeakCompletedEventArgs e)
   2: {
   3:     WaveMSS.WaveMediaStreamSource mss = new WaveMSS.WaveMediaStreamSource(e.AudioTranslation);
   4:     PlayMe.SetSource(mss);
   5: }

to:

   1: void OnSpeakCompleted(object sender, TimHeuer.Silverlight.SpeakCompletedEventArgs e)
   2: {
   3:     SoundEffect se = SoundEffect.FromStream(e.AudioTranslation);
   4:     se.Play();
   5: }

Notice it is still 2 lines of code :-).  I don’t need a MediaElement for the audio palyback because I can use the same libraries that XNA uses for audio (and in some instances this will be better for you for looping audio, etc.).

Very cool that Silverlight and XNA can share some libraries in a single application!

| Comments

So the news is out! 

Silverlight IS the platform for Windows Phone 7 Series development!

Sweet.  We also made available an update to Silverlight 4 that you might be interested in too!

Windows Phone 7 SeriesYou may be wondering how you get started.  If you are new to Silverlight, I recommend getting familiar with Silverlight first.  You can find all the tools you will need at the Silverlight community site.  In addition to the core tools you’ll want to get the Windows Phone Developer Tools CTP.  This will add to your Visual Studio 2010 installation (or install Visual Studio Express) to enable Windows Phone and XNA Game Studio development.  Be sure to read the documentation on the release notes to understand any limitations.  A link to the tools, documentation, developer/UX guides and more can be found on the Silverlight for Windows Phone page.  The key elements you’d want to get  are:

I’ve also taken some quick time to get some quick videos up for some tips and familiarity with the tools and some initial areas you’ll want to take a look at.  Here are some starting videos for you:

The getting started video has some quick tips and tricks about the emulator and using the keyboard input control (referred to as the ‘SIP’).  I suggest taking a look at these for some primer.  If you have questions afterwards, check out the dedicated forum for Silverlight for Windows Phone.

I’m looking forward to seeing what you’ll develop using Silverlight for Windows Phone!  Be sure also to watch for @ckindel and @wp7dev on Twitter for information about Windows Phone 7 Series development.



This work is licensed under a Creative Commons Attribution By license.