In a not-so-basic-application you might have pages which are used for multiple similar purposes. You pass query string with many fields with multiple values between such pages (or web pages). In database driven apps, parameter values could be user generated and stored in the back-end and you pull more info from database on the basis of the value in query parameter. This is not the scenario of back-end driven app. This is more about “Field Names” and Values, which are part of the design and known to you while coding, and you want to manage them effectively and make the code more readable.
Let’s take an example:
You have a page in your app which loads different lists (ex: city, state, pin, salutation, etc.) and lets user select an item from the list. At different places in your app you pop this page up with required parameters to load appropriate items. The call to page looks something like this:
Let’s assume your page also has the ability for editing and you want to activate appropriate functionality (select only || edit). You would add one more parameter to your query, like so:
If you have many such pages, each have multiple fields and their multiple values, and you make calls to these pages from different places in your code, soon it will be very difficult to manage hard-coded query strings in Uri’s.
Here comes enum based solution:
We will have enums for fields and their values. For the purpose of this example we will keep single enum for fields and multiple enums for values for different fields. Let’s code
First define enums for fields and their values:
If you do not wish to be more detailed, you could simply build your Uri’s like so:
This.NavigationService.Navigate("/ListPicker.xaml?{0}={1}",QueryFields.ListPicker_FormType.ToString(), FormTypes.Select.ToString());
//The resultant uri - /ListPicer.xaml?ListPicker_FormType=Select
We will see below how you could parse query parameters in the called page and retrieve values in enum types.
Creating Uri as above still has string formatting which is not easy to maintain in multiple uses. To make things manageable and less error prone, let’s create a new enum for pages in the app and shift Uri building code in a single method which could be called from anywhere in the app with different field and values.
With GetUri, you could create page navigation Uri with enums only instead of hard-coded strings:
KeyValuePair<string, string> query_1 = new KeyValuePair<string,string>(QueryFields.ListPicker_FormType.ToString(), FormTypes.Select.ToString());
KeyValuePair<string, string> query_2 = new KeyValuePair<string,string>(QueryFields.ListPicker_ListType.ToString(), ListTypes.City.ToString());
This.NavigationService.Navigate(GetUri(AppPages.ListPicker, query_1, query_2));
Once you are navigated to your page, you need to parse query strings and extract enums which you could use in the page to decide page’s functionality.
At page level you need to have required enum type fields. For this example we will have two fields, one FormTypes type and other ListTypes type. A private processQuery method which accepts a dictionary sets these two fields appropriately.
FormTypes formType;
ListTypes listType;
private void processQuery(Dictionary<string, string> query)
{
string _formTypeName = "";
string _listTypeName = "";
query.TryGetValue(QueryFields.ListPicker_FormType.ToString(), out _formTypeName);
query.TryGetValue(QueryFields.ListPicker_ListType.ToString(), out _listTypeName);
if (_formTypeName.Length != 0) formType = (FormTypes)(Convert.ToInt32(_formTypeName));
if (_listTypeName.Length != 0) listType = (ListTypes)(Convert.ToInt32(_listTypeName));
}
You would call processQuery method from OnNavigatedTo method of your page.
If you have 100’s of case statements (to choose a page) in GetUri, and you are concerned about performance, refactore the method to accept page name with path as string. With page path name directly in string, you would not need case statements. By the way, in my case with about 80+ cases to get PageName, the query creation does not take more than 50MS, which is negligible for me. More so, navigation calls are not recursive ones.
Windows Phone 8.1 developer preview is totally awesome. So what is one of the most important things app devs can do right away, without much fuss, to make their apps look great with Windows Phone 8.1? Revisit your app’s Live Tile images. Why? In 8.1, Start screen is mesmerizing with the parallax effect and Live Tile with background overlay. Dev preview users are going crazy with new Start experience, and I am sure, with public release, end users are going to love to have background image as well. Take a look at this awesome Nokia Lumia 925 Start screen:
When users have a background image, they might not like to have solid Live Tiles block their beautiful background. So, revisit your app’s Live Tile images – all of them! Check if they are transparent or not? If they are like Cortana, Avirall Time Suite, etc. in the image above, you are all set. You can safely ignore this article and find some other awesome way to improve your app for WP8.1 (think Cortana). If they are not, I suggest to update ‘em ASAP. And it’s easy, too. Let’s see how you can create transparent Live Tile images with Open Source Inkscape. You could choose to use Paint.NET (not MS Paint), Photoshop, GIMP, or any other tool which allows you to export image with transparency. Though I prefer GIMP for image editing but I chose Inkscape for this demo. Let’s go.
Step 1: Setup the page
Open Inkscape and create a new document and Open Document Properties from file menu.
In most cases app icons are solid white, if yours is one too, change the background color of the page, temporarily, to light yellow. This is while working only so that you can see white color. Before exporting we will reset this to transparent (this is very important).
This example is for 336 X 336 medium tile. So set the custom size to 336 X 336.
Make sure Units is “px”.
Step 2: Setup the drawing
Windows Phone 8 Asset Template Guide suggests a 336 X 336 tile to have 110px margin on all sides. Create 110px margin guides on all the sides. To create margin guides click and drag from the horizontal ruler on the top and from the vertical ruler on the left.
Step 3: Create Live Tile image of your app
The center part between the margins is the space where your tile image will go. Create your image here. For this example I simply dragged the box from tool box and made a hole in it 😀
Step 4: Set background to transparent
To create a transparent Live Tile image we would like to have a transparent background. Go back in document properties and set Background to transparent by resetting “A” to 0. If your image is solid white, you might not see anything after making the background transparent. Don’t worry, your image is there (maybe somebody can tell how working space (not document background) in Inkscape can be made a different color than white).
Step 5: Export
Open Export dialog from File > Export Bitmap…
Set X0, X1, Y0, Y1 as shown in the image above.
Browse for the image location, and make sure you give “PNG” as the extension of the image, NOT JPG or BMP.
Notice that your final image does not have a white background. Windows Photo Viewers’s light blue background is your image’s background.
You are done. You would want to change all Live Tile images of your app in the same way. A transparent Live Tile image will encourage users to have your app pinned to Start screen without obstructing their beautiful background images.
Something is cooking in the background? Do not forget to inform your user. A modern, flat, light weight, wait spinner is an animated and prominent way to inform user about running background processes (you would not have long running processes on the UI thread, right? See how to effectively free up UI). You would choose to show this control in that area of the screen to which the information, related to which the BG work is taking place – loading/processing etc, belongs. You may have multiple information points on screen for which background work is running.
For this step-by-step we will create this example:
A practical example of implementation of this spinner is this panorama app there are two wait spinners being used, one in Quick Stopwatch pano, and other in Recent pano. When data related to Quick stopwatch is loading, the wait spinner shows beside the title “Quick”, and when data related to Recent is loading, the wait spinner shows near the pano title “Recent”. This way user is informed about which section of the app is doing something in the background.
Don’t have this app on your Windows Phone? Visit here
Let’s go through step-by-step of creating a WaitSpinner UserControl and using it in a page.
Step 1 : Create Solution and Project
Create a project in VS with the name “WaitSpinner”. The solution gets created automatically.
Right click on the solution in Solution Explorer, and choose “Add”>”New Project”.
Select Class Library type project and name it “XAMLControls”.
Step 2 : Create UserControl
Right click on XAMLControls and select “Add”>”New item”.
Choose User Control and name it “UCWaitSpinner”.
A new UCWaitSpinner.xaml and its code behind is created.
Step 3 : Open in Blend
Right click on UCWaitSpinner.xaml and choose to open in Blend. Depending on the version of Visual Studio the view you get might be a little different, but most of the UI will be similar. You will get something like this:
Step 4 : Change the type of Layout control
Change the type of Layout from Grid to ViewBox.
Step 5 : Add a new Grid to Layout ViewBox
Choose Grid from control and right click and drag in XAML design view area.
Update Layout properties; Height and Width to 50, HorizontalAlignment and VerticalAlignment to Stretch.
Step 6 : Add Outer border
Choose Ellipse tool from Toolbox and create a circle in the design area. Don’t worry about size and fill at this point.
Make sure Ellipse is selected.
In Properties.Brushes;
Set Fill to “No Brush”.
Set Stroke to “PhoneForegroundBrush”.
In Layout section;
Set HorizontalAlignment to stretch.
Set VerticalAlignment to stretch.
Set all margins to 0.
Step 7 : Add axis for hands
Choose Ellipse tool from Toolbox again and create a circle in the middle of XAML design. Don’t bother about size at this point.
Make sure this ellipse is selected.
In Properties.Brushes;
Set Fill to “PhoneForegroundBrush”.
Set Stroke to “No Brush”.
In Layout section;
Set Width and Height to 5.
Set HorizontalAlignment to center.
Set VerticalAlignment to center.
Set all margins to 0.
Step 8 : Add minute and hour hands
Choose Rectangle tool from Toolbox and create a rectangle in the design area. Don’t worry about size and placement at this point.
Rename the [Rectangle] to “MinuteHand”.
Make sure you have MinuteHand selected.
In Properties.Brushes;
Set Fill to “PhoneForegroundBrush”.
Set Stroke to “No Brush”.
In Layout section;
Set Width to 2 and Height to 20.
Set HorizontalAlignment to Center.
Set VerticalAlignment to Bottom.
Set Bottom margin to 25 and all others to 0.
In Properties.Transform;
Select Center Point tab.
Set X to 0.5.
Set Y to 1.
Copy and paste “MinuteHand” control and name it “HourHand”. Keep everything same and change only the Properties.Layout.Height to 13.
Step 9 : Create Storyboard for moving hands
In Objects and Timeline, click on “+” sign to add a new storyboard.
Name the storyboard as “MoveHands”.
Step 10 : Create animation for minute hand
In timeline window slide the marker to 3 second.
Select MinuteHand control.
In Properties.Transform select Rotate tab and set Angle property to 1440.
Step 11 : Create animation for hour hand
Select HourHand control.
In Properties.Transform select Rotate tab and set Angle property to 360.
c. In timeline windows click on play button to see hands are rotating properly (Hour hand completes 1 rotation and minute hand completes 4 rotations in 3 seconds).
public void Start()
{
MoveHands.Stop();
AppearClock.Begin();
MoveHands.Begin();
}
Step 16 : Add stop functionality
Add a public Stop methods to the class:
public void Stop()
{
DisappearClock.Begin();
}
Step 17 : Build
Build XAMLControls project. If your project builds properly you should see UCWaitSpinner listed in your Toolbox in XAML Controls.
Step 18 : Add spinner to form
Open MainPage.xaml from the main project WaitSpinner and drag UCWaitSpinner from the Toolbox to the page. Open MainPage.xaml in code view and your will find the newly added control in ContentPanel:
In MainPage.xaml name UCWaitSpinner control as “waitSpinner”, add Height and Width properties with a value of 120 in both, and wrap the control in a StackPanel:
As an app developer you are supposed to reach out to your prospective users as much as you can to let them know about your app. Social networks – FB, Twitter, Reddit, etc. are some great tools to spread the word. I also think creating a small video about your app and publishing it to YouTube is an effective way to let your users quickly get to know about your app. These are some fantastic posts to talk more about how to promote your apps: Making A Love Connection? Build Relationships To Promote Your Apps The Simplest Things People Don’t Do To Market Their Apps (But should)
In this post I will share some points about creating video.
The simplest and very effective way of creating a video is capture the physical phone screen while you are using it. That’s it. You can upload it as it is with your commentary in it. If you want to be fancier, there could be many other pricey options – e.g. hiring an advertising agency. Here I would talk about a no-cost (but a little extra work) option for creating attractive videos showcasing your app. The two videos, listed below, are created with following tools and processes.
In this setup I chose not to go for a video on physical device screen because i wanted to keep focus on the functionality and information about the app, rather than telling about how to use the app. I used emulator instead. It’s easier with emulator and it also gives more control to capture the desired section on the screen.
Prepare Emulator
You could choose to use the default generic emulator image to show your app in. Following is the generic emulator skin which comes with the IDE:
Or, to make your video more personalized/interesting, you could use a custom skin. You can customize skins at your heart content, for example, for one video I created this skin:
Once you have taken care of the device skin, have your app installed on the emulator. Don’t forget to prepare example data and load with the app, if your app is data heavy and you want to showcase the same for your users. Set up a nice background on your desktop (it could be your app’s or company’s branding). Background is required because in this case you would have the complete HD movie created along with the background. The least HD movie size is 720P, so apart from the device there would be a lot of background in the video.
Animations and 2D Graphics
Silverlight is an ultimate tool to create fantastic 2D animations. You need to come up with a story as to how you would want to present information to the audience. Think about dynamics of the information, their movements, exit, and entry. Plan 5-10 slides. Create animations and transitions in Silverlight desktop application. If your animations and graphics are showing on the same screen with the video, first capture the video and using VideoBrush add the video in the Silverlight application. Fine tune the timing of the video while test running the app. You can see in the videos below, one of the video is a completely Silverlight video captured on screen and other is a mix of Silverlight and pre-captured video. You can have your titles, credits, and subtitles in the app itself with your custom animations.
Raw Video Footage
I captured screen with Expression Encoder 4 (I hear that the studio has been discontinued, but there are other tools available to download with which you can effectively capture screen). Set the capture size to minimum 1280X720 to play well in HD. Run the app on emulator, or run your desktop Silverlight application and capture the video.
Voice Over
You might want to include commentary in your video. It might be your own voice or you can choose to use text to audio tools. In both the cased you will need a script to read. Prepare the script by running and re-running the video and match your speed with the video speed. The best free tool to prepare audio is Audacity. You can add commentary, music, effects in a single with multiple tracks. You can adjust the speed of your audio and match it with your video output.
Fuse Video And Audio
Now remains the simple task of bringing Video and Audio together. In this step you would make least changes to video or audio so a simple video editing tool like Movie Maker is enough. Export the video in MP4 format with the source dimension locked.
In Windows Phone, progress indicator on System Tray is a quick and easy way to indicate that some activity is running in the background. It is all right if you want to indicate progress from a single thread. What if you have multiple threads running and all need to use progress indicator?
I created a ProgressBarManager wrapper class to handle multiple thread progress indication scenario. This class can work in both scenarios – indeterminate or determinate, but in case of multiple background processes the preferable way is indeterminate. The accompanied progress text from different processes can show progress value in the text. Following is example screen shot of ProgressBarManager in action.
Usage Example
At class level define ProgressBarManager:
ProgressBarManager ProgressBarManager = new ProgressBarManager();
In constructor of the form where you wish to show progress bar with multiple clients, instantiate the class like so:
SystemTray.SetProgressIndicator(this, new ProgressIndicator());
ProgressBarManager.Hook(SystemTray.ProgressIndicator);
Update ProgressBar from different processes with the ProgressBarManager.Show(). In this example I have a button which starts two background threads which update progress bar asynchronously. The button’s click method is as follows:
You have about 50 different icons in your app. You want to show them in dynamic color (determined by user/device at runtime) in different sizes at different places. You want them to be lightweight and swift to render. If you go by traditional PNG way, you could somewhat achieve (no scalability) it with about 2000 different files of no less than 5MB. Here is my proven solution to achieve this with a 15KB, yes a single 15KB file.
If you have used my app Avirall Time Suite, you must have noticed that throughout the app, where required, icons adopt accent color. Some elements in the app are also shown in dynamic contrast color of the accent color. I will write another post about how to get contrast color of the accent color. Following are screen shots of the app with different accent colors and different size icons. Notice New, Recent, and Options sections:
I had to meet following requirements to achieve accent color icons in the app:
There are about 50 different icons in the app to be shown in current theme accent on the device.
At different places same icons have different sizes.
No JPG because of lack of alpha channel.
No PNG because though it had alpha channel, color and size scalability is an issue. 50 icons X 4 sizes X 12 accent color would have gotten to unmanageable 2400 icon files, and still it would support only rigid 12 accent colors.
So, no raster images.
No paths – managing complex paths would not be easy, plus i was not sure about the performance compared to the solution I was thinking.
So I decided to develop and design my own custom dingbat TTF font. Having fonts for icons has following pros:
Very light file containing all 50+ icons. Just 15KB!
System renders the fonts as text, so no performance issue.
Easy Color and size scalability.
Low maintenance.
Following are the cons:
No gradient. (Though it’s possible but I have not experimented)
Font creation is a pain, initially.
You could also think of using fonts for icons, if you need color/size variations in your app for a large number of icons.
I have released the font I created for Avirall, under OPEN FONT LICENSE. Read this post for details.