Wrap Grid with Variable Sized Items for Windows Phone 8.1

In this tutorial I will show you how to wrap variable sized ListView Items in Windows Phone 8.1. This is how our end product looks.

.wrap_grid

Here are the steps:

Step 1: Create a custom WrapGrid

Firstly we would be creating a custom WrapGrid by overriding MeasureOverride and ArrangeOverride methods of Panel. So we have added a new class WrapPanel in our project under Controls folder.
controls_folder

The WrapGrid class to be added is as follows.

Step 2: Define ItemsPanelTemplate

We will be defining the ItemsPanelTemplate for the ListView to be used. Define this as local resources.

Step 3: Define DataTemplate for the ListView

Next we arbitrarily define a DataTemplate for the ListView which we are using. Define this as local resources.

Step 4: Define ListView Style

For our convenience and for allowing reusability we will be defining a Style for our ListView as local resource.

Step 5: Add a ListView in MainPage.xaml

Next, we add a ListView in our MainPage.

Step 6: Add a AddItems method to populate items.

We call this function in the OnNavigatedTo event handler to set the ItemSource of our ListView.

That’s it. Try running the app in the emulator and see the magic for yourself. Download the full source code for your reference.

Windows Phone 8.1/Windows 10 WinRT

Download full project Wrap Grid 8.1

Windows Phone 8.1 Silverlight

Code for implementing it in Windows Phone 8 is quite similar. You can grab the following project if you are working on Windows Phone 8 or Windows Phone 8.1 Silverlight.

Download full project Wrap Grid WP8

Implementing Tab View in Windows Phone 8.1 or Windows 10

In this tutorial I will show you how to implement a tab view using Pivot Items in Windows Phone 8.1 WinRT app or Windows 10 app using just a few lines of codes.

first_tab

If you are developing for Windows Phone 8 or Windows Phone 8.1 Silverlight then follow this article:
http://windowsapptutorials.com/windows-phone/ui/how-to-implement-tab-view-in-windows-phone-8/

We will use a StackPanel for the tabs and bind its Background property to the SelectedIndex of the Pivot, converting it to a desired color using a Converter. Here are the steps:

Step 1: Add a Pivot in your MainPage.xaml

Firstly we add a Pivot with two Pivot Items.

Step 2: Add a StackPanel for the Tabs

Add a StackPanel for the tabs and bind its Background property to the SelectedIndex of the HomePagePivot.

Next, we will define the converter which we are using to convert the SelectedIndex to a corresponding color. Also we pass the tab number(0, 1, 2…) as a converter parameter.

Step 3: Define a Index to Color Converter

We will use this converter to changed the selected tab’s background to a different color.

If the selected index matches with the tab index then the background is set to DarkGray otherwise we set it to Gray.

Step 4: Add a Reference to the Converter in MainPage.xaml

Next we add a reference to the converter in our MainPage.xaml and use it.

Step 5: Add Tap Event Handler to the StackPanels

We need to add a Tap event handler to change the selected PivotItem when one of the tabs are tapped. This can be done by using the following code.

Try running the app in the emulator and it should work perfectly.

Download the full project source for your reference.

Download full project TabViewWP8-1.zip

Cheers to Chayan for sharing the source code. 😀

How to Implement Tab View in Windows Phone 8

In this tutorial I will show you how to implement a tab view using Pivot Items in Windows Phone 8 or Windows Phone 8.1 Silverlight app using just a few lines of codes.

first_tab

If you are developing for Windows Phone 8.1 or Windows 10 then follow this article.
http://windowsapptutorials.com/windows-phone-8-1/ui-windows-phone-8-1/implementing-tab-view-in-windows-phone-8-1-or-windows-10/

We will use a StackPanel for the tabs and bind its Background property to the SelectedIndex of the Pivot, converting it to a desired color using a Converter. Here are the steps:

Step 1: Add a Pivot in your MainPage.xaml

Step 2: Add a StackPanel for the Tabs

Add a StackPanel for the tabs and bind its Background property to the SelectedIndex of the HomePagePivot.

Next, we will define the converter which we are using to convert the SelectedIndex to a corresponding color. Also we pass the tab number(0, 1, 2…) as a converter parameter.

Step 3: Define a Index to Color Converter

We will use this converter to changed the selected tab’s background to a different color.

If the selected index matches with the tab index then the background is set to DarkGray otherwise we set it to Gray.

Step 4: Add a Reference to the Converter in MainPage.xaml

Next we add a reference to the converter in our MainPage.xaml and use it.

Step 5: Add Tap Event Handler to the StackPanels

We need to add a Tap event handler to change the selected PivotItem when one of the tabs are tapped. This can be done by using the following code.

Try running the app in the emulator and it should work perfectly.

Download the full project source for your reference.

Download full project TabViewWP8.zip

Cheers to Chayan for sharing the source code. 😀

Falling Snow Animation in Windows Phone 8

In the Christmas and Holiday season most developers write Christmas apps. So in this article I will show you how to implement a simple falling snow animation effect which you can use in order to make your application look cooler. Here’s a demo,

Here’s how it can be done,

Step 1: Add a Canvas to your Page

Create a new Windows Phone 8 project and a canvas to it. Replace the existing ContentPanel Grid with this Canvas.

Step 2: Add function to Generate Snow

We will use ellipse elements in order to imitate snowflakes but you can use any another UIElement. In code behind we add a function GenerateEllipse to generate ellipses of small size. You way define a range for height and width to randomize the snowflakes’ size.

Step 3: Create a Story Board Animation for Canvas

The next step is to create the Storyboard animation which will animate Canvas.Left and Canvas.Top properties of the Canvas child elements to a particular double value. 

Step 4: Add Logic for Snowfall Animation

We use speed and radius variables in order to define the speed with which the snowflakes fall and how wide the radius of their oscillation will be. Also the opacity is set to something random, giving it a semitransparent look.  When the event occurs, it means that there is a frame of visuals available to render to the Silverlight content surface. Refer to this MSDN article to learn more about Rendering.

Step 5: Call Snowfall animation function on Initialization

And finally the last step is to call the StartFallingSnowAnimation method after InitializeComponent.

An amazing article by kirupa helped us write the tutorial to implement falling snow animation.

That’s it. Run the app in the emulator and it should work perfectly. Download the source code and use it as reference. Merry Christmas!

Download Falling-Snow.zip

Facebook like Hamburger Menu on Windows Phone 8

The Hamburger menu bar is quite popular among developers. This tutorial shows how you can build if for your Windows Phone 8 app. There’s an awesome library that lets us do this easily. This library contains many controls inspired by the official Facebook app on Windows Phone.

https://slideview.codeplex.com/

We will be working with a Windows Phone 8.1 XAML app for this tutorial but it can be implemented in a WP 8 app also. Here’s how,

Step 1: Install SlideView library using Nuget

Install the SlideView library that provides a SlideView control inspired by the official Facebook app using Nuget package manager. If you need help installing the library refer to,

How to integrate a Toolkit or Third party SDK with windows phone app using NuGet Package Manager

Step 2: Set your app’s RootFrame to SlideApplicationFrame

If you want a SlideView already packaged with a main panel + 2 side panels, you can use the SlideApplicationFrame. The other benefit from it is the navigation occuring only on the main panel. In App.xaml add the following code for SlideApplicationFrame control.

Here’s the code you need to add to App.xaml.

Note: You can set the SlideView‘s header or choose to hide it.

Next at the top of your app’s App.xaml.cs declare a RootFrame variable.

Add a BuildFrame function that returns a RootFrame of SlideApplicationFrame type.

In the OnLaunched event handler add the code to set the new root frame.

The final OnLaunched event handler looks similar to this,

Tip: Download our project source code for see where exactly to put the code pieces in App.xaml.cs.

Step 3: Add User Controls for Left View and Right View

The hamburger menu has a left view and right view that appears when someone swipes left or right from the main panel. Create a new folder Pages and add two user controls to it. RightView.xaml and LeftView.xaml. Note that these two pages are set as the left content and the right content of the SlideApplicationFrame. Put some content in these user controls. Just design the left and right views as you wish and put the main content in MainPage.xaml.

We have put a Button which when clicked, navigates you to the Main Panel.

Note: You can choose to hide either the left view or the right view from SlideApplicationView‘s properties.

That’s it. Run the app in the emulator and it should work perfectly. Download the source code and use it as an reference.
Download Hamburger-menu.zip