Event handling with LongListSelector and list item with checkbox

Question

I've a LongListSelector with the following item template:

    <DataTemplate x:Key="stopItemTemplate">
        <Grid Margin="{StaticResource PhoneTouchTargetOverhang}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <CheckBox VerticalAlignment="Top" HorizontalAlignment="Left" IsChecked="{Binding Checked}" Click="AlarmActivationClicked" />
            <StackPanel Grid.Column="1" VerticalAlignment="Top">
                <TextBlock Text="{Binding Stop.Name}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" TextWrapping="Wrap" Margin="12,-12,12,6"/>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Distanz:" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Width="120"/>
                    <TextBlock Text="{Binding Distance, Converter={StaticResource MyStringFormatConverter}, ConverterParameter=:1000:\{0:0.0\} km}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Alarm:" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Width="120"/>
                    <TextBlock Text="{Binding Alarm, Converter={StaticResource MyBooleanStringConverter}}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Vibration:" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Width="120"/>
                    <TextBlock Text="{Binding Vibration, Converter={StaticResource MyBooleanStringConverter}}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
                </StackPanel>
            </StackPanel>
        </Grid>
    </DataTemplate>

And used as followed:

<controls:PivotItem Header="ziele">
    <toolkit:LongListSelector x:Name="alarmList" Background="Transparent" IsFlatList="True"
        ItemTemplate="{StaticResource stopItemTemplate}" SelectionChanged="AlarmListSelectionChanged" />
</controls:PivotItem>

The SelectionChanged event:

    private void AlarmListSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var guid = ((AlarmItem)alarmList.SelectedItem).Id;
        NavigationService.Navigate(new Uri(string.Concat("/AlarmDetailPage.xaml?id=", guid), UriKind.Relative));
    }

To change details of an item I've subscribed the SelectionChanged event of the LongListSelector. That works as expected.

But if I tap on the checkbox - at first the clicked event of the checkbox is fired, but I don't recognize which checkbox was clicked (the property longlistselector.SelectedItem is old) and just after the SelectionChanged event has fired and try to navigate to the detail page like is happens if I intend to do that.

How can I separate these to events to avoid firing both? And how can I get the corresponding data item?

Thanks a lot...
Kind regards, Danny

Answer 1

You don't need listen to SelectionChanged event. In Click, Checked or Unchecked event handler you can get an item:

private void CheckBox_Checked(object sender, System.Windows.RoutedEventArgs e)
{
    var guid = ((sender as CheckBox).DataContext as AlarmItem).Id;
    NavigationService.Navigate(new Uri(string.Concat("/AlarmDetailPage.xaml?id=", guid), UriKind.Relative));
}

Answer 2

In your AlarmActivationClicked (event handler on the checkbox) you'll be able to get the dataitem of the item in the list that was click.

    private void AlarmActivationClicked(object sender, RoutedEventArgs e)
    {
        var dataItem = ((FrameworkElement)sender).DataContext;
    }

I am not seeing the event AlarmListSelectionChanged method being called after the AlarmActivationClicked method is called. If you click on the checkbox, the checkbox changes to checked, but it doesnt change the selection in the list box.