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

How to Create a Custom tile layout with the help of Usercontrol as image source

This is the sixth blog post of this series in which I am going to explain you how to create a custom tile layout with the help of User control as image source.

As we know Windows Phone has got some restrictions on what can be changed in a tile update. For example, on the primary tile you can only specify Title, Background Image, Count (can be only integer data type), Icon etc. But sometimes there may be situation that you need more than one counter on your tile, or you may need to change the position of icon.

The solution to this is to create a User Control and stream it to a bitmap image – then use this image as the background source for our tile (a User Control is a UI control made up of existing UI elements but with its own behavior – you can use it just like any other default controls available).

So in this article I will show how you can render virtually any custom tile layout. We shall be building a note making app in this following post.

1. First of all create a new project Usercontroltiles.

 

 

2. To create the following UI on the Mainpage.xaml.

 

 

Add the following code given below in the Grid named ContentPannel on Mainpage.xaml.

3. Now add two user controls having the name mediumcontrol and widecontrol in your solution.

Now you need to edit the following properties of both Usercontrols as given below a) Set the width and height of mediumcontrol as 336*336(medium tile size) and that of widecontrol as 691*336(wide tile size).

 

 

b) Remove the Background property attribute from the Layoutroot grid.

 

 

c) Add the following code given below in the LayoutRoot grid for both the controls.

 

 

For Medium control code is

For Wide control code is

4. Now we are ready to make customize tile with the templates defined above in the usercontrol. To pin the tile on Startscreen with a text note we need to follow the certain steps as given below. Step1: Get the textmessage to be written on tile from the messagebox textbox on Mainpage.xaml.

Step2: Create a user control instance of medium control and widecontrol with messageblock of both controls containing the text given in messagebox.

Step 3: Save the user control images in isolated storage. These image file will be later used as the background images of our tile.

Note

Every image should be stored in ShellContent directory and every image file for a tile should have a unique name in isolatedstorage. We will be using a function to generate a unique path file name for the images. The code for the following is given below.

If you have any doubts you can refer to the following post.
http://www.windowsapptutorials.com/windows-phone/how-to-create-secondary-tiles-on-windows-phone-start-screen-using-images-from-isolated-storage

Step 4: This is the final step where we will create a FlipTile. And then assign the backgroundimage attribute of this tile with the source of user control’s images.

Thus the code for the Click event handler of Pin button will be following comprising of the above four steps is given below.

Namespace required are

Code for the event handler is

5. Now run the application on emulator you will observe the following output.

Note

You can customize the tile layout according to your wish as I have done for the following post by adding new UI elements in usercontrols.

I hope this post will be helpful to you. You can download the full source project file from the link given below.

Download full source project file Usercontrols.zip