Get value from selected databound listbox item

Question

I really don't know how to ask this question, but this is what I am trying to achieve. I have a list box with this code:

<ListBox 
    x:Name="lb"
    Margin="0,0,0,100"
    Background="#212B34"
    BorderThickness="0"
    Padding="0"
    SelectionChanged="lb_SelectionChanged">

    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
            <Setter Property="Padding" Value="0,8,0,8"></Setter>
        </Style>
    </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Height="152" BorderThickness="10,0,0,0" BorderBrush="#2E66AA" Background="#161C22" Padding="8,8,8,8">
                <Grid.RowDefinitions>
                    <RowDefinition Height="30"></RowDefinition>
                    <RowDefinition Height="25"></RowDefinition>
                    <RowDefinition Height="25"></RowDefinition>
                    <RowDefinition Height="60"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="4*"></ColumnDefinition>
                    <ColumnDefinition Width="2*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <TextBlock Foreground="#2E66AA" Text="{Binding Location}" FontSize="18" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"></TextBlock>
                <TextBlock Foreground="White" Text="{Binding Description}" FontSize="12" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" TextTrimming="WordEllipsis" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextWrapping="Wrap"></TextBlock>
                <TextBlock Foreground="White" Text="{Binding Date}" FontSize="18" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Stretch" TextAlignment="Right"></TextBlock>
                <TextBlock Foreground="White" Text="{Binding Time}" FontSize="18" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" TextAlignment="Right"></TextBlock>
                <TextBlock Foreground="#2E66AA" FontSize="24" Grid.Row="3" Grid.Column="1" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" TextAlignment="Right">
                    <Run Text="$ "/>
                    <Run Text="{Binding Price}"/>
                    <Run Text=";"/>
                </TextBlock>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

And use Azure App Service for my database. I bind the data to the listbox using itemsource:

private async void loadEvents_Click(object sender, RoutedEventArgs e)
{
    IMobileServiceTable<eventTable> eventList = App.MobileService.GetTable<eventTable>();

    
    MobileServiceCollection<eventTable, eventTable> events = await eventList
        .Where(ProductTable => ProductTable.id != "")
        .ToCollectionAsync();

    lb.ItemsSource = events;

}

What I want to do is when a user selects a listbox item he needs to be redirected to a new page. But on this new page I need the id of the event (row in the database). So I can use this id to retrieve all further information of the event.

Maybe I need to bind the id to the listboxitem by using {Binding id} but what do I bind it to? A textblock which I can make invisible? And if I bind it to something how do I retrieve it?

This is what I use to redirect the user to a new page:

private void lb_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    this.Frame.Navigate(typeof(eventPage));
}

If there is a different way to get al information about the selected event please tell.

I would really appreciate your help.

Answer 1

Get the SelectedItem from lb.SelectedItem and typecast to its corresponding class. From that, you can get the selected item's Ip. Now pass this value as the second parameter to Frame.Navigate.

private void lb_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    this.Frame.Navigate(typeof(eventPage), (eventTable)lb.SelectedItem);
}

To get this value on the next page

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);

    var selectedItem = (eventTable)e.Parameter;
}