Binding selected item in listbox with datatemplate

Question

I have simple listbox here: link to image where I have binded data. Now when I tap on one item(one row) listbox item/row is selected/violet color but in fact this item is not real selected only row change color but when I click on image or text then row where I click in not selected/violin but item in code is selected. I'm not sure if You understand what I'm saying. In short if I click on blank space row then row is visual selected but sender like listbox item not get data, if I click on text or image then sender get data but its not visual selected. How I can do it when I click anywhere row is selected/violet and item-sender get data?

And my second question is why my rectangle used like line has max width like text I want strech this rectangle at full width of listbox is this possible?

XAML:

<ListBox x:Name="lbMessagesUsersList" Foreground="Black" ItemsSource="{Binding MyDatasMessagesUserList }">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <ListBoxItem Tapped="userTapped"  Tag="{Binding}" >
                          <StackPanel>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.Column="0" Source="{Binding MessengeHisPhoto}" HorizontalAlignment="Left" Width="40" Height="40" Margin="5,-18,0,-18" Stretch="Fill" ></Image>
                                    <TextBlock x:Name="tbMessengerName"  Text="{Binding MessengeFullName}" HorizontalAlignment="Left"
                                      Grid.Column="1" Margin="25,0,0,0"/>
                                </Grid>
                                <Rectangle Height="1" Margin="0,0,0,-38" HorizontalAlignment="Stretch">
                                    <Rectangle.Fill>
                                        <SolidColorBrush Color="Black"/>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </StackPanel>
                        </ListBoxItem>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

CS:

    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.MessengeIdUser;
            }
        }...

I also try remove ListbOxItem and set binding tag to stackPanel but this dont work too.{

Answer 1

Note that, when you use an ItemTemplate, each item gets wrapped in a ListBoxItem -- so, you shouldn't use a ListBoxItem in the template, as that will produce two nested ones. Try removing it, like so:

<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Tapped="userTapped"  Tag="{Binding}">
            <!-- content here -->
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

For the handler, it might be easier to simply reference the ListBox by name instead of trying to use Tag (thanks @MetroSmurf):

private void userTapped(object sender, TappedRoutedEventArgs e)
{
    var selectedItem = lbMessagesUsersList.SelectedItem;
    var subject = MyDatasMessagesUserList.FirstOrDefault(sub => sub == selectedItem);
}

For the second part of your question: to stretch the items, you need to stretch the ListBoxItem wrapper. Do this by using ItemContainerStyle:

<ListBox>
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>