Windows Phone Dev – Character Escape Sequences

Windows8-Phone-Logo

I recently stumbled upon a list of c# character escape sequences here.

Escape sequences are needed because certain characters have special meanings within a literal string (and so cannot be used directly). For example, a single quote would need to be written as follows: \'

So I took a quick look at the list to see which ones would be useful working within a basic data-bound Windows Phone app sample.

The following escape sequences all functioned the same (which was expected):

  • \f – Form feed
  • \n – New line
  • \r – Carriage return

I have been in the habit of using \r\n in my apps for a new paragraph, but any combination of the above works.

The double quote escape sequence \" did not work but this special character sequence works fine instead: "

The escape sequence that I liked the most was \t which is used for a horizontal tab. I wish I had known about this one a while back.

The other interesting one is \u for Unicode characters. With this you can, for example, open up Character Map, select any character and enter the four digit hex code for that character. \u00E6 will display a Latin small letter Ae. Very useful!

Windows Phone 8 Dev – Adding the Tilt Animation

Windows8-Phone-Logo

On Windows Phone the Tilt animation is the subtle effect that is employed when you tap on an item and expect an action. It provides visual feedback that something is about to happen. You will see this effect every time you tap a tile on your on your Windows phone.

This effect requires the Windows Phone Toolkit to be installed so let’s take care of that first.

In Visual Studio click the Tools menu, Nuget Package Manager and then Package Manager Console. At the Package Manager prompt type the following:

install-package wptoolkit

Next add the toolkit namespace prefix to the page you are working on:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

To enable the Tilt effect on the page simply add this within the phone:PhoneApplicationPage tags:

toolkit:TiltEffect.IsTiltEnabled="True"

This will enable the Tilt effect for the entire page.

It should not have any performance hit on your application and it is a nice bit of polish to add to your app.

Source: http://channel9.msdn.com/Shows/Inside+Windows+Phone/IWP-58–Put-the-Standard-Animations-in-your-App

Windows 8.x Phone Dev – Windows Phone Toolkit Toggleswitch Control

Windows8-Phone-Logo

I’m just starting work on a little Silverlight app for Windows Phone 8.x and want to use the ToggleSwitch control on the settings page.

The ToggleSwitch is one of many useful controls that are part of the Windows Phone Toolkit – so the first step is to install the toolkit.

In Visual Studio click the Tools menu, Nuget Package Manager and then Package Manager Console. At the Package Manager prompt type the following:

install-package wptoolkit

Next add the toolkit namespace prefix to the page you are working on:

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Adding toolkit controls in XAML is straightforward:

<toolkit:control-name>

IntelliSense will give a full list of the toolkit controls for you.

<toolkit:ToggleSwitch x:Name="toastToggle"
                      Header="Enable Toast Notifications"
                      Grid.Row="1"
                      Margin="9,0,0,0"
                      Checked="toastToggle_Checked"
                      Unchecked="toastToggle_Unchecked">
</toolkit:ToggleSwitch>

Above is the basic code that I used for my ToggleSwitch:

ToggleSwitch

I haven’t finalized the behavior in the code behind for the ToggleSwitch but there are two events to show “On” and “Off” when the control is checked or unchecked:

private void toastToggle_Checked(object sender, RoutedEventArgs e)
        {
            toastToggle.Content = "On";
        }

private void toastToggle_Unchecked(object sender, RoutedEventArgs e)
        {
            toastToggle.Content = "Off";
        }

There are plenty of other controls worth looking at – I already have my eyes on the DatePicker and the TimePicker for this app!

Happy coding!

Windows Phone 8.1 – ‘Resuming’ on Lock Screen

Windows8-Phone-Logo

My Windows Phone 8.1 has been ‘Resuming’ on the lock screen for a little while now, quite uncharacteristically.

I had recently un-installed Live Lock Screen Beta but it hadn’t occurred to me to check my lock screen settings.

Once I set my Background back to Bing (which is what it was set to before I installed Live Lock Screen Beta) everything was fine.

Phew!

Sources:

http://answers.microsoft.com/en-us/winphone/forum/wp8-wpupdate/resuming-on-screen-lock-after-windows-phone-81/21d8644d-edbd-41c8-bd79-76659b46ce91

Windows Phone 8 – Tog Wash App

Windows8-Phone-Logo

My first stab at a Windows Phone app was a basic panorama with instructions on how to care for Theratogs.

TheraTogs are orthotic garment systems designed to provide gentle, prolonged muscle stretch and alignment guidance that replicates the manual positioning and supervised therapy that the rehab clinician offers in a typical session.

I spent some time this weekend re-doing this app for the Windows Phone Store (available here).

I used the tabbed interface with pivot animation provided by Depechie.

For graphics I used Modern IU Icons and SyncFusion Metro Studio 3.

The navigation icons are defined in XAML which is really cool – this is something that I really want to learn more about.

This was a fun project to update and put in the Store – I hope that it will be of use to some other people too!

Complete instructions for TheraTog care can be found here.

Windows Phone 8 Dev – Localizing the App Name and App Tile Name

Windows8-Phone-Logo

In my previous two post I localized text and the App Bar for a simple Windows Phone 8 app. In this post I’ll take a look at localizing the App Name.

Note: I am using Visual Studio 2013 Community Edition.

Creating a language resource DLL project

  • In Visual Studio click File and New Project
  • In the left pane, expand Installed,¬† Templates, and Visual C++, and then click Win32
  • In the Name box, type AppResLib and then click OK
  • In the Win 32 Application Wizard click Next
  • Under Application type, select DLL
  • Under Additional options, select Empty project and clear the Security Development Lifecycle (SDL) checks check box

Win32 Application Wizard - AppRes

  • Click Finish
  • On the Build menu, select Build Solution

We will use this project to create language neutral and language specific files for our app name and app tile name.

In this example I want my app “Theme Colors” to support US English and Spanish – so I will create a US English, Spanish and Language Neutral file. The Language Neutral settings will be used for all other non-localized languages that are supported in the Windows Phone marketplace.

Creating a language-neutral project file

  • In Solution Explorer, select the AppResLib project
  • In the Project menu click Add Resource
  • Select String Table and then click New
  • Create two resource strings with the following properties:
ID Value Caption
AppTitlle 100 Lang-Neutral App Title
AppTileTitle 200 Lang-Neutral Tile Title

This is what this looks like in Visual Studio for my app:

String Table

Update the AppResLib so that the project is built as a resource-only DLL.

  • Set the Solution Configuration to Release
  • In Solution Explorer right click the AppResLib project and then click Properties
  • Expand Configuration Properties, Linker, and then click Advanced – set the No Entry Point to Yes (/NOENTRY) and then click OK

No Entry Point

  • On the Build menu, select Build Solution
  • In the Solution Explorer right click the Solution (Solution ‘AppRes.Lib’ (1 Project)) and then click Open Folder in File Explorer in the drop down menu
  • In File Explorer open the Release folder and temporarily rename the AppResLib.dll file to AppResLibLangNeutral.dll

Creating language-specific files

Creating the language specific files is exactly the same procedure as the language-neutral file – except for the naming convention (which we will come to shortly).

Simply change the Caption in the String Table for the language you are supporting. Below you can see my localized strings for English and Spanish:

English-US
ID Value Caption
AppTitlle 100 Theme Colors
AppTileTitle 200 Theme Colors
Spanish
ID Value Caption
AppTitlle 100 Tema Colores
AppTileTitle 200 Tema Colores

After changing the Caption for each language just Build the solution again and then rename AppResLib.dll according to the table below:

Culture name Culture code DLL file name
Chinese Simplified (PRC) zh-CN AppResLib.dll.0804.mui
Chinese Traditional (Taiwan) zh-TW AppResLib.dll.0404.mui
Czech (Czech Republic) cs-CZ AppResLib.dll.0405.mui
Danish (Denmark) da-DK AppResLib.dll.0406.mui
Dutch (Netherlands) nl-NL AppResLib.dll.0413.mui
English (United Kingdom) en-GB AppResLib.dll.0809.mui
English (United States) en-US AppResLib.dll.0409.mui
Finnish (Finland) fi-FI AppResLib.dll.040b.mui
French (France) fr-FR AppResLib.dll.040c.mui
German (Germany) de-DE AppResLib.dll.0407.mui
Greek (Greece) el-GR AppResLib.dll.0408.mui
Hungarian (Hungary) hu-HU AppResLib.dll.040e.mui
Indonesian (Indonesia) id-ID AppResLib.dll.0421.mui
Italian (Italy) it-IT AppResLib.dll.0410.mui
Japanese (Japan) ja-JP AppResLib.dll.0411.mui
Korean (Korea) ko-KR AppResLib.dll.0412.mui
Malay (Malaysia) ms-MY AppResLib.dll.043e.mui
Norwegian (Norway) nb-NO AppResLib.dll.0414.mui
Polish (Poland) pl-PL AppResLib.dll.0415.mui
Portuguese (Brazil) pt-BR AppResLib.dll.0416.mui
Portuguese (Portugal) pt-PT AppResLib.dll.0816.mui
Russian (Russia) ru-RU AppResLib.dll.0419.mui
Spanish (Spain) es-ES AppResLib.dll.0c0a.mui
Spanish (Mexico) es-MX AppResLib.dll.080a.mui
Swedish (Sweden) sv-SE AppResLib.dll.041d.mui

At the end of this process I also had AppResLib.dll.0409.mui and AppResLib.dll.0c0a.mui.

Adding localized resource strings to your Windows Phone 8 app

  • Select your Project in the Solution Explorer
  • In the Project menu click Add and then click Existing Item
  • Locate and select your AppResLibLangNeutral.dll file and the AppResLib.dll.*.mui files and then click Add
  • In the Solution Explorer rename AppResLibLangNeutral.dll to AppResLib.dll
  • Select AppResLib.dll and the AppResLib.dll.*.mui files and set their Build Action to Content in the Properties window

Build Action Content

  • In Solution Explorer, move the AppResLib.dll.*.mui files into the Resources folder
  • In the Solution Explorer expand Properties and then open WMAppManifest.xml
  • Click the Application UI tab
  • Set the Display Name to: @AppResLib.dll,-100
  • Set the Tile Title to: @AppResLib.dll,-200

To test localized settings simply change the language in the Windows Phone 8 Emulator. Any language that does not match your localized language files will display the language-neutral App Name and Title Title.

Sources:

http://msdn.microsoft.com/library/windows/apps/ff967550%28v=vs.105%29.aspx

Windows Phone 8 Dev – Localizing the AppBar

Windows8-Phone-Logo

In my previous post I looked at the basics of app localization (supporting other languages). If you are not familiar with setting up the Name and Value pairs in the AppResources.resx files then you will need to refer to that post before proceeding.

Before I looked at localizing my app I had my App Bar setup on my MainPage.xaml like this:

<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar Mode="Minimized"
                              Opacity="1.0"
                              IsMenuEnabled="True"
                              IsVisible="True">

            <shell:ApplicationBarIconButton Click="about_Click"
                                            IconUri="Assets/Images/appbar.information.circle.png"
                                            Text="about" />
       </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

As I could not find a solution for binding to my XAML appbar I decided to do it in C# instead. So I commented out my XAML App Bar (MainPage.xaml) and the Click event in MainPage.xaml.cs.

This is my App Bar setup in MainPage.xaml.cs:

public MainPage()
        {
            InitializeComponent();

                // Set the page's ApplicationBar to a new instance of ApplicationBar.
                ApplicationBar = new ApplicationBar();
                ApplicationBar.Mode = ApplicationBarMode.Minimized;
                ApplicationBar.Opacity = 1.0;
                ApplicationBar.IsVisible = true;
                ApplicationBar.IsMenuEnabled = true;

                // Create a new button and set the text value to the localized string from AppResources.
                ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/Images/appbar.information.circle.png", UriKind.Relative));
                appBarButton.Text = AppResources.AppBarButtonText;
                ApplicationBar.Buttons.Add(appBarButton);
                appBarButton.Click += new EventHandler(appBarButton_Click);

                //// Create a new menu item with the localized string from AppResources.
                //ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
                //ApplicationBar.MenuItems.Add(appBarMenuItem);

        }

As you can see the App Bar Button has a binding to AppBarButtonText (which is defined in my AppResouces.resx files).

Here is the Click event for the button:

        private void appBarButton_Click(object sender, EventArgs e)
        {
            NavigationService.Navigate(new Uri("/YourLastAboutDialog;component/AboutPage.xaml", UriKind.Relative));
        }

And there is my localized App Bar button.

about spanish

Happy coding!

Sources:

http://msdn.microsoft.com/en-us/library/windows/apps/ff431786%28v=vs.105%29.aspx