WindowsPhoneGeek Articles

Electric Effect on Windows Phone 7 using XNA

2012-04-08T18:30:08.0000000+03:00

Introduction

Electric effect, like other effects such as flame, smoke, explosion, is one of the most common visual effects used in game development. However, not too many examples are found, even fewer were proved ready for mobile application. So let's talk about how to "invent" one.

The image below shows the final electric effect implemented on Windows Phone 7 using XNA:

Download the source code here

You can also follow the project on Codeplex.

Abstraction of electric effect

At first, I reached out for Particle System. But after several days of work, I found it's not the right solution for an electric effect. Here's why:

Despite the complexity of a particle system, its core logic is all about spreading particles (sprites, or small glowing textures) in random directions, at random speeds, and sometimes including an environmental force in a fixed direction (gravity). Therefore a particle system is especially appropriate for effects such as flame, smoke, and explosion. There is one significant difference between flame and electric flow: points (particles) in a flame are distributed and move along radial direction, while points in an electric flow are distributed and move along a linear curve.

An electric flow can be abstracted as follows:

Each electric flow consists of a series of points. At any given moment, these points are distributed along a certain curve. The "wriggling" movement of an electric flow can be simulated by choosing a number of control points and moving them continually.

The figure below shows a blue line connecting the starting point and finishing point. The five red points are selected control points.

Try to imagine, at any certain moment, the five control points are located away from the original position by a random amount of distance, like this:

In the figure above, the red lines indicate the actual distribution of all points. Connecting control points using straight lines is the simplest approach, however, it doesn't feel realistic enough. We can improve it by applying different curve algorithms. The figure below shows the result of an electric flow using Catmull Rom function:

Notice: Catmull Rom function is included in XNA's Vector2 class. You can find more information about Catmull Rom algorithm here.

Further improvement

In order to make the effect more vivid, the movement of the control points should be constrained within certain ranges rather than being boundless:

In the figure above, translucent blue areas indicate the range of movement for the control points. Each control point starts from the original (center) position, and moves toward a certain direction (randomly picked at starting point), at a certain speed (also random). When it's going to move out of the range, the control point jumps back to the original position, and starts another round of random movement. By putting all these control points' wriggling movement together, we are able to simulate a realistic electric flow effect.

Tip:

You can also google for key words "Plasma Ball" and look at the animations, the electric curve bends to some extent and bounces back. That's why we are making the flow jump back from time to time.

Flicker effect

The wriggling movement is implemented, but we are not done yet. Take another look at the "Plasma Ball", you will find the electric flow not only wriggles, but also flickers. Here's a simple and quick solution: repeatedly change the opacity of the points. Unfortunately, human eyes are too sharp to trick, any mechanical repeat feels artificial to us. Therefore, we also need to update the points with different glowing point textures, randomly of course. The basic principle is that these textures should be slightly different from each other, otherwise the result can get "messy".

The "Windfall"

Thanks to the independent movement of the control points, there are always some points that are closer to each other, while others are loosely distributed. Such a diverse density produces smooth transition of luminance. What makes it even more interesting is that, during the wriggling movement, the unevenness of the luminance flows wildly back and forth, amusing our picky eyes.

Source code description

In the demo code, JasonElectricEffect project is a distributable Windows Phone 7 Library, in which:

ElectricEffect class is used to hold an electric effect, which may include one or more ElectricFlows.
ElectricFlow class, as its name implies, indicates an electric flow, which consists of a number of control points. These control points are described by ElectricNode class. Notice that though, ElectricNode class is used to describe control points only, not all the glowing points within the electric flow.
ElectricEffectType enum is used to specify the curve function that connects the control points, including: Line, Bezier and CatmullRom. Different curve functions generate different effects.
Density property of ElectricEffect class is used to specify the density of the glowing points that fill in between two adjacent control points.
LifeSpan property of ElectricFlow class is used to specify the interval at which the texture is changed.

For how to quickly generate an electric effect, please refer to InitElectricEffect() method in GamePage.xaml.cs in JasonElectricEffectDemo project.

Download the source code here

You can also follow the project on Codeplex.

LongListSelector walkthrough

2012-03-20T12:21:58.0000000+02:00

by JustAnotherAppDeveloper

Dedicated to Elizabeth

Welcome to the LongListSelector walkthrough! This covers the very basics of LongListSelector, and by the end you'll have a small enough codebase that you should be able to go back through each line of the code and figure out what it does. The basic half of the walkthrough takes around half an hour; the full walkthrough, less than two hours.
Oh, and by the way, your code should compile after each step. (And you should compile after every step to make sure you're still on track.)

Contents

Basic

A.Installing the Silverlight toolkit

B.Creating a project

C.Adding a reference to the Silverlight toolkit

D.Adding a LongListSelector

E.Making a model

F.Connecting the model and the LongListSelector

G.Adding jumplist functionality

Intermediate

H.Prettifying

I.Updating the LongListSelector at runtime

J.Doing something when the user taps an item

K.Touch feedback

L.Separating model and view

M.Leveraging the designer

N.Extra topic: Binding unrelated properties

Advanced

O.Advanced topic: Recovering from a tombstone

Installing the Silverlight toolkit

If you haven't already, download and install the Silverlight toolkit for Windows Phone from here.

Creating a project

2.Open Visual Studio 2010.

3. File -> New -> Project...

4. In the left pane, under "Visual C#", select "Silverlight for Windows Phone".

5. In the main center pane, select "Windows Phone Application" (top-most choice).

6. Give the project a name at the bottom, eg "LongListSelectorDemo", then click "OK".

7. Select "Windows Phone OS 7.1" as the target version, then click "OK".

The project will load up, and will look like this:

Adding a reference to the Silverlight toolkit

8. Project -> Add Reference...

9. Click on the "Browse" tab, then navigate to "C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Toolkit\Oct11\Bin". If you're on a 64-bit system, the "Microsoft SDKs" folder will be in "Program Files (x86)".

10. Click on "Microsoft.Phone.Controls.Toolkit.dll" to add the reference to the project.

11. Add the following line among the other xmlns declarations at the top of MainPage.xaml:
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Now your screen should look something like this:

Adding a LongListSelector

12. Add a LongListSelector in MainPage.xaml by adding this XAML within the ContentPanel:

<toolkit:LongListSelector Name="GroupedList">
</toolkit:LongListSelector>

So you should now see this:

13. Let's now tell the LongListSelector how to display items. Add this code within the LongListSelector tags we added in the last step:

<toolkit:LongListSelector.ItemTemplate>
	<DataTemplate>
		<TextBlock Text="{Binding Name}" />
	</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>

14. And we also want to see text for groups, so add this code in right below the ItemTemplate code:

<toolkit:LongListSelector.GroupHeaderTemplate>
	<DataTemplate>
		<TextBlock Text="{Binding Name}" FontSize="32" Foreground="Green" />
	</DataTemplate>
</toolkit:LongListSelector.GroupHeaderTemplate>

We've asked the group text to show up in green so we can differentiate it.

Now your screen should look something like this:

Making a model

15. In the Solution Explorer (Ctrl-Alt-L), right-click on the project name (*not* the item that says "Solution '<solution name>'"), Add -> New Folder. Name the folder Model.

16. In the Solution Explorer, right-click on "Model", Add -> New Item..., select "Class" from the dialog (should be sixth from the top), write in "FoodItem.cs" as the name, then click "Add".
Your screen should now look something like this:

17. And then add a Name property and a constructor to FoodItem like so:

public string Name { get; private set; }

public FoodItem(string foodName)
{
	Name = foodName;
}

18. One class done, one more to go! Create another class in Model, just like we did with FoodItem in step 15, but name this class FoodCategory.

19. Let's flesh out FoodCategory with a Name property, a List of FoodItems, a constructor, and a method to add items:

public string Name { get; private set; }
public System.Collections.Generic.List<FoodItem> Items { get; private set; }

public FoodCategory(string categoryName)
{
	Name = categoryName;
	Items = new System.Collections.Generic.List<FoodItem>();
}

public void AddFoodItem(FoodItem foodItem)
{
	Items.Add(foodItem);
}

So you should now see this:

20. In addition, FoodCategory needs to implement IEnumerable since it's the "group class" for the LongListSelector; this allows the LongListSelector to see the items within the group. So change this line:
public class FoodCategory
to this (to indicate the "implements" relationship):
public class FoodCategory : System.Collections.IEnumerable
And add the following method to FoodCategory:

public System.Collections.IEnumerator GetEnumerator()
{
	return this.Items.GetEnumerator();
}

Connecting the model and the LongListSelector

21. Almost there! In MainPage.xaml.cs, add the following method. This will populate the LongListSelector with our data when the app starts.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
{
	base.OnNavigatedTo(e);
	if (GroupedList.ItemsSource == null)
	{
		System.Collections.Generic.List<Model.FoodCategory> foodCategories =
				new System.Collections.Generic.List<Model.FoodCategory>();
		
		/*---Make burger items---*/
		Model.FoodCategory burgers = new Model.FoodCategory("Burgers");
		burgers.AddFoodItem(new Model.FoodItem("Hamburger"));
		burgers.AddFoodItem(new Model.FoodItem("Chicken burger"));
		burgers.AddFoodItem(new Model.FoodItem("Turkey burger"));
		burgers.AddFoodItem(new Model.FoodItem("Black bean burger"));

		/*---Make fryer items---*/
		Model.FoodCategory fryer = new Model.FoodCategory("Fryer");
		fryer.AddFoodItem(new Model.FoodItem("Fries"));
		fryer.AddFoodItem(new Model.FoodItem("Onion rings"));
		fryer.AddFoodItem(new Model.FoodItem("Tater tots"));
		fryer.AddFoodItem(new Model.FoodItem("Mozzarella sticks"));

		/*---Make fish items---*/
		Model.FoodCategory fish = new Model.FoodCategory("Fish");
		fish.AddFoodItem(new Model.FoodItem("Salmon"));
		fish.AddFoodItem(new Model.FoodItem("Rainbow trout"));
		fish.AddFoodItem(new Model.FoodItem("Grilled tilapia"));

		foodCategories.Add(burgers);
		foodCategories.Add(fryer);
		foodCategories.Add(fish);

		GroupedList.ItemsSource = foodCategories;
	}
}

22. Build and run your code! You should see this:

Adding jumplist functionality

We've made a LongListSelector, but nothing happens when the user taps on one of the group headers :( Let's fix that.

23. Go back to MainPage.xaml where we added the ItemTemplate and GroupHeader template. Add a GroupItemTemplate like so:

<toolkit:LongListSelector.GroupItemTemplate>
	<DataTemplate>
		<TextBlock Text="{Binding Name}" FontSize="32" Foreground="Green" />
	</DataTemplate>
</toolkit:LongListSelector.GroupItemTemplate>

(Yep, this is the same template we used for the GroupHeaderTemplate.)

24. Build and run your code! Now when you tap on a group header, you should see this:

This marks the end of the basic walkthrough. Make sure you understand everything up to this point; after this it gets more complicated.

Prettifying

By now you probably think I have no aesthetic sense (and I'm not denying it), so let's try to make things look a tad sleeker.

25. Change the innards of the ItemTemplate to this:

<DataTemplate>
	<TextBlock Text="{Binding Name}" Padding="{StaticResource PhoneTouchTargetOverhang}" 
			FontSize="{StaticResource PhoneFontSizeMediumLarge}" />
</DataTemplate>

26. Change the innards of the GroupHeaderTemplate to this:

<DataTemplate>
	<Border Background="{StaticResource PhoneAccentBrush}" 
			Padding="{StaticResource PhoneTouchTargetOverhang}">
		<TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextGroupHeaderStyle}"/>
	</Border>
</DataTemplate>

27. And change the innards of the GroupItemTemplate to this:

<DataTemplate>
	<Border Background="{StaticResource PhoneAccentBrush}" 
			Padding="{StaticResource PhoneTouchTargetOverhang}"
			Margin="{StaticResource PhoneTouchTargetOverhang}">
		<TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextGroupHeaderStyle}"/>
	</Border>
</DataTemplate>

28. (Optional: this might look worse to you) Now let's add a GroupItemsPanel below the GroupHeaderTemplate; this will arrange the group items in the "jump" view:

<toolkit:LongListSelector.GroupItemsPanel>
	<ItemsPanelTemplate>
		<toolkit:WrapPanel Orientation="Horizontal"/>
	</ItemsPanelTemplate>
</toolkit:LongListSelector.GroupItemsPanel>

29. Build and run your code! The app should now look like this:

Updating the LongListSelector at runtime

The LongListSelector works (and now looks) fine with the data we add in when the app starts. But if we try to add something while the app is running, the changes don't show up in the LongListSelector :(

(If you don't care about this, skip this section; it makes things more confusing)

30. Let's tackle the groups first. In OnNavigatedTo(), change foodCategories to a System.Collections.ObjectModel.ObservableCollection<Model.FoodCategory>. Now LongListSelector can "observe" the collection of food categories, so whenever we add a food category, the LongListSelector will update.

31. Now let's tackle the items. Currently FoodCategory implements IEnumerable; let's make FoodCategory inherit from ObservableCollection so whever we add a food item, LongListSelector is automatically notified of the change. Replace this line:
public class FoodCategory : System.Collections.IEnumerable
with this:
public class FoodCategory : System.Collections.ObjectModel.ObservableCollection<FoodItem>
and remove the Items property of FoodCategory and the line in the constructor that sets Items. Keep AddFoodItem() intact.
FoodCategory.cs should now look like this:

32. We're finished with the data binding part; let's add some data! In MainPage.xaml, place the LongListSelector inside a StackPanel. However, LongListSelector and StackPanel don't much like each other, so hardcode LongListSelector's Height as 535 (the more elegant solution is to create another Grid). Add a second StackPanel above the LongListSelector within the StackPanel we just added; set the Orientation property of this StackPanel to "Horizontal". Add a TextBox named BurgerInput to the horizontal StackPanel with a Height of 270. Below the TextBox (still within the horizontal StackPanel) add a Button with the text "add burger".
MainPage.xaml should look something like this:

33. We need to make foodCategories visible to the button's click event handler, so let's pull foodCategories into MainPage as an instance variable like so:

34. Now we're ready to make the button's event handler. Double-click on the button to generate it, then add these lines of code:

if (BurgerInput.Text != "")
{
	foodCategories[0].Add(new Model.FoodItem(BurgerInput.Text));
	BurgerInput.Text = "";
}

We're using ObservableCollection's Add() instead of the AddFoodItem() we made so that ObservableCollection can notify LongListSelector of the change.

35. Build and run your code! When you put "Steakburger" in the TextBox and click on the button, the app should look like this:

Doing something when the user taps an item

We've got a handy LongListSelector now, but the user can't interact with it besides adding an item. Let's tweak our app so the LongListSelector reacts when the user taps an item.

36. First off, add a Tap event to the LongListSelector. In the XAML, within the top LongListSelector XAML node next to its name, type in Tap=". Press tab and Visual Studio will automatically create the tap event handler.

37. In the tap event handler, add these lines:

if (GroupedList.SelectedItem is Model.FoodItem)
{
	MessageBox.Show("You tapped on the food item " + ((Model.FoodItem)GroupedList.SelectedItem).Name);
}

This triggers a popup whenever the user taps on an item (but not when the user taps on one of the group categories).

38. Build and run your code! When you tap on an item, the app should look like this:

Touch feedback

If you fiddle around in the People hub (where they have a grouped list), you'll notice that items "move" when you press them, as if the item is physically reacting to your touch. It's the little things like this that make Windows Phone so appealing to its users. Let's mimic this in our LongListSelector.

39. Find the TextBlock within the LongListSelector's ItemTemplate, and add a ManipulationStarted and a ManipulationCompleted event handler (like we did for the Tap event) to the TextBlock. ManipulationStarted is fired when the user starts pressing an object, and ManipulationCompleted is fired when the user stops pressing the object.
MainPage.xaml should look something like this now:

40. Add this code to the ManipulationStarted event handler to shift the item down and to the right by 2 pixels when the user presses it:

((UIElement)sender).RenderTransform = new System.Windows.Media.TranslateTransform() { X = 2, Y = 2 };

41. Then add this code to the ManipulationCompleted event handler to shift the item back to its original spot when the user stops pressing it:

((UIElement)sender).RenderTransform = null;

42. Build and run your code! When you tap on an item, before you let go the app should look like this:

(You can't really tell that I've tapped "Hamburger" from the screenshot; this one you have to see in action.)

Separating model and view

In our simple LongListSelector, both the view and the model code are in MainPage. Let's put a controller class in charge of the interaction between the view and the model.

43. In the Solution Explorer (Ctrl-Alt-L), right-click on the project name, Add -> New Folder. Name the folder Controller.

44. In the Solution Explorer, right-click on "Controller", Add -> New Item..., select "Class" from the dialog (should be sixth from the top), write in "FoodController.cs" as the name, then click "Add".

45. Add the following code into FoodController. (For the curious, this is an implementation of the Singleton design pattern.)

private static FoodController foodController;

public static FoodController GetInstance()
{
	if (foodController == null)
	{
		foodController = new FoodController();
	}
	return foodController;
}

46. Then add a FoodCategories property to the FoodController by adding this line:

public System.Collections.ObjectModel.ObservableCollection<Model.FoodCategory>
		FoodCategories { get; private set; }

47. Add this method into FoodController so the user can still add burger items:

public void AddBurgerItem(string name)
{
	FoodCategories[0].Add(new Model.FoodItem(name));
}

48. Now for the main jump: create a constructor for FoodController, and move all of the data initialization (currently in MainPage's OnNavigatedTo()) into the constructor.
FoodController should now look something like this:

49. Replace the code in MainPage's button click event handler with this:
Controller.FoodController.GetInstance().AddBurgerItem(BurgerInput.Text);
Then replace the code in MainPage's OnNavigatedTo() with this:

base.OnNavigatedTo(e);
if (this.DataContext == null)
{
	this.DataContext = Controller.FoodController.GetInstance();
}

And now you can (and should) remove MainPage's foodCategories variable.
After all that, MainPage.xaml.cs should look like this:

Make *sure* your code compiles at this point!

50. Now let's add the last link: in MainPage.xaml, find the LongListSelector tag, and add ItemsSource="{Binding FoodCategories}". This tells the LongListSelector to find its items in the FoodCategories property of its Binding - in this case, its Binding is inherited from the DataContext of MainPage, which we've set to be the FoodController instance. MainPage.xaml should look something like this:

51. Build and run your code! If everything went as planned, the app's behavior should be the exact same as before.

Leveraging the designer

So far when we view MainPage.xaml in Visual Studio, the designer on the left side doesn't show anything for the LongListSelector. Let's try to make something useful show up so it's easier to fine-tune the looks.

52. Create a new folder (like before) and name it SampleData. Add a new XML file named SampleFoodData.xml. Go to SampleFoodData's properties (right-click on SampleFoodData -> Properties) and set its Build Action to Resource.

53. Add this code in SampleFoodData.xml; we're essentially making a FoodController in XML:

<controller:FoodController
    xmlns:controller="clr-namespace:LongListSelectorDemo.Controller">

</controller:FoodController>

(If you didn't name the project LongListSelectorDemo, replace it with the project name).

54. In MainPage.xaml, add this line to the first XAML element:
d:DataContext="{d:DesignData SampleData/SampleFoodData.xml}"
This is the equivalent of this.DataContext = Controller.FoodController.GetInstance(); for the designer.

55. Build your code! Without even running the app, the designer in Visual Studio should show your LongListSelector, like so:

Extra topic: Binding unrelated properties

Let's say we want to italicize all vegetarian items in our app. We'll store the "vegetarian-ness" of each item in a boolean, but how do we translate that into a font style? Use a converter!

56. First off, let's add an IsVegetarian property on FoodItem, right below Name. Tweak the constructor to take in a Boolean paramater and use it to set the IsVegetarian property. Then go to FoodController's constructor and mark things as vegetarian, or not. Also tweak AddBurgerItem() to make added burger items non-vegetarian. FoodItem and FoodController should now look something like this:

57. Let's make a converter. Add a folder named Converter to the project, and add a class called VegetarianFormattingConverter to that folder.

58. Make VegetarianFormattingConverter implement System.Windows.Data.IValueConverter, and add these two methods to complete the implementation:

public object Convert(object value, Type targetType, 
		object parameter, System.Globalization.CultureInfo culture)
{
	return null;
}

public object ConvertBack(object value, Type targetType, 
		object parameter, System.Globalization.CultureInfo culture)
{
	return null;
}

59. Replace the code in Convert() with this code:

bool vegetarian = (bool)value;
if (vegetarian) return FontStyles.Italic;
else            return FontStyles.Normal;

This code simply says we want vegetarian things italicized and everything else normal. The converter should look like this:

60. Now that we have a converter class, we need to put a converter somewhere accessible by the MainPage's XAML. Let's add an instance of the converter to MainPage's resource dictionary. First add this line underneath the toolkit declaration line we added in MainPage.xaml:

xmlns:converter="clr-namespace:LongListSelectorDemo.Converter"

Then add these lines in MainPage.xaml above the LayoutRoot code to put the converter in the page's resources so we can later access the converter using the StaticResource syntax:

<phone:PhoneApplicationPage.Resources>
	<converter:VegetarianFormattingConverter x:Key="VegetarianConverter" />
</phone:PhoneApplicationPage.Resources>

61. Let's use our converter! In MainPage.xaml, find the TextBlock corresponding to each item (it'll be in the ItemTemplate). Add this line to the TextBlock XAML element:

FontStyle="{Binding IsVegetarian, Converter={StaticResource VegetarianConverter}}"

MainPage.xaml should look something like this:

62. Build and run your code! If everything worked, the app should look like this:

(You may have noticed the designer already showed the changes before running the app.)

Advanced topic: Recovering from a tombstone

What in the world is tombstoning? On Windows Phone, there are 3 states an app can be in: running, dormant, and tombstoned (link). Running is what you'd expect; the app is actually doing something. Dormant is when the user goes off and does something else; the 5 most recently used apps stay in main memory (hold down the back button to see them; this is called Fast App Switching). But if the phone is running low on memory, the operating system starts tombstoning dormant apps; this is similar to swapping out a process to hard disk on computer operating systems. When an app is tombstoned, it loses just about all of the data in its variables.
The user can still access a tombstoned app by tapping the back button until they've entered the app again. The user expects the app to look the same as when they left it.
From a developer's standpoint, the trick is to make the app appear as if nothing changed, when nearly everything was demolished and rebuilt.

63. Let's test the app to see if it already tombstones correctly. Go to Project -> LongListSelectorDemo Properties... -> Debug (one of the tabs on the left). Check "Tombstone upon deactivation while debugging."

64. Press F5 to start debugging the app. Once the app has loaded, add a Steakburger, and enter "Flamethrower" in the TextBox (but don't press the button!). Then press the phone's start button, and after a few seconds (5 is enough), press the back button. "Resuming..." should flash on the screen before the app reappears (if you don't see the resuming text make sure the tombstone box has been checked in the Debug properties).

The app shows up and the list is populated, but our steakburger has disappeared, and the text in the TextBox is gone :( Let's fix this.
Tombstoning is usually fairly straightforward, but we'll have to go through some contortions to get our food categories to save and restore correctly.
Let's tackle the easy one first to get our feet wet: the text in the TextBox. There are two main spots to save and restore state. At the page level, save state in OnNavigatedFrom() and restore state in OnNavigatedTo(). At the app level, save state in Application_Deactivated() and restore state in Application_Activated(). The TextBox's text is only relevant at the page level, so let's tweak OnNavigatedFrom() and OnNavigatedTo().

65. Add the OnNavigatedFrom method to MainPage.xaml.cs:

protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
{
	// if the user is navigating backwards, there's no way to return to this page instance
	if (e.NavigationMode != System.Windows.Navigation.NavigationMode.Back)
	{
		State["CustomBurgerText"] = BurgerInput.Text;
	}
}

This saves the text in the page's State dictionary, which is automatically saved and restored by the operating system, even if a tombstone occurs.

66. And now let's add the corresponding restore. Add this code to the end of MainPage's OnNavigatedTo method:

if (State.ContainsKey("CustomBurgerText"))
{
	BurgerInput.Text = (string)State["CustomBurgerText"];
}

Now if you run the app, input text, then tombstone (like before), the text looks untouched!

67. On to the tougher stuff! We'll need to save and restore food data, but the program doesn't know how to save a FoodItem instance. Change the Name and IsVegetarian properties of FoodItem to be publicly settable so the program can restore them automatically (do this by changing private set; to just set;).

68. Then add a reference to "System.Runtime.Serialization". (Similar to how we added a reference to the Toolkit, except you should find the dll in the .NET tab instead of browsing for it.) Now we can add [System.Runtime.Serialization.DataContract] just above public class FoodItem. Similarly add [System.Runtime.Serialization.DataMember] just above both the Name property and the IsVegetarian property. These markers tell the app that we want FoodItem to be serializable ("save-able"), and specifically we want Name and IsVegetarian to be serialized ("saved").
FoodItem.cs should now look like this:

Now the app knows how to save a FoodItem!

69. On to FoodCategory! As-is, FoodCategory looks like a collection, so if we try to save and restore it, we only get the list part of the FoodCategory back (the Name will disappear). So we need to make a separate class that contains the collection and the Name instead of itself looking like a collection.
In FoodCategory.cs, add the following code to make an inner class:

public class FoodCategory_SerializationWrapper
{
	public string Name { get; set; }
	public System.Collections.Generic.IList<FoodItem> FoodItems { get; set; }
}

70. Now we need a way to get a FoodCategory into its wrapper form. Add this method to FoodCategory to generate a wrapper:

public FoodCategory_SerializationWrapper ToWrapper()
{
	return new FoodCategory_SerializationWrapper() { Name = this.Name, FoodItems = this.Items };
}

71. We also need to generate a FoodCategory from the wrapper object, so add this method to the wrapper class:

public FoodCategory Unwrap()
{
	FoodCategory foodCategory = new FoodCategory(this.Name);
	foreach (FoodItem foodItem in this.FoodItems)
	{
		foodCategory.AddFoodItem(foodItem);
	}
	return foodCategory;
}

After all that, FoodCategory.cs should look like this:

72. When we restore the food data, we'll have a collection of FoodCategorys and nowhere to put it. Let's add this method on FoodController so we can generate a FoodController with the given collection:

public static void CreateInstance(
		System.Collections.ObjectModel.ObservableCollection<Model.FoodCategory> foodCategories)
{
	if (foodController == null)
	{
		foodController = new FoodController() { FoodCategories = foodCategories };
	}
}

(For those who noticed this is inefficient, feel free to optimize it :) )

73. Let's start bringing all the pieces together. Open App.xaml.cs and add this code in Application_Deactivated:

List<Model.FoodCategory.FoodCategory_SerializationWrapper> foodCategoriesToBeSaved =
	   new List<Model.FoodCategory.FoodCategory_SerializationWrapper>();
foreach (Model.FoodCategory foodCategory in Controller.FoodController.GetInstance().FoodCategories)
{
	foodCategoriesToBeSaved.Add(foodCategory.ToWrapper());
}
PhoneApplicationService.Current.State["FoodCategories"] = foodCategoriesToBeSaved;

This wraps each food category and saves it to the app-wide State dictionary. Like each page's State dictionary, the app-wide State dictionary is automatically saved and restored by the operating system.

74. And for the final step, add this code in Application_Activated:

System.Collections.Generic.IDictionary<string, object> State = PhoneApplicationService.Current.State;
List<Model.FoodCategory.FoodCategory_SerializationWrapper> foodCategoriesSaved =
		(List<Model.FoodCategory.FoodCategory_SerializationWrapper>)State["FoodCategories"];

System.Collections.ObjectModel.ObservableCollection<Model.FoodCategory> foodCategories =
		new System.Collections.ObjectModel.ObservableCollection<Model.FoodCategory>();
foreach (Model.FoodCategory.FoodCategory_SerializationWrapper wrapper in foodCategoriesSaved)
{
	foodCategories.Add(wrapper.Unwrap());
}

Controller.FoodController.CreateInstance(foodCategories);

This code retrieves the saved food data, unwraps each category, and then creates a FoodController with the restored (and unwrapped) data.

75. Build and test your code! (Make sure the tombstoning box is checked in the project properties!) If everything went as planned, any custom burgers you add should still be there after a tombstone :)

This is just one method of many to recover from a tombstone in an app that contains a grouped LongListSelector. As always, weigh the pros and cons of various approaches before choosing one. For example, if your LongListSelector contains a lot of data, you want to consider maintaining a SQL database and immediately updating the database when the user adds data instead of writing out all of the data to disk during the app lifecycle methods.

Congrats, now you know a whole ton about LongListSelectors, from data binding to touch feedback to tombstone handling! Hopefully you learned a lot; send any feedback (positive or negative) to JustAnotherAppDeveloper<at>live<dot>com. Happy coding!

P.S. The source code is

here

(zip file).

The source assumes you have the Windows Phone 7.1 SDK and the Oct/Nov Silverlight toolkit.

Windows Phone Local Database Schema Upgrade Part1 - Adding new columns

2012-02-20T13:50:01.0000000+02:00

by WindowsPhoneGeek

In this article I am going to talk about how to update your database schema when updating your app. The problem is that if you change the database schema(for.ex: add new columns or tables) in a future version of your app, then when users that use the old version of your app update to the new one an exception occurs. So in practice if there is no additional code to change the database so that it is compatible with the latest version of the app the following exception occurs:

So in this series of posts I will explain how to prevent this exception from happening.

To begin with lets first create a new Windows Phone application project, next follow the steps.

Step1. Add a new class Person to the project with the following properties:

[Table(Name = "People")]
public class Person
{
    [Column(IsPrimaryKey = true, IsDbGenerated = true)]
    public int ID
    {
        get;
        set;
    }

    [Column(CanBeNull = false)]
    public string FirstName
    {
        get;
        set;
    }

    [Column(CanBeNull = true)]
    public string LastName
    {
        get;
        set;
    }

    [Column(CanBeNull = false)]
    public int Age
    {
        get;
        set;
    }
    public override string ToString()
    {
        return string.Format("{0} {1}, Age: {2}",
            this.FirstName, this.LastName, this.Age);
    }
}

Step2. Next add a new class PeopleDataContext to the project which will be our data context:

public class PeopleDataContext : DataContext
{
    public PeopleDataContext(string connectionString)
        : base(connectionString)
    {
    }

    public Table<Person> People
    {
        get
        {
            return this.GetTable<Person>();
        }
    }
}

Step3. Next we will add a new button that will be used to initialize the database:

private void btnInitialize_Click(object sender, RoutedEventArgs e)
{
    using (PeopleDataContext context = new PeopleDataContext(ConnectionString))
    {
        if (!context.DatabaseExists())
        {
            // create database if it does not exist
            context.CreateDatabase();
            this.WritePeople(context);
        }
    }
}

Where WritePeople is the following method:

public void WritePeople(PeopleDataContext context)
{
    for (int i = 0; i < 10; i++)
    {
        Person person = new Person()
        {
            FirstName = string.Format("FirstName#{0}", i),
            LastName = string.Format("LastName#{0}", i),
            Age = i
        };
        context.People.InsertOnSubmit(person);
    }
    context.SubmitChanges();
}

public void WritePeople()
{
    using (PeopleDataContext context = new PeopleDataContext(ConnectionString))
    {
        this.WritePeople(context);
    }
}

Step4. We will add one more button that we will use to read the data from the database(this is only for testing purposes to prove that the database is functioning properly):

private void btnReadPeople_Click(object sender, RoutedEventArgs e)
{
    this.lbPeople.ItemsSource = this.ReadPeople();
}

public IEnumerable<Person> ReadPeople()
{
    IEnumerable<Person> people = null;
    using (PeopleDataContext context = new PeopleDataContext(ConnectionString))
    {
        people = context.People.ToList();
    }

    return people;
}

NOTE: All that the above code does is read the Person records from the database and show them in a ListBox.

Step5. If we run the application now and press the initialize button and after that the read people button we should see the following screen.I.e. this is the first version of our database:

Step6. For the next version of our app we will update the Person class with two additional properties:

NOTE: It is important to notice that in the snippet below the Address and the Email properties are added in the second version of the schema.

[Table(Name = "People")]
public class Person
{
   //...

#if DB_VERSION_1
    [Column(CanBeNull = true)]
    public string Address
    {
        get;
        set;
    }

    [Column(CanBeNull = true)]
    public string Email
    {
        get;
        set;
    }
#endif

    public override string ToString()
    {
#if DB_VERSION_1
        return string.Format("{0} {1}, Age: {2}, Email: {3}",
            this.FirstName, this.LastName, this.Age, this.Email);
#else
        return string.Format("{0} {1}, Age: {2}",
            this.FirstName, this.LastName, this.Age);
#endif
    }
}

NOTE: We will use the DB_VERSION_1 conditional compilation symbol in order to turn on code related to the second version of the database schema.

To turn the sections of the code marked with the DB_VERSION_1 symbol just add it to the conditional compilation symbols in the project`s Build properties:

Step7. If we were to run the application now without writing any additional code we will get the following exception:

To prevent this from happening we will add some code to update the database schema to include the Address and Email columns. Here is how our initialize database method should look like now:

private void btnInitialize_Click(object sender, RoutedEventArgs e)
{
    using (PeopleDataContext context = new PeopleDataContext(ConnectionString))
    {
        if (!context.DatabaseExists())
        {
            // create database if it does not exist
            context.CreateDatabase();
            this.WritePeople(context);
        }
        else
        {
            // create an instance of DatabaseSchemaUpdater
            DatabaseSchemaUpdater schemaUpdater = context.CreateDatabaseSchemaUpdater();
            // get current database schema version
            // if not changed the version is 0 by default
            int version = schemaUpdater.DatabaseSchemaVersion;

            // if current version of database schema is old
            if (version == 0)
            {
                // add Address column to the table corresponding to the Person class
                schemaUpdater.AddColumn<Person>("Address");
                // add Email column to the table corresponding to the Person class
                schemaUpdater.AddColumn<Person>("Email");
                // IMPORTANT: update database schema version before calling Execute
                schemaUpdater.DatabaseSchemaVersion = 1;
                // execute changes to database schema
                schemaUpdater.Execute();
            }
        }
    }
}

What will happen when the application is ran is the following:

for an updated application, since the database probably already exists the code in the else branch will execute. Here we create a new instance of the DatabaseSchemaUpdater class. Then we retrieve the current version of the database schema and if it is the older version we update the schema with the new columns, increase the schema version and execute the schema changes.
for a newly installed application a new database will be created

Step8. To verify that the schema upgrade code works properly we will add a new button and will use the new properties added with the second version of the database schema:

private void btnUpdatePeople_Click(object sender, RoutedEventArgs e)
{
#if DB_VERSION_1
    using (PeopleDataContext context = new PeopleDataContext(ConnectionString))
    {
        // for version 1 - update people records with email address
        List<Person> people = context.People.ToList();
        int count = people.Count;
        for (int i = 0; i < count; i++)
        {
            Person person = people[i];
            person.Email = string.Format("person{0}@domain.com", i);
        }
        context.SubmitChanges();
    }
#endif
}

Step9.Finally if we run the application and press the Initialize, Update and Read buttons we should see the following screen:

That`s it for now. In the next article we will discuss more complex changes to the database schema. Stay tuned.

You may also find helpful the following articles:

Here is the full source code:

WPLocalDBUpdateP1.zip

Hole the post was helpful.

Programmatically changing Visual States of HubTile controls used as ListBox Items

2012-02-07T13:22:22.0000000+02:00

by WindowsPhoneGeek

In this post I am going to talk about how to programmatically change the visual states of a HubTile control inside a ListBox(or any ItemsControl).

NOTE: For more information about the HubTile control take a look at:

We will use as a base a previous article that looks at the simpler case of changing the visual state of a single HubTile control: http://www.windowsphonegeek.com/articles/How-to-Programmatically-switch-the-HubTile-Visual-States

So let`s create a new Windows Phone application project and add a reference to Microsoft.Phone.Controls.Toolkit.dll.

Step1. First we will add a ListBox control and will place a HubTile control inside its ItemTemplate. Next we will add 4 buttons that will be used to change the Visual State of the HubTile control to: Expanded, Semiexpanded, Flipped and Collapsed correspondingly.

NOTE: "toolkit" namespace is defined in the page class in this way:

<phone:PhoneApplicationPage
x:Class="HubTileDemo.MainPage"
...
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit">

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="auto"/>
    </Grid.RowDefinitions>

    <!--ContentPanel - place additional content here-->
    <ListBox Grid.Row="0" x:Name="listBox">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <toolkit:HubTile GroupTag="ListTiles" Background="Green" Source="wpglogo.png" Title="Hold Here" Message="This is HubTile message!" Margin="10"/>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0" Orientation="Vertical">
            <Button x:Name="btnGoToExpanded" Content=" Go To Expanded State" Click="btnGoToExpanded_Click" />
            <Button x:Name="btnGoToSemiexpanded" Content="Go To Semiexpanded State" Click="btnGoToSemiexpanded_Click" />
            <Button x:Name="btnGoToFlipped" Content="Go To Flipped State" Click="btnGoToFlipped_Click" />
            <Button x:Name="btnGoToCollapsed" Content="Go To Collapsed State" Click="btnGoToCollapsed_Click" />
    </StackPanel>
</Grid>

Step2. Next we will set a dummy data source to the ListBox control in order to show some hub tiles:

public MainPage()
{
    InitializeComponent();

    // use a dummy data source, just to get some tiles displayed in the list box
    this.dataSource = new List<string>() { "item1", "item2", "item3" };
    this.listBox.ItemsSource = this.dataSource;
}

Step3. From a previous article we will use a method to find a visual child of a given type:

NOTE: For reference take a look at: http://www.windowsphonegeek.com/tips/how-to-access-a-control-placed-inside-listbox-itemtemplate-in-wp7

private T FindFirstElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject
{
    var count = VisualTreeHelper.GetChildrenCount(parentElement);
    if (count == 0)
        return null;

    for (int i = 0; i < count; i++)
    {
        var child = VisualTreeHelper.GetChild(parentElement, i);

        if (child != null && child is T)
        {
            return (T)child;
        }
        else
        {
            var result = FindFirstElementInVisualTree<T>(child);
            if (result != null)
                return result;

        }
    }
    return null;
}

Step4. Next, we will use that method to find the HubTile control that corresponds to a given data item in a bound list box control:

private void ChangeTileState(ItemsControl itemsControl, object dataItem, string state)
{
    DependencyObject containerElement = itemsControl.ItemContainerGenerator.ContainerFromItem(dataItem);
    HubTile hubTile = this.FindFirstElementInVisualTree<HubTile>(containerElement);
    if (hubTile != null)
    {
        VisualStateManager.GoToState(hubTile, state, true);
    }
}

Step5. We will also create an overload of the above method to set the visual state of all hub tiles in a list box control:

private void ChangeTileState(ItemsControl itemsControl, string state)
{
    IEnumerable itemsSource = itemsControl.ItemsSource;
    if (itemsSource == null)
    {
        return;
    }
    foreach (object dataItem in itemsSource)
    {
        this.ChangeTileState(this.listBox, dataItem, state);
    }
}

Step6. Finally, we can implement the button handlers using the ChangeTileState method in order to switch between different Visual States(Expanded, Semiexpanded, Flipped and Collapsed ):

private void btnGoToExpanded_Click(object sender, RoutedEventArgs e)
{
    string expandedStateName = "Expanded";
    this.ChangeTileState(this.listBox, expandedStateName);
}

private void btnGoToFlipped_Click(object sender, RoutedEventArgs e)
{
    string flippedStateName = "Flipped";
    this.ChangeTileState(this.listBox, flippedStateName);
}

private void btnGoToCollapsed_Click(object sender, RoutedEventArgs e)
{
    string collapsedStateName = "Collapsed";
    this.ChangeTileState(this.listBox, collapsedStateName);
}

private void btnGoToSemiexpanded_Click(object sender, RoutedEventArgs e)
{
    string semiexpandedStateName = "Semiexpanded";
    this.ChangeTileState(this.listBox, semiexpandedStateName);
}

That was all about how to programmatically change the visual states of a HubTile control placed inside a ListBox(or any ItemsControl). The full source code is available here:

ListBoxHubTileVisualStates

I hope that the article was helpful.

You may also find interesting the following resources:

MetroGrid component for Windows Phone

2012-02-02T13:52:25.0000000+02:00

by Rudi Ferrarin

In this article, based and inspired by Jeff Wilcox metrogridhelper, I would like to show you how I modified the base Grid control class so it can show me the "metro squares" at design time inside Visual Studio editor.

Step1: lets create a custom control, named metroGrid, which derives from System.Windows.Controls.Grid

using System.ComponentModel;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;


namespace wp7Library
{
    public class metroGrid : Grid
    {
    }
}

Step3: add a protected member of type Brush which we'll use to store the actual design background of the grid so we can restore it when we hide the metro squares

 protected Brush oldBrush;

Step4: add some dependencyproperites which will define how the metrogrid squares will look like (visibility, padding, square size, square h/v distance from each other, square color, properties callbacks)

[Category("Metro Guides")]
[Description("Show/Hides grid Metro guides")]
public bool MetroVisible
{
    get { return (bool)GetValue(MetroVisibleProperty); }
    set { SetValue(MetroVisibleProperty, value); }
}  
 
[Category("Metro Guides")]
[Description("Padding")]
public Thickness MetroPadding
{
    get { return (Thickness)GetValue(MetroPaddingProperty); }
    set { SetValue(MetroPaddingProperty, value); }
}

[Category("Metro Guides")]
[Description("Horizontal spacing")]
public int HSpacing
{
    get { return (int)GetValue(HSpacingProperty); }
    set { SetValue(HSpacingProperty, value); }
}
 
[Category("Metro Guides")]
[Description("Vertical spacing")]
public int VSpacing
{
    get { return (int)GetValue(VSpacingProperty); }
    set { SetValue(VSpacingProperty, value); }
}
 
[Category("Metro Guides")]
[Description("Rectangle width")]
public int RectWidth
{
    get { return (int)GetValue(RectWidthProperty); }
    set { SetValue(RectWidthProperty, value); }
}

[Category("Metro Guides")]
[Description("Rectangle height")]
public int RectHeight
{
    get { return (int)GetValue(RectHeightProperty); }
    set { SetValue(RectHeightProperty, value); }
}

[Category("Metro Guides")]
[Description("Rectangle color")]
public Color RectColor
{
    get { return (Color)GetValue(RectColorProperty); }
    set { SetValue(RectColorProperty, value); }
}

public static readonly DependencyProperty MetroVisibleProperty = DependencyProperty.Register("MetroVisible", typeof(bool), typeof(metroGrid), new PropertyMetadata(false, OnMetroGuidesVisiblePropertyChanged));
public static readonly DependencyProperty MetroPaddingProperty = DependencyProperty.Register("MetroPadding", typeof(Thickness), typeof(metroGrid), new PropertyMetadata(new Thickness(24, 24, 0, 0), OnMetroGuidesPropertyChanged));

public static readonly DependencyProperty HSpacingProperty = DependencyProperty.Register("HSpacing", typeof(int), typeof(metroGrid), new PropertyMetadata(12, OnMetroGuidesPropertyChanged));
public static readonly DependencyProperty VSpacingProperty = DependencyProperty.Register("VSpacing", typeof(int), typeof(metroGrid), new PropertyMetadata(12, OnMetroGuidesPropertyChanged));

public static readonly DependencyProperty RectWidthProperty = DependencyProperty.Register("RectWidth", typeof(int), typeof(metroGrid), new PropertyMetadata(25, OnMetroGuidesPropertyChanged));
public static readonly DependencyProperty RectHeightProperty = DependencyProperty.Register("RectHeight", typeof(int), typeof(metroGrid), new PropertyMetadata(25, OnMetroGuidesPropertyChanged));

public static readonly DependencyProperty RectColorProperty = DependencyProperty.Register("RectColor", typeof(Color), typeof(metroGrid), new PropertyMetadata(Color.FromArgb(255, 255, 0, 0), OnMetroGuidesPropertyChanged));

Step5: add the property callback for the MetroVisibleProperty which will show/hide the metro squares and will save/restore the proper design background for the grid

private static void OnMetroGuidesVisiblePropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
    metroGrid grid = sender as metroGrid;

    if (grid.MetroVisible)
        grid.oldBrush = grid.Background;
    else
    {
        grid.Background = grid.oldBrush;
    }  

    grid.ShowMetroGuides();
}

Step6: add the only property callback for all the others dependencyproperties which will just redraw the squares properly

private static void OnMetroGuidesPropertyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
    metroGrid grid = sender as metroGrid;
    grid.ShowMetroGuides();
}

Step7: this is the method the grid uses for checking if squares need to be drawed

private void ShowMetroGuides()
{
    if (DesignerProperties.IsInDesignTool && this.MetroVisible)
        this.Background = CreateMetroBackground();
}

Step8: and this is the method who actually draws the squares based on the propertydependencies we defined before

private Brush CreateMetroBackground()
{
    Canvas canvas = new Canvas();
    canvas.Width = this.ActualWidth;
    canvas.Height = this.ActualHeight;  

    for (double top = this.MetroPadding.Top; top < canvas.Height; top += this.HSpacing + RectHeight)
        for (double left = this.MetroPadding.Left; left < canvas.Width; left += this.VSpacing + RectWidth)
        {
            Rectangle rect = new Rectangle();
            rect.Width = RectWidth;
            rect.Height = RectHeight;
            rect.Fill = new SolidColorBrush(RectColor);
            rect.SetValue(Canvas.LeftProperty, left);
            rect.SetValue(Canvas.TopProperty, top);
            rect.IsHitTestVisible = false;

            canvas.Children.Add(rect);
        }

    var wb = new WriteableBitmap(canvas, null);
    var brush = new ImageBrush();
    brush.ImageSource = wb;

    return brush;
}

Step9: override the OnApplyTemplate method

public override void OnApplyTemplate()
{
    base.OnApplyTemplate();

    ShowMetroGuides();
}

Step10: now just create a new application page and change the main grid with the fresh metroGrid and you should see something like this in your Visual Studio

Step11: enabling the MetroVisible check the grid will now look like this

You can then change the Metro Guides parameters as you may whish.

Here is the full source code:

MetroGrid

I hope this post will be helpful.

Feel free to contact me for any suggestion / thoughts

Getting latest Tweets in Windows Phone apps using Twitter REST API and JSON.NET

2012-01-31T10:55:56.0000000+02:00

by WindowsPhoneGeek

In this article I am going to talk about using the Twitter Rest API and JSON.NET in Windows Phone apps to show the latest 10 tweets from a particular Twitter account.

Before we begin, make sure that you have took a look at the Twitter Rest API Documentation:

https://dev.twitter.com/docs/api/1/get/statuses/user_timeline

Is short we will use the following uri to get winphonegeek's latest tweets:

https://api.twitter.com/1/statuses/user_timeline.json?trim_user=true&screen_name=winphonegeek&count=10

The above url returns data about tweets in JSON format that looks like this:

{
    possibly_sensitive: false,
    in_reply_to_screen_name: "@WPAppInfo",
    truncated: false,
    retweeted: false,
    in_reply_to_user_id: 171279759,
    in_reply_to_status_id_str: null,
    coordinates: null,
    in_reply_to_user_id_str: "171279759",
    user: {
        id_str: "198796409",
        id: 198796409
    },
    id_str: "164047529783209984",
    place: null,
    geo: null,
    contributors: null,
    source: "web",
    retweet_count: 0,
    favorited: false,
    id: 164047529783210000,
    in_reply_to_status_id: null,
    text: "tweet text",
    created_at: "Mon Jan 30 18:09:13 +0000 2012"
}

We will also use Json.NET: a popular free high-performance JSON framework for .NET available on CodePlex. To summarize we will use Json.NET to deserialize (read) the Json formatted Twitter data into .NET objects.

Step1. Add reference to "Newtonsoft.Json.dll" from Json.NET

Step2. Next, we will create a simple class that will be used to deserialize the Twitter data into objects.

public class Tweet
{
    public string Text
    {
        get;
        set;
    }

    [JsonProperty("created_at")]
    public string CreatedAt
    {
        get;
        set;
    }

    public string Source
    {
        get;
        set;
    }

    [JsonProperty("retweet_count")]
    public int RetweetCount
    {
        get;
        set;
    }
}

NOTE: You will also have to add the following using statement:

using Newtonsoft.Json;

Step3. After that, we will add a ListBox and a button to the MainPage.xaml

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    
    <ListBox x:Name="lbTweets">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Text}" TextWrapping="Wrap" />
                    <TextBlock Text="{Binding CreatedAt}" Style="{StaticResource PhoneTextSubtleStyle}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    
    <Button x:Name="btnRefreshTweets" Grid.Row="1" 
            Content="Refresh tweets"
            Click="btnRefreshTweets_Click"/>
</Grid>

Step4. Finally, in the button click event handler, we start an async download using the above url to download the latest Twitter data:

private void btnRefreshTweets_Click(object sender, RoutedEventArgs e)
{
    string winPhoneGeekTweetsUrl = @"https://api.twitter.com/1/statuses/user_timeline.json?trim_user=true&screen_name=winphonegeek&count=10";

    WebClient webClient = new WebClient();
    webClient.DownloadStringCompleted += new DownloadStringCompletedEventHandler(webClient_DownloadStringCompleted);
    webClient.DownloadStringAsync(new Uri(winPhoneGeekTweetsUrl));
}

NOTE: In the above string URl "screen_name" is the name of the Twitter account that you want to get data for and "count" is the number of the tweets you want to get.

Step4. When the download completes, we use JSON.NET to deserialize the json data into a list of Tweet object and set it as the items source of the list box.(NOTE: Tweet is the class created in Step2 above):

void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
    if (e.Error != null)
    {
        return;
    }
    List<Tweet> tweets = JsonConvert.DeserializeObject<List<Tweet>>(e.Result);
    this.lbTweets.ItemsSource = tweets;
}

Step5. That`s it. just build and run the project to see the result:

Here is the full source code:

WPJsonSample.zip

I hope that the post was helpful.

How to get the Tapped Item in a MultiselectList control

2012-01-19T00:25:14.0000000+02:00

by WindowsPhoneGeek

In this article I am going to talk about how to get a reference to the item that has been tapped in a MultiselectList. At first look this task may look pretty simple but in fact it is not. The problem here is that the SelectedItems collection is empty when the MultiselectList is not in a selection mode.

To begin with, lets first create a new Windows Phone application project and add the necessary reference to the Windows Phone Toolkit. For more information about the MultiselectList control, take a look at the previous in depth posts:

Step1: Add a MultiselectList control to your page:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <toolkit:MultiselectList x:Name="multiselectList">
        
    </toolkit:MultiselectList>
</Grid>

where "toolkit" is the following included namespace:

<phone:PhoneApplicationPage     
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Step2: Add the following code to create a data source for the multi-select list:

public class ListItem
{
    public string Title
    {
        get;
        set;
    }

    public string SubTitle
    {
        get;
        set;
    }
}

public IEnumerable<ListItem> CreateListItem()
{
    List<ListItem> listItems = new List<ListItem>();
    int count = 10;
    for (int i = 0; i < count; i++)
    {
        ListItem listItem = new ListItem()
        {
            Title = string.Format("Item {0} title", i),
            SubTitle = string.Format("Item {0} sub-title", i)
        };
        listItems.Add(listItem);
    }

    return listItems;
}

Next set the data source in this way:

// Constructor
public MainPage()
{
    InitializeComponent();

    // set data source
    this.multiselectList.ItemsSource = this.CreateListItem();
}

Step3: Add the following MultiselectList ItemTemplate and bindings:

<toolkit:MultiselectList x:Name="multiselectList" toolkit:TiltEffect.IsTiltEnabled="True">
    <toolkit:MultiselectList.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical" Margin="0,5,0,5">
                <TextBlock Text="{Binding Title}" Style="{StaticResource PhoneTextTitle3Style}" />
                <TextBlock Text="{Binding SubTitle}" Style="{StaticResource PhoneTextSmallStyle}"/>
            </StackPanel>
        </DataTemplate>
    </toolkit:MultiselectList.ItemTemplate>
</toolkit:MultiselectList>

Step4: Subscribe to the MultiselectList Tap event:

public MainPage()
{
    InitializeComponent();
    //...

    // subscribe to Tap event
    this.multiselectList.Tap+=new EventHandler<System.Windows.Input.GestureEventArgs>(multiselectList_Tap);
}

Step5: Add the following code inside the tap handler:

void multiselectList_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    if (this.multiselectList.IsSelectionEnabled)
    {
        // do not show message box if in selection mode
        return;
    }

    DependencyObject tappedElement = e.OriginalSource as UIElement;
    // find parent UI element of type MultiselectItem
    MultiselectItem tappedItem = this.FindParentOfType<MultiselectItem>(tappedElement);
    ListItem selectedItem = null;
    if (tappedItem != null)
    {
        // DataContext contains reference to data item
        selectedItem = tappedItem.DataContext as ListItem;
    }

    // if selected data item is not null
    if (selectedItem != null)
    {
        // then multiselect list item was tapped - show message box
        MessageBox.Show(string.Format("Item with title '{0}' was tapped", selectedItem.Title));
    }
}

The tap handler above, uses the FindParentOfType method from the snipped below. This method uses the VisualTreeHelper class to find a parent UI element of a particular type given a starting element.

private T FindParentOfType<T>(DependencyObject element) where T : DependencyObject
{
    T result = null;
    DependencyObject currentElement = element;
    while (currentElement != null)
    {
        result = currentElement as T;
        if (result != null)
        {
            break;
        }
        currentElement = VisualTreeHelper.GetParent(currentElement);
    }

    return result;
}

Step6: That's it, build and run the project.

Here is the full source code:

MultiselectListTap

I hope that the post was helpful.

Windows Phone Application Icons and Tiles

2012-01-11T14:36:54.0000000+02:00

by Janos Gergely

In this article I will show you the icons what you need for publishing Silverlight for Windows Phone applications to the marketplace.

This information is not a big secret (you can find it: Msdn Application Artwork) but every time I submit a new application to the marketplace I have to find out the meaning of the icons. The icons filename are not mandatory but for easy understanding I use the default names.

Application Tiles

Application tiles are the main icons. This show your application on the list of installed applications on the phone.

You must set the icons size to the predefined size. Transparent background is changed to match the theme color of the phone.

ApplicationIcon.png

Image size: 62x62 pixels

File type: png

Property build action: Content

This icon is represent your application in the list of the installed applications on the phone.

You can change the icon from the default one on the project properties page.

Or you can replace the icon file name in the WMAppManifest.xml file. When you set project properties you editing the WMAppManifest.xml file.

Background.png

Image size: 173x173 pixels

File type: png

Property build action: Content

This icon represents your application on the start screen of the phone. The phone user can pin an application tile to the start screen.

Transparent background is replaced with the phone theme color (red). The phone writes some information in from of the icon, so keep enough place for text messages.

You can change the icon from the default one on the project properties page.

Or you can replace the icon filename in the WMAppManifest.xml file.

Marketplace tiles

Marketplace tiles represent your application on marketplace catalog on the phone and on the PC. This is the most important point of your application because customer see this icons when browsing the catalog before buying it.

You must set the icons size to the predefined size. Transparent background doesn't look well on the marketplace catalog.

You upload the icons to the marketplace when you submit the application.

SmallAppTile.png

Image size: 99x99 pixels

File type: png

LargeAppTile.png

Image size: 173x173 pixels

File type: png

MarketplaceTile.png

Image size: 200x200

File type: png

Visual Studio Marketplace Test Kit has a capability to check this icons. Open the Marketplace Test Kit (in release configuration) and on the Application Details page upload the icons to the test kit.

Run the Iconography test on the Automated Test page and see the result.

Screenshots

You must upload one or more screenshots to the marketplace. Customer can see this screenshots when browsing the catalog.

The easiest way to take screenshots is to use the phone emulator capture tool.

Image size: 480x800

File type: png

Save up to eight screens.

Splash Screen Image

This image isn't necessary for your application. If you have this image you have more time to initialize the application at startup time. Without a splash screen image your application must start very fast.

The filename must be 'SplashScreenImage.jpg' because the OS displays this file before starting the application. This file is part of the xap package file.

SplashScreenImage.jpg

Image size: 480x800

File type: jpeg

Property build action: Content

There are other techniques to make animated splash screen but it's more difficult and need more CPU time on the phone.

Build

After all you build the application and the xap package file contains the application icons.

Getting Started with Coding4Fun Button Controls

2012-01-11T14:33:15.0000000+02:00

by WindowsPhoneGeek

In this article I am going to talk about the Coding4fun Toolkit button controls in details. I will explain everything about the main features, available public API, and will give lots of examples in different scenarios.

NOTE: About an year ago we posted the "WP7 RoundToggleButton and RoundButton in depth" article, however this post is not relevant any more since things have changed significantly during the last few releases of the toolkit!

Basically Coding4Fun toolkit offers RoundButton and RoundToggleButton controls. RoundToggleButton is an UI component that derives from CheckBox and exposes several additional dependency properties. As its name says it is some kind of extended toggle button with round shape and automatic inverted image support. RoundButton is a kind of extended button which derives from Button, has a round shape and offers automatic inverted image support.

Getting Started

To begin using RoundButton and RoundToggleButton first add a reference to the Coding4Fun.Phone.Controls.dll assembly.

NOTE: You can download this assembly from here: Coding4Fun Toolkit .

The next step is to add the "c4f" prefix declaration. Make sure that your page declaration includes the "c4fToolkit" namespace:

xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

The sample code should looks like:

<c4f:RoundButton/>
<c4f:RoundToggleButton/>

Key Properties

The RoundToggleButton control derives all properties and events from the CheckBox class. The RoundButton control derives all properties and events from the Button class.

Content

This property comes from the parent class and is used to set the content of the RoundToggleButton / RoundButton.

Both button controls expose the following additional public properties:

ImageSource

ImageSource is a dependency property of type ImageSource. It gets or sets the Image of the RoundToggleButton / RoundButton controls.

Orientation

Orientation is a dependency property of type Orientation. It gets or sets the content orientation of the RoundToggleButton / RoundButton.

Examples

In the below examples we will use the following two icons:

NOTE: Icons will automatically change appropriately in Light theme, you do not need to do anything else!

Example1: RoundButton sample usage

This example demonstrates how to set the common RoundButton properties.Just add the following code in the XAML part of your page:

<StackPanel Orientation="Horizontal">
    <c4f:RoundButton
                    FontSize="18"
                    Content="OK"
                    BorderBrush="CornflowerBlue" />
    <c4f:RoundButton
                    FontSize="48"
                    Content="48"
                    Background="CornflowerBlue" />
    <c4f:RoundButton 
                    Foreground="CornflowerBlue"
                    FontSize="36"
                    Content="36" />
    <c4f:RoundButton 
                    ImageSource="Images/appbar.delete.rest.png"
                    Content="Delete" />
</StackPanel>

Here is how the result should look like in Dark and Light themes:

Example2: RoundButton Orientation and ImageSource usage.

<c4f:RoundButton 
Orientation="Horizontal"
ImageSource="Images/appbar.feature.search.rest.png" 
Content="horizontal text" />

Example3. RoundToggleButton sample usage

This example demonstrates how to set the common RoundToggleButton properties. Just add the following code in the XAML part of your page:

<StackPanel Orientation="Horizontal">
    <c4f:RoundToggleButton
                FontSize="18"
                Content="ok"
                BorderBrush="CornflowerBlue" />
    <c4f:RoundToggleButton
                FontSize="48"
                Content="48"
                Background="CornflowerBlue" />
    <c4f:RoundToggleButton 
                Foreground="CornflowerBlue"
                FontSize="36"
                Content="36" />
    <c4f:RoundToggleButton 
                ImageSource="Images/appbar.delete.rest.png"
                Content="DELETE" />
</StackPanel>

Example4: RoundToggleButton Orientation and ImageSource usage.

<c4f:RoundToggleButton 
Orientation="Horizontal"
ImageSource="Images/appbar.feature.search.rest.png" 
Content="horizontal text" />

Example5: RoundButton and RoundToggleButton disable.

<c4f:RoundButton 
x:Name="btn"
IsEnabled="False"
Orientation="Horizontal"
ImageSource="Images/appbar.delete.rest.png"
Content="disabled button" />

That was all about the RoundButton /RoundToggleButton controls from the Coding4fun Toolkit in depth. You can find the full source code here:

C4FButtons

I hope that the article was helpful.

Advanced ApplicationBar for Windows Phone

2012-01-03T13:16:12.0000000+02:00

by Sheriev Akhmed

I have released an AdvancedApplicationBar library recently, enhancing the standard ApplicationBar in WP7.
It's a wrapper over the standard ApplicationBar which adds DataBinding support, Visibility property and Panorama / Pivot elements support.

Supporting DataBinding, ICommand, Visibility

<Sh:AdvancedApplicationBar>
    <Sh:AdvancedApplicationBarIconButton 
        IsEnabled="{Binding AppBarIconButtonEnabled}"
        Text="{Binding AppBarIconButtonText}"
        IconUri="{Binding IconUri}"
        Click="AdvancedApplicationBarIconButton_Click"
        />

    <Sh:AdvancedApplicationBarIconButton 
        Text="{Binding AppBarIconButtonText}"
        IconUri="{Binding AppBarIconButtonText}"
        Visibility="{Binding Visibility}"
        Command="{Binding DeleteCommand}"
        CommandParameter="42"
        />
    <Sh:AdvancedApplicationBarIconButton 
        Text="static text"
        IconUri="/Images/appbar.feature.settings.rest.png"
        />
    <Sh:AdvancedApplicationBarMenuItem Text="MenuItemTxt" />
</Sh:AdvancedApplicationBar>

Supporting Panorama/Pivot

In order to show some elements in specific Panoram tabs only, you just have to move Buttons and Menu Elements into that Tab.
The elements that should be shown before the Panoram/Pivot buttons, should be placed before the Panoram element in XAML.

<Grid x:Name="ContentPanel">
  <Sh:AdvancedApplicationBarIconButton ... />
      <controls:Panorama>
          <controls:PanoramaItem>
              <Grid>
                   ...
                   <Sh:AdvancedApplicationBarIconButton .../>
                  <Sh:AdvancedApplicationBarIconButton ... />
                  <Sh:AdvancedApplicationBarMenuItem ... />
              </Grid>
          </controls:PanoramaItem>
          <controls:PanoramaItem>
              <Grid>
                  <Sh:AdvancedApplicationBarIconButton ... />
              </Grid>
          </controls:PanoramaItem>
      </controls:Panorama>
   <Sh:AdvancedApplicationBar>
       <Sh:AdvancedApplicationBarIconButton ... />
   </Sh:AdvancedApplicationBar>
</Grid>

How to use:
- Download the library here: http://shwp.codeplex.com/releases/view/76914
- Add reference to "sh.dll" to your Project
- Add namespace in your Page:

xmlns:Sh="clr-namespace:Sh;assembly=Sh"

Attention: This library wraps the ApplicationBar, it does not substitute it.
AdvancedApplicationBar should be placed inside the main Panel (usually a Grid).

<Grid x:Name="ContentPanel">
   <Sh:AdvancedApplicationBar . />
</Grid>

Demo Video:

Download sample code here