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 Detect if Battery Saver is Currently Enabled on Windows Phone 8

To detect when Battery Saver is enabled you must check the PowerManager.PowerSavingModeEnabled property. Because this property is only available for devices running Windows Phone 8 Update 3, you must access this property via reflection after checking the device OS version. The following example shows you how to detect if Battery Saver is currently enabled.