How to access a Control placed inside ListBox ItemTemplate in WP7

In this post I am going to talk about how to access a Control inside the ListBox ItemPanelTemplate/DataTemplate in Silverlight for WP7.

Question: How to access/modify a specific Control placed inside ListBox ItemTemplate/DataTemplate?

When you have a data bound control, lets say for example ListBox we usually add some custom DataTemplate. So sometimes you try to access and modify any element inside DataTemplate.

Answer: Actually you can this by using the VisualTreeHelper which provides utility methods that can used to traverse object relationships (along child object or parent object axes) in the Silverlight for WP7 visual tree.

To begin with lets create a sample Windows Phone 7 project , add a data bound to a collection of strings ListBox with the following ItemsTemplate and ItemsPanel:

<ListBox x:Name="list"> 
    <ListBox.ItemTemplate> 
        <DataTemplate> 
            <StackPanel> 
                <ToggleButton x:Name="btnToggle"/> 
                <CheckBox x:Name="cbx"/> 
                <TextBlock Text="{Binding}"/> 
            </StackPanel> 
        </DataTemplate> 
    </ListBox.ItemTemplate> 
</ListBox>

1 2	`List<string> dataSource =` `new` `List<string> {"Item1","Item2","Item3"` `};` `this.list.ItemsSource = dataSource;`

How to Access a specific Control placed inside ListBox ItemsTemplate

Here is how you can implement a Generic method that can find the first element from any particular type inside the Visual Tree:

Example1: Use a Generic method to find first element of particular type:

private T FindFirstElementInVisualTree<T>(DependencyObject parentElement) where T : DependencyObject 
{ 
    var count = VisualTreeHelper.GetChildrenCount(parentElement); 
    if (count == 0) 
        return null; 
  
    for (int i = 0; i < count; i++) 
    { 
        var child = VisualTreeHelper.GetChild(parentElement, i); 
          
        if (child != null && child is T) 
        { 
            return (T)child; 
        } 
        else
        { 
            var result = FindFirstElementInVisualTree<T>(child);  
            if (result != null) 
                return result; 
            
        } 
    } 
    return null; 
}

Sample usage:

We will first get an instance of the second Listbox item using ItemContainerGenerator. (Note that we have to use ItemContainerGenerator because our ListBox is databound!). Next we will find the CheckBox control which is inside the ListBox itema and will set its IsChecked property to true:

ListBoxItem item = this.list.ItemContainerGenerator.ContainerFromIndex(2) as ListBoxItem; 
CheckBox tagregCheckBox = FindFirstElementInVisualTree<CheckBox>(item); 
tagregCheckBox.IsChecked = true;

Example2: Use a simple method to find first element of a particular type that meets a condition:

private void SearchVisualTree(DependencyObject targetElement) 
{ 
    var count = VisualTreeHelper.GetChildrenCount(targetElement); 
    if (count == 0) 
        return; 
  
    for (int i = 0; i < count; i++) 
    { 
        var child = VisualTreeHelper.GetChild(targetElement, i); 
        if (child is TextBlock) 
        { 
            TextBlock targetItem = (TextBlock)child; 
              
            if (targetItem.Text == "Item2") 
            { 
                targetItem.Foreground = new SolidColorBrush(Colors.Green); 
                return; 
            } 
        } 
        else
        { 
            SearchVisualTree(child); 
        } 
    } 
}