Pass data from User Control to Parent page in Windows Phone 8.1

While using User Controls in Windows Phone, we often get into a situation where we need to pass some kind of data from the user control to the parent page, when any operation is performed on the user control. Delegates can be used to pass data from the User Control to the Parent page. We reference C# Corner’s article to apply the same logic in Windows Phone 8.1

Step 1: Create a User Control

Firstly, we create an User Control with a button in it.

Step 2: Declare a delegate on the User Control

Create a delegate on the user control, that can encapsulate a method that takes no input and returns a DateTime type.

Step 3: Create an event on the User Control

Declare an event on the user control, that is of the delegate type that we created.

Step 4: Using User Control in the Parent Page

Next, we use the User Control in our MainPage.xaml.

Step 5: Subscribe to the User Control event in the Parent Page

Our main page will subscribe to the event that we created on the user control, to get notification of when the event is fired on the user control.

Step 6: Execute the Event Explicitly in the User Control

Next, when the button click functionality is done, we explicitly execute the event by calling the GetDataFromChild event, passing the required data.

Run the application and click the button. On the clicking of the button, when we make the explicit call to the event from the user control, the parent page receives the notification through the UChild_GetDataFromChild method.

User_Control_Data_Passing.zip

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. 😀