Ten Tips To Make Your Windows Phone 7 More User Friendly

November 23 2010

I’ve now been using my Windows Phone 7 as my main phone device. And I’m definitely liking it. Out of the box, it is pretty darned intuitive and user friendly. But now, having used it for awhile, I’ve done some things to make it that much better.  Here’s what I’ve done:

  1. Change the lock screen to a black background. When using a phone I like to quickly glance at the screen to see if there are any new messages, etc.  And often just to see the time. I found using a photo on my lock screen to be too busy for this purpose.  They offer the use of a color lock screen, but they don’t offer black, which I think provides optimum readability since the lock screen text is always in white. So, I took a picture of a black sofa and then used that as my lock screen photo.
  2. Rearrange default tiles.  After using the phone for awhile, I determined which apps I kept returning to and rearranged my tiles based on usage. I still use my phone primarily to make calls, text message and use the calendar.  So here are the tiles that I have front and center on my phone
    1. Phone – After all, it is a phone!
    2. Messaging – Fastest way to text messages.
    3. Settings – When I’m out and about, I like to hook into wireless networks, so I find myself going to settings a lot to hook into wireless networks.  Plus, as I keep messing with the phone itself to get it the way I want it, I find myself in settings a lot. As such, I added the settings tile.
    4. Music – Now that I am using the phone as a Zune and plugging the 8th inch adapter into my home stereo and car, I find myself in the music section a lot.
    5. Calendar – At this point, I’ve been using my cellphone as a calendar for years, so it makes sense to have the calendar tile on there.
    6. Photos – Same with photos. Our phones are our cameras these days.

      (Note to Windows Phone team if you read this: I wish I could configure what images appear in the photos and music tile instead of it being hidden from me.)

      So, those six items each up all my space.  Below the fold on the home screen I am putting apps as I try them out.
  3. Change theme from dark to light. I really find reading white text on a a black background hard on the eyes after awhile. Thus, I changed the theme. Much better reading black text on a white background.
  4. Sync my phone over wireless. This is a really cool feature!  No more plugging the phone into a PC. Here’s how to do it: http://www.zune.net/en-US/products/learningcenter/sync/usingsync/setupwirelesssync.htm. Note that you have to have a password protected wireless network for this to work. And, hey, all you iPhone users out there: this is a feature that isn’t on the iPhone!
  5. Manage my contacts/calendar via Outlook. See this post for more: http://rhizohm.net/irhetoric/post/2010/11/16/Missing-ActiveSync-How-To-Sync-and-Import-Contacts-Into-Windows-Phone-7-From-Outlook-Using-Windows-Live-Hotmail-As-A-Bridge.aspx
  6. Turn off location. Call me paranoid, but I don’t like location turned on with my phone.  See http://icanstalku.com for more on why. What’s nice is that you can turn it off but still install apps that “think” they need it. For example, the official Twitter app says it is going to use your location when you try to install it, but you can still install it with location turned off.
  7. Change ringtone.  I liked 04 Silk.
  8. Turn off vibrate. Don’t like things vibrating in my pocket.
  9. Use speech recognition for search. The quality is really there! 
  10. Tilt phone to landscape mode when typing. It really makes the keyboard much more usable.

Missing ActiveSync? How To Sync and Import Contacts Into Windows Phone 7 From Outlook Using Windows Live Hotmail As A Bridge

November 16 2010

I am a long time user of Windows Mobile and I sync all my contacts and calendar appointments using ActiveSync with Outlook on my home PC.  These are all my personal contacts and personal appointments. It is a version of Outlook that is not connected to an Exchange server and is not tied to work.  Over the years this has been a rock solid back up for my contacts and appointments and, as I have moved from phone to phone, ActiveSync has always been perfect for getting all these contacts on to a new device.

So, when I got a Windows Phone 7, I needed to get all my contacts (phone numbers, etc.) and appointments on to the device.  But Windows Phone 7 doesn’t support ActiveSync. So what to do?

[UPDATED 11/18/2010 -- Another way to do this is using the Microsoft Office Outlook Hotmail Connector. That doesn't exactly sync your contacts/calendar, but allows you to drag and drop items from one place to the other.]

My initial searches for this on the web were suggesting that Google was the answer. But I didn’t want to use Google to sync my contacts and appointments.

The solution I found was to use Hotmail/Windows Live.  I was able to export my contacts and appointments out of Outlook and put them into Hotmail/Windows Live and then sync them to the device. Here’s how:

Contacts

Step 1 – Export To .CSV

Getting your contacts out of Outlook 2003 or Outlook 2007 and into a .cvs works as follows:

  1. In Outlook, on the File menu, click Import and Export.
  2. Click Export to a file, and then click Next.
  3. Click Comma Separated Values (Windows), and then click Next.
  4. In the folder list, click the Contacts folder, and then click Next.
  5. Browse to the folder where you want to save the contacts as a .csv file.
  6. Type a name for the exported file, and then click OK.
  7. Click Next.
  8. Click Finish.

In Outlook 2010, it is a little more buried:

  1. Click the File tab.
  2. Click Options.
  3. Click Advanced.

Advanced command in the Outlook Options dialog box

  1. Under Export, click Export.

Export command in the Backstage view

  1. In the Import and Export Wizard, click Export to a file, and then click Next.
  2. Under Create a file of type, click the type of export that you want, and then click Next. The most common is Comma Separated Values (Windows), also known as a CSV file.

Step 2 – Import to Windows Live Hotmail

  1. Sign into Windows Live Hotmail.
  2. Click Contacts.
  3. Click Manage/Import
  4. Navigate to the .csv

You’re done!  To force your Windows phone to sync, go to settings, Email and Accounts and then press and hold the Windows Live account. It will display an option to Sync.

Calendar

Unfortunately, Hotmail doesn’t allow you to do a bulk import of appointments.  Fortunately, I only had a smattering of appointments that I wanted to get copied on to my Windows Phone 7, so it wasn’t too painful to export each one individually and then import it into the Hotmail/Windows Live calendar.

Step 1 Export To .ICS

  1. Open the appointment that you want to export.
  2. Click “Save As” and make sure you are saving in the iCalendar format

 

Step 2 Import to Windows Live Hotmail

  1. Sign into Window Live Hotmail
  2. Click Calendar
  3. Click Subscribe (which turns out to be Subscribe/Import”)
  4. Change the radio button to Import. Also be sure to change the radio button to import into an existing calendar. One gotcha to watch out for is that, when you import an appointment into the Hotmail/Windows Live calendar, it tries to create a new calendar very annoying. You have to manually change the dropdown to your default calendar:

calendar

Unfortunately you’ll have to do this for each appointment you want to get into your Windows Phone.

Again, to force your Windows phone to sync, go to settings, Email and Accounts and then press and hold the Windows Live account. It will display an option to Sync.

Page Transition Animations and Windows Phone 7

November 9 2010

So you want your Windows Phone 7 application to have nifty transitions similar to how the native apps on the phone work. Most commonly you see the turnstile effect or the slide effect.

4341.WpTkOct10_2D00_TransitionFrame[1]

With the Silverlight Toolkit for Windows Phone, it is pretty darned easy. Download sample code. Here’s how:

 

  1. Download and install the toolkit. It gets installed to C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\Microsoft.Phone.Controls.Toolkit.dll if you were wondering. It should automatically appear as an option  as Microsoft.Phone.Controls.Toolkit when you go to add a reference.
  2. Change your app.xaml.cs file in the InitializePhoneApplication() method so that RootFrame is of type TransitionFrame:
  3. Then, under the root element of each page (which should be <phone:PhoneApplicationPage> add the transition you want. You'll need to add the xmlns to dll, like this: xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    1. If you want Turnstile transtion, it would look like this:
    2. If you want Slide transitions, it would look like this:

And that’s it! You can also play around with the other transition modes supported, which are roll, swivel and rotate.

Download sample code.

App Hub Problems Solved By Updated Terms of Service on XBox Live

November 4 2010

I was losing my mind trying to use the App Hub up here: http://create.msdn.com/en-US/

But, then I found this:

If you're an App Hub member, and are experiencing any of the following issues:

clip_image001 Inability to access the Windows Phone Dashboard

clip_image001[1] Inability to access the Xbox 360 Dashboard

clip_image001[2] Inability to review Xbox 360 games

A recent change to the Xbox LIVE service may be affecting you. With the launch of the new Xbox 360 dashboard experience today, Xbox LIVE users are being asked to review and sign an updated Terms of Use.

The App Hub membership gives you the opportunity to develop for both Windows Phone 7 and Xbox 360 Indie Games, so even if you are strictly a Windows Phone 7 developer, this change may affect you. If you experiencing any of the above issues, please follow these steps to sign the new Terms of Use and restore your ability to access App Hub:

1. Sign out of App Hub

2. Browse to http://www.xbox.com/

3. Click "Sign In", and sign in using the same Windows Live ID as you do to sign into App Hub

4. Sign the updated Terms of Use

5. Return to App Hub (http://create.msdn.com)

6. Sign back in using your Windows Live ID to continue using App Hub as normal.

 

And now all is happy.

Windows Phone 7 How-To Index

October 27 2010

Here’s a cheat sheet quick guide to a bunch of great MSDN resources on Windows Phone 7 development.

Making The SelectedItem Shrink When Pressed in a ListBox For Windows Phone 7

October 21 2010

There’s a nice effect in many of the shell apps of Windows Phone 7 where, when pressed, the selected item of text in a listbox shrinks slightly.  I wanted this effect in my listbox and used Blend to do it. It ends up looking like this when you press it but before you lift your finger off. Simple, but an effect UX technique. It ends up looking like this when your finger is on the item:

listbox

Here’s what I did:

  1. Created a ListBox
  2. Rightclicked the ListBox and selected “edit additional templates” and then “edit generated item container”
  3. Selected the ContentContainer
  4. Went to states and selected “MouseOver” (this is kinda funky ‘cause the phone doesn’t really have a MouseOver state, but it does have a pressed state, which they are calling MouseOver)
  5. Went to the transform properties of the ContentContainer and changed the scaleX and scaleY to .9 and also changed the center point to 0,0.
  6. Walla!

Download the project if you’d like. Or just grab this style style that generated below.

  1. <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
  2.     <Setter Property="Background" Value="Transparent"/>
  3.     <Setter Property="BorderThickness" Value="0"/>
  4.     <Setter Property="BorderBrush" Value="Transparent"/>
  5.     <Setter Property="Padding" Value="0"/>
  6.     <Setter Property="HorizontalContentAlignment" Value="Left"/>
  7.     <Setter Property="VerticalContentAlignment" Value="Top"/>
  8.     <Setter Property="Template">
  9.         <Setter.Value>
  10.             <ControlTemplate TargetType="ListBoxItem">
  11.                 <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
  12.                     <VisualStateManager.VisualStateGroups>
  13.                         <VisualStateGroup x:Name="CommonStates">
  14.                             <VisualState x:Name="Normal"/>
  15.                             <VisualState x:Name="MouseOver">
  16.                                 <Storyboard>
  17.                                     <DoubleAnimation Duration="0" To="0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
  18.                                     <DoubleAnimation Duration="0" To="0.9" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
  19.                                     <PointAnimation Duration="0" To="0,0" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
  20.                                 </Storyboard>
  21.                             </VisualState>
  22.                             <VisualState x:Name="Disabled">
  23.                                 <Storyboard>
  24.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
  25.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
  26.                                     </ObjectAnimationUsingKeyFrames>
  27.                                     <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
  28.                                 </Storyboard>
  29.                             </VisualState>
  30.                         </VisualStateGroup>
  31.                         <VisualStateGroup x:Name="SelectionStates">
  32.                             <VisualState x:Name="Unselected"/>
  33.                             <VisualState x:Name="Selected">
  34.                                 <Storyboard>
  35.                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
  36.                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
  37.                                     </ObjectAnimationUsingKeyFrames>
  38.                                 </Storyboard>
  39.                             </VisualState>
  40.                         </VisualStateGroup>
  41.                     </VisualStateManager.VisualStateGroups>
  42.                     <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" RenderTransformOrigin="0.5,0.5">
  43.                         <ContentControl.RenderTransform>
  44.                             <CompositeTransform/>
  45.                         </ContentControl.RenderTransform>
  46.                     </ContentControl>
  47.                 </Border>
  48.             </ControlTemplate>
  49.         </Setter.Value>
  50.     </Setter>
  51. </Style>

A Browse Icon For Windows Phone 7 AppBar

October 19 2010

There’s a lot of great icons that ship with Blend for Windows Phone 7. But there isn’t a ‘browse’ icon, like a globe. So, @systim came to the rescue and made one for me. Perhaps others can use it. Here’s what it looks like:

browse

But don’t download that; you’ll want to grab the image below, because it is the transparent png in white that will work in either light or dark theme – clever how windows phone transforms the appbar icons to black on the fly!

Download icon

Conditional Logic During Start Up of a Windows Phone App

October 18 2010

Just managed to get myself into (and out of) a gnarly situation with Windows Phone. Here’s the scenario: I needed to execute some conditional logic to show different screens at start up in my Windows Phone app.  Basically, if the user was already logged in, bounce them to homepage; otherwise send them to the log in screen.

My first stab was to check for if they were logged in during the log-in screen and redirect them. Bad UX with that though: you can’t navigate until the NavigationService is available, which isn’t until the UI is loaded, which means the user briefly sees the login screen. Ugly.

Second stab was to add a page that simply displayed the splashscreen.jpg in which the conditional logic was executed.  So, I had a page with nothing but a splashscreen and then, in the OnNavigatedTo event, I checked to see if they were logged in.  Seemed to be working, until I discovered that the user could never navigate backward out of the app, because whenever they hit that page, the app attempted to navigated them forward. Lesson learned? Don’t add navigation logic to the OnNavigatedTo event or else backward navigation is hosed.

I then discovered Peter Torr’s excellent framework for redirecting an initial navigation.  I implemented this, which puts all this logic in the Navigating event of the application class. That solved my navigation problem, but introduced a new problem: because my application uses the Share Picker extensibility for Windows Phone, I needed access to the NavigationContext querystrings, provided by the static method that hangs off of the PhoneApplicationPage object. For the life of me, I couldn’t figure out how to access this class, since all you can get at is the PhoneApplicationFrame when in the application class.  But, then I learned that NavigationContext is just a wrapper around the URI and I could simply get the URI out of the NavigatingCancelEventArgs as e.Uri and process the querystrings myself.

Oh, one other thing to remember when messing around in the Navigating event: be sure to set e.Cancel to true or else your overridden navigation won’t ever happen.

AI->Canvas: Generating HTML5 canvas code from Adobe Illustrator

October 13 2010

Mike Swanson is the man when it comes to getting artwork out of Adobe Illustrator and into a format usable by the browser. His first go at this was the AI->XAML plug-in, a widely used plug-in by graphic designers building assets for WPF and Silverlight projects. Well, now he’s back with another plug-in, this time for the HTML5 <canvas> tag. It’s called (not surprisingly) AI->Canvas. Same idea, but even better, because he’s taken this one to the next level. Not only will he export the asset; he also has all these clever little macros that enable transformation and animation of the asset. Super sweet. There’s tons of great tutorials and documentation up at Mix Online on how to use it, so don’t be intimidated.

Oh, and a shout out to @Systim, who built all the lab pages for the AI->Canvas lab on Mix Online. View source and you’ll see all HTML5. Rad!

Windows Phone 7 XAML Design Templates

October 4 2010

Just got turned on to the Windows Phone 7 XAML Design Templates.  These are essential.  The Blend team have done the hard work to figure out all the common layout scenarios and provide templates for usage.  This makes doing layout for Windows Phone 7 apps brain dead easy. Love it.  Here’s a pic to give you a sense; video below.

mainandtemplates

Get Microsoft Silverlight
VSAchievements
Visual Studio Achievements
Karsten Januszewski (207 Points)