Listbox item select with sender like Grid

Question

Hi I have lite problem with my listbox. When I click on item in listbox(text or image) everything is working but when I click on blank space in item row then item is not selected but I dont know where can be problem because every one row/item is used like grid which contains images and text and I have set tag to binding in grid but item is selected ony if I click on text or image.

 private void userTapped(object sender, TappedRoutedEventArgs e)
    {
        var button = sender as Grid;
        if (button != null)
        {
            var subject = MyDatasMessagesUserList.FirstOrDefault(sub => sub == button.Tag);
            if (subject != null)
            {
                IdOfChoosenUser = subject.MessengeFromId;
            }
        }}


<ListBox x:Name="lbMessagesUsersList" Grid.Column="1" FontSize="13"   ItemsSource="{Binding MyDatasMessagesUserList }" Margin="0,0,0,80">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid VerticalAlignment="Top" Margin="0,0,0,0" Tapped="userTapped"  Tag="{Binding}" >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Image Grid.Column="0" Source="layoutGraphics/logo120.png" HorizontalAlignment="Left" VerticalAlignment="Top" Width="40" Height="40" Margin="5,5,0,0"></Image>
                            <TextBlock x:Name="tbMessengerName" Text="{Binding MessengerName}" HorizontalAlignment="Left"
                                                   Foreground="#FF02416C"
                                                   FontSize="16" Grid.Column="1" Margin="10,0,20,0" VerticalAlignment="Center" MinWidth="120"/>
                            <Image x:Name="imgMessengerIsOffline" 
                                                   HorizontalAlignment="Right" 
                                                    Margin="10,0,20,0" Grid.Column="2" VerticalAlignment="Center"  Source="{Binding isUserOnline}"  Width="20" Height="20">
                            </Image>
                        </Grid>
                        <Rectangle Fill="#FF6FB7FF" Grid.Row="1"  Height="1"                          Margin="0,0,0,-20">
                        </Rectangle>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

Benoit Catherinet Benoit Catherinet · Accepted Answer · 2013-09-12T13:10:15

Wrap your grid in the DataTemplate inside a ListBoxItem (and set the tap event on the ListBoxItem) or set the background of your grid to transparent and the tap event should work correctly.

private void userTapped(object sender, TappedRoutedEventArgs e)
{
    var button = sender as ListBoxItem;
    if (button != null)
    {
        var subject = MyDatasMessagesUserList.FirstOrDefault(sub => sub == button.Tag);
        if (subject != null)
        {
            IdOfChoosenUser = subject.MessengeFromId;
        }
    }}


<ListBox x:Name="lbMessagesUsersList" Grid.Column="1" FontSize="13"   ItemsSource="{Binding MyDatasMessagesUserList }" Margin="0,0,0,80">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="Padding" Value="0"/>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
               <ListBoxItem Tapped="userTapped"  Tag="{Binding}">
                <Grid VerticalAlignment="Top" Margin="8,10"  >
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Image Grid.Column="0" Source="layoutGraphics/logo120.png" HorizontalAlignment="Left" VerticalAlignment="Top" Width="40" Height="40" Margin="5,5,0,0"></Image>
                        <TextBlock x:Name="tbMessengerName" Text="{Binding MessengerName}" HorizontalAlignment="Left"
                                               Foreground="#FF02416C"
                                               FontSize="16" Grid.Column="1" Margin="10,0,20,0" VerticalAlignment="Center" MinWidth="120"/>
                        <Image x:Name="imgMessengerIsOffline" 
                                               HorizontalAlignment="Right" 
                                                Margin="10,0,20,0" Grid.Column="2" VerticalAlignment="Center"  Source="{Binding isUserOnline}"  Width="20" Height="20">
                        </Image>
                    </Grid>
                    <Rectangle Fill="#FF6FB7FF" Grid.Row="1"  Height="1"                          Margin="0,0,0,-20">
                    </Rectangle>
                </Grid>
             </ListBoxItem>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

Listbox item select with sender like Grid

2 Answers