WP8 Tap the image to get the selected item in longlistselector

Question

I created a LongListSelector with textblock and an image,then How do I tap the image to show selected item name in my list, and tap the item name to show messagebox? Below is my code to bind the name and image:

<phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="TileDataTemplate">
            <Grid Background="{StaticResource TransparentBrush}"
                  Margin="0, 0, 0, 12" Height="60">
                <TextBlock Text="{Binding Name}" Margin="60, 10, 0, 0" FontSize="24" Height="60">
                </TextBlock>
                <Image x:Name="GetName" Tap="GetName_Tap" Grid.Column="0" Source="/Assets/AppBar/Delete.png" Height="40" Width="40"
                                Margin="0, 6, 0, 5" HorizontalAlignment="Right" VerticalAlignment="Top" />
            </Grid>
        </DataTemplate>
</phone:PhoneApplicationPage.Resources>

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <phone:LongListSelector
                    SelectionChanged="MainLongListSelector_SelectionChanged"
                    Margin="10,6,0,0"
                    ItemsSource="{Binding Staff.Items}"
                    LayoutMode="Grid"
                    GridCellSize="400,80"
                    ItemTemplate="{StaticResource TileDataTemplate}"
                    />
    </Grid>

Code Behind:

private void MainLongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
   MessageBox.Show("Hi");
}

private void GetName_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
   LongListSelector selector = sender as LongListSelector;
   StaffData data = selector.SelectedItem as StaffData;
   MessageBox.Show(data.Name);
}

When I tap on textblock,the message "Hi" is displayed successful. But if I tap on image, I get the null value. How to I solve it? Thanks

score 6 · Accepted Answer · answered Aug 21 '13 at 09:01

6

sender isn't the LongListSelector but the image on which the user tapped, hence the null error.

Basically, you just want to retrieve the item on which the user has tapped? In that case, use the DataContext property of the tapped control to retrieve it:

private void GetName_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
   var element = (FrameworkElement)sender;
   StaffData data = (StaffData)element.DataContext;
   MessageBox.Show(data.Name);
}

(FrameworkElement is the base type of every UI control. Using that, you don't have to worry about whether it's an image, a textblock, ...)

answered Aug 21 '13 at 09:01

Kevin Gosse

38,392
3
78
94

It is work! I successful display the selected item name, but the message "Hi" displayed as well even I tap on image. How to I just display selected item without message "Hi"? Thanks – Howard Hee Aug 21 '13 at 09:15
@HowardHee Just remove your `SelectionChanged` event handler. Do you need it? – Kevin Gosse Aug 21 '13 at 09:20
I get what your mean, I need to remove the SelectionChanged, then I create the same function for SelectedItem_Tap for tap the textblock is it? – Howard Hee Aug 21 '13 at 09:23
Yes, It's work very well. Thanks for your answer! I am appreciated it – Howard Hee Aug 21 '13 at 09:28
@HowardHee If you need to display the same message when tapping on the textbox or the image, set the event on the parent grid instead. This way, it will work for every control in the grid, and you'll have to write the code only once – Kevin Gosse Aug 21 '13 at 11:02
Great answer, +1 for avoid the SelectionChanged event ;) – Cabuxa.Mapache Sep 11 '14 at 08:08

WP8 Tap the image to get the selected item in longlistselector

1 Answers1

Linked