listbox item click event? - windows-phone-7

Question

i binded some items to listbox.whenever click on particular listitem i want to display that subitems in another page.
Please tell me how to acheive this.
how to get the listitem id whenever click on particular list item ?

Answer 1

To clarify (in case you don't feel like creating a new DataBound application and just want the answer), instead of depending on the click event for a listbox item, you should be looking at the selectionchanged event for the list box itself.
eg:
<ListBox SelectionChanged="MainListBox_SelectionChanged">
// Handle selection changed on ListBox
private void MainListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// If selected index is -1 (no selection) do nothing
if (MainListBox.SelectedIndex == -1)
return;
// Navigate to the new page
NavigationService.Navigate(new Uri("/DetailsPage.xaml?selectedItem=" + MainListBox.SelectedIndex, UriKind.Relative));
// Reset selected index to -1 (no selection)
MainListBox.SelectedIndex = -1;
}

Answer 2

Look at the code created as part of a new DataBound application. It does just this.

Answer 3

MVVM solution
Use the following libraries:
xmlns:GalaSoft_MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" <-- (optional, only for the ContextMenu)
XAML Example:
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox x:Name="categoryListBox" Margin="0,0,-12,0" ItemsSource="{Binding CategoryItems}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="stackPanel" Margin="0,0,0,17" Width="432" Height="78">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Tap">
<GalaSoft_MvvmLight_Command:EventToCommand
Command="{Binding Main.OpenCategoryCommand, Source={StaticResource Locator}, Mode=OneWay}"
CommandParameter="{Binding Mode=OneWay}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="Remove" />
<toolkit:MenuItem Header="Show" />
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<TextBlock Text="{Binding Name}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding Note}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

Answer 4

For a simple command binding MVVM style to an item in a list, you can also enclose the whole item template in a button and hook up the Command property of the button like this:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Button Command="{Binding Path=SomeCommandOnItemViewModel, Mode=OneWay}">
<Button.Template>
<ControlTemplate>
<!-- Your listitem styling goes here -->
</ControlTemplate>
</Button.Template>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>