Changing the image of the selected item in listbox (Windows Phone) - windows-phone-7

Question

I have this code:
<ListBox x:Name="lisbox1" Margin="-24,0,-9,0" CacheMode="BitmapCache" ItemsSource="{Binding Teacher}" HorizontalAlignment="Right" MouseLeftButtonUp="lisbox1_MouseLeftButtonUp" SelectionChanged="lisbox1_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,0,0,-35">
<Image x:Name="image1" Stretch="Fill" Source="ticket.png" Margin="-15,-16,3,21"/>
<TextBlock x:Name="asda" Margin="56,50,0,0" TextWrapping="Wrap" TextAlignment="Left" Text="{Binding lastname}" Style="{StaticResource PhoneTextLargeStyle}" Height="50" VerticalAlignment="Top" HorizontalAlignment="Left" Width="264" />
<TextBlock Margin="56,106,43,90" TextWrapping="Wrap" TextAlignment="Left" Text="{Binding firstname}" Style="{StaticResource PhoneTextLargeStyle}" />
<TextBlock Margin="0,50,43,147" Text="{Binding auditnumb}" Style="{StaticResource PhoneTextLargeStyle}" RenderTransformOrigin="0.515,-1.286" HorizontalAlignment="Right" Width="98" />
<Border Background="Silver" BorderThickness="1,1,1,1" Height="40" CornerRadius="20,20,20,20" Margin="56,3,60,0" VerticalAlignment="Top">
<TextBlock TextWrapping="Wrap" Text="{Binding subname}" TextAlignment="Center" VerticalAlignment="Top" Style="{StaticResource PhoneTextTitle3Style}"/>
</Border>
<Border BorderThickness="1" Height="40" Background="Green" Width="69" CornerRadius="25,25,25,25" Margin="316,154,61,41" Name="border1" >
<TextBlock Text="{Binding End}" TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource PhoneTextTitle3Style}" Width="69" Margin="-2,1,-3,-1"/>
</Border>
<Border BorderThickness="1" Background="Red" CornerRadius="25,25,25,25" Name="border2" Height="40" Width="69" Margin="230,154,147,41" >
<TextBlock TextAlignment="Center" TextWrapping="Wrap" Text="{Binding Start}" Style="{StaticResource PhoneTextTitle3Style}" Width="69" Margin="-2,1,-3,1"/>
</Border>
<Border Background="WhiteSmoke" CornerRadius="40" BorderThickness="1" Height="40" HorizontalAlignment="Left" Margin="16,88,0,0" Name="border3" VerticalAlignment="Top" Width="40" >
<TextBlock Margin="5" Foreground="Black" TextAlignment="Center" TextWrapping="Wrap" Text="{Binding PairNumber}" Width="28" RenderTransformOrigin="0.304,-0.462" Style="{StaticResource PhoneTextNormalStyle}" HorizontalAlignment="Left" Height="28" VerticalAlignment="Top"/>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How to change the image when you select an item from the listbox? I have tried using VisualStateManager, but nothing happens.

Answer 1

It's hard to tell the best way without more code, but one way to do this is to add a property for the image path to the 'Teacher' class and bind the image source to it. Then when the item is clicked, change the image path in the Teacher object. (make sure your teacher class correctly supports OnPropertyChanged() for the image path property).

Answer 2

Use the following code to change the image source in C# (just put it after the desired event handler)
var image = (Image)sender;
image.Source = new Uri("/AppName;component/Images/imageName.png", UriKind.Relative)
Make sure that the image you want to use is saved to your Image folder
(Replace spaces in your app name with %20)