Skechifi

Privacy Policy:


All the data is stored within the phone unless and until user selects to transmit to Facebook via Share to Facebook option provided. Location data is traced if and only if the user tap's trace current location button (choose from map page). It is used solely for the purpose of grabbing the Map's Picture in and around the user's location so that the user can sketch on it. It is not transmitted to anywhere in any form.

Terms of service:
 
Application [skechifi] or its developers cannot be held responsible for any loss,damage caused to the user in any form. The application is purely intended for the purpose of entertainment and nothing else.

Read More

Scrollable Textbox Silverlight/WP7

I was doing an Application that required a Scrollable TextBox. Unfortunately the textbox that is available via the default WP7 controls is not scrollable. Naturally, i was looking for alternative controls/workarounds. But this time Googling did not work. There wasn't any decent work around available. I was about to quit doing the application, but thanks to a friend of mine i didn't. He found of a work around for this :) (had the eureka feeling :P ). OK enough story, lets get down to business.

Solution: 

Key thing: Set the height of the texbox to Auto, attach a scrollviewer to it & enclose it inside a grid.

By scrollable textbox generally, we mean that the container inside the textbox control (that holds the text) should be scrollable. Instead of that, what we are going to do is set the height of the textbox to "Auto" and put it inside a stackpanel and attach a scrollviewer to this textbox. The idea here is that, instead of moving the container that holds the text, we are moving the entire textbox. Since the height is set to auto, the textbox height extends automatically. To give the user an effect thats is similar to scrolling textbox, it should be enclosed inside a grid. The grid's dimensions should match that of the required textbox.

Code:

<Grid Height="390" HorizontalAlignment="Left" Margin="140,42,0,0" x:Name="grid1" VerticalAlignment="Top" Width="478"  >
            <ScrollViewer VerticalScrollBarVisibility="Auto" >
                <StackPanel Width="469">
                <TextBox AcceptsReturn="True" x:Name="ScrollableTextBox" Height="Auto" MinHeight="320" Width="454" TextWrapping="Wrap"/>
                </StackPanel>
            </ScrollViewer>
            </Grid>

 
Catch:
The catch in this solution is that, as the user keeps typing in and the textbox is just about to extend beyond the region of visibility, the textbox doesn't automatically scroll. The user has to use the scroll gesture and manually pull it up. An alternative is to (Though i haven't tried this) use the Height changed event of the textbox and when it crosses the threshold, programatically scroll up.This would give the feel of a proper Scrollable Textbox.

Hope this solution helped :) 

Read More

How to design a great Ui

This blog post is some what different from my regulars. I am going to share my views on how to design a great UI. Primarily I will be focusing on Windows and Windows phone based applications but this can be applied to other types also.  This post is not for professionals. Its for amateurs who are just getting into programming. I am an amateur myself and I don’t claim that this blog post is perfect. It’s the guidelines that I chose to follow.

Most of the applications I have seen possess robust functionality, but they fail to impress the user simply because the UI isn’t pleasing(often complicated) . Programmer’s often tend to give lesser importance to UI design.

1. Don’t be satisfied till you like it:

Designing an UI is a tedious process. It involves a lot of imagination and lesser logic. But just because designing is a tedious process jus don’t leave it as such. If the creator doesn’t like it, the user is definitely not going to like it. Try putting in a lot of effort till you like it.

2. Colors:

Play around with colors. Experiment with them, see how every color suits your application both background and foreground. But make sure you select those such that they form a great combination. Don’t choose colors that are flashy unless and until its for a specific purpose.

3. Background Picture :

If your application is going to involve a background pic, it is going to play a crucial role in the design. I have spent days finding the right background pic for my windows phone 7 applications. There are some rules while you are choosing the background pic. Don’t choose a background Pic just because the picture is great.  It should be chosen in such a way that the application theme, foreground and the control colors match. Another important thing is, even if the pic is great make sure it doesn’t hide any of your content. This can happen say, when the font is white and a small portion of the pic is white (obviously if both of them overlap).  Normally , an abstract pic is the best for a background.

                      

I used a simple stainless screen background to design an UI for my application – Med prompter pro.

4.Design tools:

Use design tools like Expression blend etc. for a rich UI. If you feel that expression blend and other software's can be complex try doing it with simple software's like paint and Microsoft Word. You can do a lot with the basic shapes in these applications. For example, in word take a rectangle go to format and fill it with a metallic blue.  You can then print screen this, crop the rectangle alone using paint and use it for various backgrounds.You can combine different shapes into one giving 3d effects to form a beautiful image and use to same process to create a stand alone picture. Its all left to your creativity. If you are looking for cheap alternatives try online editors like picknik or software's like GIMP,PAINT.NET

I designed the above pattern using Word really quick. All you need to need to do is make your imagination go crazy. This pattern I designed using a smart art list(with a single element) in a text box. I chose the color, selected the metallic design and rotated it. I created Multiple copies of the text box, arranged them properly. Then I printed the screen, pasted it in paint and cropped it properly.

5.Free pictures and icons:

Internet is a huge collection of resources. You can search the internet for free pictures and icons that suit your theme. You can use them legally in your application depending on the license terms. Download a lot of them, test them , play around with them , rotate them , combine them. You can use even Word to play around with them . Download an icon. Create a rectangle in word, fill it with a suitable color and place the icon in the middle! Print screen, copy paste in paint, crop to center. And there you go a simple picture with a nice background. 

I have downloaded a free picture here. If you observe the background more closely, you will notice there is a beautiful pattern plus there is lot of space. This space can be used for displaying your content (Great for Pivot and Panaroma)

            

 

My favorite  source - for Pictures : http://www.freedigitalphotos.net  

                                      for icons :http://www.commons.wikimedia.org/wiki/Crystal_Clear

6. Get Inspired :

Search of design samples based on the theme of the application. Make sure that UI is designed to match your theme. Get inspired by things like Metro design and AERO. They make your application feel really brilliant. If you think effects like AERO are complicated, there are always workaround’s (I have given one for transparency in my blog), try using those. I want to conclude my post saying keep your UI as simple as possible.

Read More

transparency: aero like effect–windows forms

The NEED:

For PC’s having Windows XP,98 it is not possible to bring in aero effects like Transparency. Since these operating systems don’t have sufficient resources, achieving both backward compatibility and superior aesthetics is going to be really difficult. Therefore workaround’s are the only option.

SMALL STORY:

I was designing a Windows form application – an assignment given by my professor. I wanted to make it backward compatible as he has a system running Windows XP. But I badly wanted to include the Glass effect (found in AERO), since I wanted my user interface  to look really beautiful. So I started looking for workaround’s. I did manage to find one(made me look like a complete idiot, since I couldn’t think of such a simple thing) . I am going to talk about the same in this blog post.

Prerequisites: Visual Studio

METHOD:

Consider a sample Windows 7 form:

It looks like this, completely opaque. To give it some Transparency, view the form’s design(Design view).  Click on the form ( such that the form gets selected not the controls inside the form) and view its properties ( You can do this by click the properties tab available on the right hand side of Visual studio or if its not present press CTRL + W,P). Now scroll down and find the property called Opacity. By default this will be set to 100%. Set this to 90%.

And there you go, you are done. Now press F5 and you can see your form having the beautiful transparency effect. You can adjust the value of opacity to vary the degree of transparency, but make sure you don’t increase transparency to an extent where content cannot be seen.

CONCLUSION:

You can see that the transparency effect has made the UI really better. Try changing the color that suits your application and transparency. This process makes the control’s inside the form(almost all) to exhibit transparency. This can be used in Windows 7 and vista also, if you think that using those Aero DLL’s is a tedious process.
Download the sample source code here. Here I have varied the transparency based on a track bar.

Read More

Detect Alarm Entry–Wp7

If you  have used Alarms and Reminders in Wp7 Mango SDK, you will notice that reminders can be detected by having a separate page in the application. But unfortunately there is no such detection mechanism available for Alarms. By detection mechanism what I mean is that- the differentiation between the app launch due to alarm and manual launch. What if the developer wanted to do something after the alarm has occurred? how does he detect that? I had the same problem and I am going to share the work around here. Its not a perfect substitute and may not be valid for all cases.

Microsoft has made the detection mechanism for knowing whether an alarm has occurred- private.The variable called p_completed which shows the status cannot be accessed. So practically there is not much we can do.

Prerequisites:

• You should be familiar with WP7 app development
• You should know about alarms and reminders in WP mango. If you are not aware of it check out this link- code samples of WP7

So lets get started.

For the sake of demonstration I am going to first create an application that adds and alarm and also can detect  the same. So I open a new project, select Silverlight for windows phone 7 and load the project. Then drag and drop a button into the designer area. And place the following code in the click event. This is for creating a new alarm

try
            {
                Alarm a = new Alarm("first");
                a.BeginTime = DateTime.Now.AddSeconds(40);
                ScheduledActionService.Add(a);
            }
            catch
            {
                ScheduledActionService.Remove("first");

 

/*assuming that alarm already exists exception occurs due to that */

Alarm a = new Alarm("first");
a.BeginTime = DateTime.Now.AddSeconds(40);
ScheduledActionService.Add(a);           }

 

I create an alarm object a with the alarm name as first. I set the begin time as 40 seconds from the current time. And I add it to the ScheduledActionService. I handle the exception that is caused if the alarm named first already exists by removing it first and then creating it again.

Now I am going to detect whether the alarm launch has occurred in the PhoneApplicationPage_Loaded a event handler of Main page. The code is as follows ::

 

try
           {
               ScheduledAction a1 = ScheduledActionService.Find("first");
               if ((a1.IsEnabled == true) && (a1.IsScheduled == false))
               {
                   MessageBox.Show("Alarm detected");
               }

ScheduledActionService.Remove("first");
           }
           catch
           {

           }

Now launch the application click add alarm and then close the application. Wait for the alarm pop up. Tap the pop up and there you go. Get a message saying that alarm is created.

How it works:

First I have declared an object a1 of schedule action and I pull the alarm first and store it in a1. This is done using ScheduledActionService.Find("first"). There are two key aspects to this. For an alarm to have occurred and after that the application is launched then the alarm must have been enabled but its not scheduled. So I check the above condition & then display a message saying alarm is detected. Now why did I add the remove alarm command. I do this because the next time the user launches the application manually, the state of alarm would be same. As I said earlier this work around is not a perfect substitute but can help sometimes. So you need to again create the alarm for the next use.

Bottleneck :

This workaround doesn’t work perfectly if the user clicks dismiss and then launches the application manually. In this case the application will say alarm is detected though its not the case

You can download the source code from here.

Read More