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

Windows Phone 8 Dev – Basic App Localization

Windows8-Phone-Logo

In my last post I made a basic color swatch and I thought it would be interesting to localize it for another language.

As you can see in the gallery above I set bindings to localize my app name, subtitle and for each color name in the swatch.

To do this we need to choose which language(s) we want to support and then populate their AppResources.resx page. To choose supported languages open the WMAppManifest.xml file and then click on the Packaging tab.

WMAppManifest-Supported-Languages

As you can see English (US) is my default language and Spanish is the other language that I have chosen to support. Click the Save button after selecting languages.

In the Solution Explorer (under the Resources folder) I now have an .resx file for Spanish called AppResources.es.resx. AppResources.resx is the file for my default language.

In each .resx file I set the binding Name and it’s Value. For example I have ApplicationTitle set in both pages with different values – Theme Colors and Tema Colores respectively. As you can see I created my own Names for the colors and app subtitle.

So I worked through both .resx files making sure that there were binding Names for my app title, subtitle and each color – along with the appropriate values for each language.

The next step is to set up the bindings in our app. Let’s start with the app title.

<TextBlock Text="{Binding Path=LocalizedResources.ApplicationTitle,
           Source={StaticResource LocalizedStrings}}"
           Style="{StaticResource PhoneTextTitle2Style}"
           Margin="12,0" />

So, we have replaced the hard-coded application name with a binding to the ApplicationTitle in both of our .resx files.

Similarly you can see that I used the same code to localize the color names – just changing the binding name for each color:

<!--Lime-->
<TextBlock Text="{Binding Path=LocalizedResources.Lime,
           Source={StaticResource LocalizedStrings}}"
           VerticalAlignment="Top"
           Margin="0 22 0 0"
           Grid.Row="0"
           Grid.Column="0" />
<TextBlock Text="
#A4C400
RGB
(164,196,0)"
           Grid.Row="0"
           Grid.Column="0" />

I did have to update the layout of my TextBlocks to separate the localized and non-localized elements.

To test localization in the Visual Studio emulator you need to change the language under All Settings > language.

In my next post I will look at localizing the AppBar.

Happy coding!

 

Windows Phone 8 Dev – Creating A Basic Color Swatch

Windows8-Phone-Logo

In this post I am going to go over how to quickly create a color swatch in Windows Phone 8. This particular app shows the colors for the Windows Phone 8 themes and their hexadecimal and RGB values.

This is our to-do list:

  • create a basic grid with rows and columns
  • define a style for the rectangles inside the grid
  • define a style for the text
  • force the app to use the light theme (optional)

The Windows Phone 8 themes consist of 20 colors:

WP8 Themes Accents

So I decided on a grid of 3 columns and 7 rows:

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

As you can see, in MainPage.xaml, we have a Grid and three ColumnDefinitions with a “*” for the width. This means that each column gets one third of the width of the screen. I also have 7 RowDefinitions whose height is set to “Auto“. This means that they adjust their size according to their content.

We want our content to scroll up and down so we need to add a ScrollViewer:

<ScrollViewer VerticalScrollBarVisibility="Auto">

So now we have a grid that can scroll up and down and we need to start putting content into each cell of the grid. Before we do that it pays to think about the properties of our content – we don’t want to manually specify each property in every grid right?

In App.xaml we can set properties under <Application.Resources> as follows. Let’s start with the text properties first:

<Application.Resources>
        <local:LocalizedStrings xmlns:local="clr-namespace:HexColor" x:Key="LocalizedStrings"/>

        <!--Text Style for Grid-->
        <Style x:Key="GridCellStyle"
               TargetType="TextBlock">
            <Setter Property="HorizontalAlignment"
                    Value="Center" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
            <Setter Property="TextAlignment"
                    Value="Center" />
            <Setter Property="Foreground"
                    Value="White" />
            <Setter Property="FontWeight"
                    Value="SemiBold" />
        </Style>

Here I have named my text style GridCellStyle and the TargetType is set to TextBlock. I have Setters for Horizontal and Vertical Alignment, Text Alignment, Foreground (color) and Font Weight.

To call on these properties use <StackPanel.Resources> in your MainPage.xaml like this:

<StackPanel>
<StackPanel.Resources>
                <Style BasedOn="{StaticResource GridCellStyle}"
                       TargetType="TextBlock" />
                <Style BasedOn="{StaticResource RectangleStyle}"
                       TargetType="Rectangle" />
            </StackPanel.Resources>
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <Grid> ...

As you can see we have our style based on GridCellStyle with TartgetType set as TextBlock- so all of the text we set will have the properties that we defined in App.xaml.

Similarly you can see that I also have a RectangleStyle with a TargetType set as Rectangle. This style has properties for the Width, Height and Margin of the rectangles that I am going to draw in the grid. Here are the rectangle style settings from App.xaml:

        <Style x:Key="RectangleStyle"
               TargetType="Rectangle">
            <Setter Property="Width"
                    Value="125" />
            <Setter Property="Height"
                    Value="125" />
            <Setter Property="Margin"
                    Value="10" />
        </Style>

Now that we have our grid defined and our properties set up we can populate the grid cells. Starting with the rectangles we just need to define the colors and their position in the grid:

                    <!--Lime-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="0"
                               Fill="#FFA4C400" />

                    <!--Green-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="1"
                               Fill="#FF60A917" />

                    <!--Dark Green-->
                    <Rectangle Grid.Row="0"
                               Grid.Column="2"
                               Fill="#FF008A00" />

These are the first three rectangles that I defined – as you can see all I need to set in their position in the grid using Grid.Row and Grid.Column and the Fill color (in hexadecimal). You can just type the color name instead of the hexadecimal value if that meets your needs.

Again with the text for each grid cell I am just defining the grid position and the actual text to display:

<TextBlock Text="Lime
#A4C400
RGB
(164,196,0)"
            Grid.Row="0"
            Grid.Column="0" />
<TextBlock Text="Green
#60A917
RGB
(96,169,23)"
            Grid.Row="0"
            Grid.Column="1" />
<TextBlock Text="Dark Green
#008A00
RGB
(0,138,0)"
            Grid.Row="0"
            Grid.Column="2" />

The last item on my list is to force the use of the light theme. I did this because I think a color swatch looks best that way – but there are some caveats. For phones with AMOLED or similar screens this will impact battery life (if the app is used a lot).

To force the light theme I am using Jeff Wilcox Phone Theme Manager. To install it click Tools > NuGet Package Manager > Package Manager Console. Run the command below:

Install-Package PhoneThemeManager

Now simply add the following to App.xaml.cs:

//Set theme to Light
ThemeManager.ToLightTheme();

That’s everything on our list done and even though it’s very simple I think that it looks good.

App Screenshot

If this swatch is of use to you it is available in the Windows Phone Store here.

Sources:

http://www.jeff.wilcox.name/2012/01/phonethememanager/

http://www.creepyed.com/2012/11/windows-phone-8-theme-colors-hex-rgb/

Windows Phone 8 Dev – Quick Tip – Disable Frame Rate Counters

Windows8-Phone-Logo

App screenshots with Emulator Chrome, frame rate counters or debug information will fail Windows Store certification.

To remove frame rate counters open App.xaml.cs and comment out the highlighted line of code as shown:

// Display the current frame rate counters.
// Application.Current.Host.Settings.EnableFrameRateCounter = true;

This will remove the frame counters from the emulator.