Tag Archives: Avirall Time Suite

I needed to truncate lines from CSV string prepared for export through mail in my app. Windows Phone mail restricts text size to 1MB. In my app’s case some CSV reports could go beyond 1MB. To make sure that the CSV report does not exceed a desired size in bytes, I created this extension method – SizeIt. SizeIt can truncate lines (and characters if required) from a given string from beginning or from end and also inserts information text line (how many lines and characters removed) in the resulting string. Following is the test form created to show what the method does to a string. In this example a 300 byte 10 line string is given as input and asked to reduce it to <200 bytes, first from beginning, and then from end.

You may extend SizeIt to make it even smarter because it has following shortcomings in current version:

Does not truncate very closely to Max size. Will always be less than 50 bytes from max.

If there are only two lines and line of truncating side is huge, even a slight reduction in size will remove the complete content of the huge line, meaning loosing most of the text. This could be taken care of by firsts analyzing the string and then truncating line/character, as required

The logic inherently tries to remove lines first, should intelligently decide whether to remove line or chars.

Avirall Time Suite is an extensive app with 60,000+ working LOC in .cs files. I have not calculated the lines of code in XAML because a major portion of them are auto-generated. Still, there is about same number of lines in XAML files, as well. Avirall has 15 pages and 3 of them have about 5 types, so in all about 30 pages show up in Avirall. During documentation I created a high level diagram of navigation hierarchy in the app. I think it gives a bird’s eye view of how the app’s control flow, kind of circulatory system. This is how it looks like :

As a developer, if I need to pick a concept which I find most important in deciding the placement of information, then it is the user focus areas on screen. You want your users to find more important information swiftly so you keep those elements in the areas of the screen which get more focus and keep less important elements in areas which are less intrusive during user scanning the page. Have a look at following imaginary compartmentalization of screen areas:

Green dots represent user focus. So, 1,2 and 5 are the areas which are going to get most focus of user. Then come 3, 6, and 9. And the least focus grabbing areas are 4, 7 and 8. The arrows show the shifting of user gaze while they are scanning your app’s page. This shifting of gaze is closely related to the focus areas. User’s focus shifts in this sequence (not very strictly but generally)
1 > 2 > 5 > 3 > 6 > 9 > 4 > 8 > 7.

This can be a great guide to plan control/element placement in your app.

In last post we wrote extension method to get complementary color of a given color. In this post we will write some more extension methods to get colors. Co-incidentally India is totally covered in colors because this is the Holi week.
If you want to have a dynamic feel to your app (or some part of your app) you could fill it with random colors. Let’s write following extension methods which return random color with parameterized control over what type of color output you need:

Color.GetRandom – This method returns a random color.

Color.GetRandom(Brightness Control) – This method returns a random color between given brightness.

Color.GetRandomShade – This returns a random color of the Color’s shade.

Color.GetRandomShade(Brightness Control) – It returns a random color of given color between given brightness.

Color.GetPastelShade() – Returns a pastel shade of given color.

Let’s code.
We will utilize the same code from our last post and extend the ColorExtensions class. To implement aforesaid methods, add following code to the said class

In the image above blue & orange are complementary colors, green and red are complementary colors, purple and yellow are complementary colors, etc. The formula is; two colors, placed exactly opposite to each other on color wheel are complementary. You use complementary color combination to highlight a particular item in your design. For example, if most part of your screen has blue color, for important elements on the screen you would choose orange color. Photographers and painters know about importance of complementary color in making their paintings and photographs beautiful:

In case your app design is dynamic which gives control to the user to choose a dominant color in your app, e.g. background color, you would want to know the contrast color of the chosen color on-the-fly. Particularly in Windows Phone apps, if you incorporate user selected accent color in app design, for some important elements you might need contrast color. For example, in following screenshot of my app, the accent color on the phone is magenta and the color of the hands, auto generated in code, is green.

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.

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.