by ·Comments Off on Windows Phone App : Truth or Dare

Hi,

 

Have a look at latest windows phone application that i developed for a client.

 

This application makes uses of Accelerometer feature available on Windows Phone.

 

 

The source code of the application will be made available on demand and could also be customized if needed.

 

Any comments and feedback are most welcome.

by ·2 Comments

I saw a question on stackoverflow.com about theme management in a Silverlight application. As I stated in my answer, there’s no specific API to manage a theme like you know it in Windows. However you have the concept of ResourceDictionnary. Yesterday I posted a link to a video from Microsoft showing different applications with very different “themes”. So you have some liberties from the minimalist UI of Windows Phone 7. But how can you change the default color while still following the guidelines of Microsoft? You can modify the styles provided in the SDK. In the folder “C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Design” you will find several XAML files:

ThemeResource.xaml contains the basic Color, SolidColorBrush and TextBlock resources. You can copy/paste this file in your application and reference it in the App.xaml to override specific styles.

System.Windows.xaml has the styles for controls like Button, CheckBox, etc. Again you can use it to override the look and feel of the widgets.

Finally, there is one folder for each of the 10 “accent” colors (blue is the default) for both the light and dark themes (the operator can provide a 11th color).

 

This is a sample with the default dark theme :

1    <Application.Resources>
2    <ResourceDictionary>
3        <ResourceDictionary.MergedDictionaries>
4            <ResourceDictionary Source="Resources/Styles.xaml"/>
5                   </ResourceDictionary.MergedDictionaries>
6    </ResourceDictionary>
7    </Application.Resources>

In the Styles.xaml file you have a copy of the content of ThemeResource.xaml file from the SDK :

1    <ResourceDictionary
2      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4      xmlns:System="clr-namespace:System;assembly=mscorlib">
5
6     <Color x:Key="PhoneForegroundColor">#000000</Color>
7     <Color x:Key="PhoneBackgroundColor">#D2D9AE</Color>
8    (...)
9    </ResourceDictionary>

 

And now the look and feel of your application is customized.

One important notice: even though if you can override all the controls’ styles you should keep an eye on the implicit contract imposed by the platform i.e. the “Metro” UI guidelines. For example, it’s probably a bad idea to change the appearance of the default Button because your users will look after a particular widget in the page to save, confirm, send, etc.

Please Feelo Free To contact me and please do comment, I need them for sure.

by ·Comments Off on Tutorial ( WP7 ) : ViewStateManger / States / Behaviours in a Windows Phone 7

Alright guys i am back with a new concept in Windows Phone 7 ( WP7 ) which is ViewStateManager. It is a really important concept for understanding visual states associated with them. If you want to create different states for your custom control then we would have to use Visual State Manager.

If you have the solution from my previous post then you can continue with it or you can download the solution here.

We will a few custom states and also learn about behaviours in this post.

  •  Now open CompanyLocations.xaml in expression blend. Drag four TextBlock controls onto the design surface, two for the headers and two for the details and then lay them out similar to the following snapshot.
Location Details

Location Details

  • Lets add a little more fun to this. Add two more textblock rotated at 90 degree and move the location details of the screen and also increase the font size of the headings as in the image below.
Text Rotation

Text Rotation

  • Now let’s go to the top left of expression blend where we have states and lets create new state group. Click on the Add State Group button and name the state group as LocationStates. Now add two new states namely CorporateState and SatalliteState. Now your state group should look something loke the screenshot below:

  • Now select CorporateState to start recording for that state which you can verify by seeing the red dot at the top right of the design surface. Now this will record any changes to the state as compared to the base state. Layout the CorporateState as shown in the image below:

 

CorporateState

CorporateState

  •  Layout for the SatelliteState is shown below:
SatelliteState

SatelliteState

  • Now lets switch back to the initial state and that any changes we make will affect all the states.
  • Now lets include behavior to bind these states to action. So now in your assets window search for GoToStateAction and drag and drop it to both the CorporateOffice and SatelliteOffice text.
GoToStateAction

GoToStateAction

  •  Now change the name to the GoToStateAction to the appropriate statename.