How to access a control present inside a datatemplate of listbox in metro app? - windows-8

Question

I am developing a windows 8 metro app in which I have listbox which contains a set of textblocks and a Image.
<ListBox x:Name="lstbxbStudents" Background="Transparent" ItemContainerStyleSelector="{StaticResource ItemStyleSelector}" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemTemplate="{StaticResource LandscapeItemTemplate}" Height="476" SelectionChanged="lstbxbProducts_SelectionChanged_1" Style="{StaticResource ListBoxStyle1}" HorizontalAlignment="Left" Width="901">
</ListBox>
For that image ImgCmt I have set the source of the Image static inside the datatemplate of the listbox.
<Page.Resources>
<CollectionViewSource x:Name="cvs2" IsSourceGrouped="true" />
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">Students Screen</x:String>
<DataTemplate x:Key="LandscapeItemTemplate" >
<StackPanel Orientation="Horizontal">
<StackPanel Width="30"></StackPanel>
<StackPanel Width="120" Orientation="Horizontal">
<TextBlock Text="{Binding stunum}" VerticalAlignment="Center" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Width="350">
<TextBlock Text="{Binding studsc}" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Width="10"></StackPanel>
<StackPanel Width="100">
<TextBlock Text="{Binding stuum}" x:Name="txtblkstuum" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Width="150">
<TextBlock Text="{Binding stugrp}" VerticalAlignment="Center" TextAlignment="Right" HorizontalAlignment="Center" />
</StackPanel>
<StackPanel Width="100">
<TextBlock Text="{Binding stusection, Mode=TwoWay}" TextAlignment="Center" x:Name="txtbxbstusection" Tag="{Binding stunum}" VerticalAlignment="Center" HorizontalAlignment="Right" />
</StackPanel>
<StackPanel Width="50"></StackPanel>
<StackPanel>
<Image Source="Assets/comments.png" Name="ImgCmt" PointerPressed="Image_PointerPressed_1" VerticalAlignment="Center" Width="20" Height="20"></Image>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
my objective is that I want to change the source of the image to different image source(change the image) in codebehind depnding upon some condition for that I need to access the control present inside a datatemplate of listbox in metro app ?
How can I do this :
How to access a control present inside a datatemplate of listbox in metro app?
What are the different ways in which I can do this?
How can I change the source of the image to different image source(change the image) in codebehind depending upon some condition?

Answer 1

This is a common question. We've all asked it at least once. The problem is that these controls don't have a unique name, because they are in a repeater. As a result, you cannot use the logical tree in XAML. The logical tree is what lets you call things by name. Instead, you need to use the visual tree in XAML. The visual tree is what lets you access everything on the screen including the dynamically rendered elements that adorn controls and populate repeaters. Because the visual tree is so big and because a repeater repeats, you still have to constrain the scope of the visual tree so you can reliably locate the control you want to find. I hope this makes sense.
Solution here: http://blog.jerrynixon.com/2012/09/how-to-access-named-control-inside-xaml.html