Buttons in Listbox–WP7

Its really wonderful and dynamic to have a button associated with every element of listbox. This is really advantageous if you running short of screen space (often the case in phone applications).

This is an extension of data binding techniques.But how do we know which element’s button is tapped because while defining the button using binding we give a single event handler. One more constraint not in many cases we will not know the number of items in the listbox. So lets see what can be done about this.

Prerequisites:

• You should be aware of the data binding techniques in WP7. If not please read my blog post on data binding to listbox in wp7
• You should have basic understanding of wp7 app development
• You should have the Windows phone 7 SDK installed

Here I am going to start from the point where I assume you have done data binding as I said in my data binding blog post. If not I would recommend you to download the source code from my previous blog and start off with that or if you are a Pro start of with from scratch.
Now in the listbox.itemtemplate tag I where we have add elements to define the structure of an item, add a button at the last in the textgrid. The code is
<Button Name="hello" Margin="0,100,0,0" Height="70" Content="Tap" />
Now select the button and goto the properties, select the events tab, and double click on the field besides the click ( Basically create an event handler for the click ). You will be redirected to the C# page. Come back to the XAML page. You should see the code of the button modified as follows..
<Button Name="hello" Margin="0,100,0,0" Height="70" Content="Tap" Click="hello_Click" />
Now the entire code of the item template will look something like this.
<ListBox Height="373" HorizontalAlignment="Left" Name="listBox1" VerticalAlignment="Top" Width="439" Margin="0,41,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="-200,0,0,0" Name="masterpanel">
<StackPanel Width="100" Height="100" Margin="0,0,0,0" Name="imagepanel">
<Image Source="pic.png" Stretch="Fill" />
</StackPanel>
<Grid Margin="300,-100,0,0" Name="textgrid">
<TextBlock Text="{Binding name}" FontSize="25" Foreground="Gold"/>
<TextBlock Text="{Binding phone}" Margin="0,50,0,0" FontSize="25" Foreground="Gold"/>
<Button Name="hello" Margin="0,100,0,0" Height="70" Content="Tap" Click="hello_Click" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>


Alright. But still I have not told you the solutions for the constraints Lets get to that now. There is a property called the TAG associated with many elements and its also present for button. Now we are going to use this to know from which element the button was tapped.

As we can see first lets bind some data to the tag property. The data should be such that it should be unique to every element. Here I am going to bind the name. When I tap the button I will get a message displaying the name.
So first lets add Tag="{Binding name}" to the XAML code of the button. So the button code should be looking like this.
<Button Name="hello" Margin="0,100,0,0" Height="70" Content="Tap" Click="hello_Click" Tag="{Binding name}"/>

Now in the event handler where you add the items to the listbox and bind them ( in the previous blog post example it should be the event handler for the add button), the moment you add the tag gets associated with the button of that item.Here since I am using name that is already used in textblock the code is same. However if you would like to add something else make sure you add the property and make necessary modifications in the XAML code.

Now the next step is to retrieve the tag. Now this syntax is the key thing of the entire process. In the event handler hello_Click use the following code to retrieve the tag.
string name = (string)((Button)sender).Tag;
Basically we are typecasting the object sender into a button since its called from a button click and accessing the tag property and type cast the output to a string and then store it in the variable name.

Now we have retrieved the tag. Next step is to process and get the required output. Here my aim is restricted to just displaying the name of the item I call
So I am going to write the following code
MessageBox.Show("The name of the item you tapped is " + name);
So the event handler function hello_Click should have this code:
string name = (string)((Button)sender).Tag;
MessageBox.Show("The name of the item you tapped is " + name);

So that’s it. Launch the application tap on the button in every item and notice the output.

You can download the source code from here.

Posted in: Windows Phone 7(WP7)