Get selected items from Listbox

Question

I am creating Windows Phone 8 app working with Nokia Mix Radio SDK. I have Listbox contains Genres. Each item (genre) in the ListBox has CheckBox, so that user can select only items he wants to listen to. How can I know what genres user selected?

Here is my XAML:

<phone:PhoneApplicationPage
x:Class="MusicApp.GenrePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ListBox x:Name="GenresListBox" Grid.Row="0" >
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <CheckBox Content="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
        <Button Grid.Row="1" Content="Button" HorizontalAlignment="Left" Name="SelectButton" VerticalAlignment="Top" Click="SelectButton_Click"/>

    </Grid>

</Grid>

Here is my code:

   using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace MusicApp
{
    public partial class GenrePage : PhoneApplicationPage
    {
        public GenrePage()
        {
            InitializeComponent();


        }

        private async void GetGenres()
        {
            var genres = await App.GetClient().GetGenresAsync();


            GenresListBox.ItemsSource = genres;

            if (genres.Result == null || genres.Count == 0)
            {
                MessageBox.Show("No results available");
            }

        }

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

            GetGenres();
        }

        private void SelectButton_Click(object sender, RoutedEventArgs e)
        {
            var selectedGenres = GenresListBox.SelectedItems;


        }
    }
}

Answer 1

I solved my problem using Windows Phone Toolkit's LongListMultiSelector.

This is how it's going to look like:

Now my XAML is:

<phone:PhoneApplicationPage
x:Class="MusicApp.GenrePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <toolkit:LongListMultiSelector  x:Name="GenresListBox" Grid.Row="0" >
            <toolkit:LongListMultiSelector.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
            </toolkit:LongListMultiSelector.ItemTemplate>
        </toolkit:LongListMultiSelector>
        <Button Grid.Row="1" Content="Button" HorizontalAlignment="Left" Name="SelectButton" VerticalAlignment="Top" Click="SelectButton_Click"/>

    </Grid>

</Grid>

And code:

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using Nokia.Music.Types;

namespace MusicApp
{
    public partial class GenrePage : PhoneApplicationPage
    {
        public GenrePage()
        {
            InitializeComponent();


        }

        private async void GetGenres()
        {
            var genres = await App.GetClient().GetGenresAsync();


            GenresListBox.ItemsSource = genres;

            if (genres.Result == null || genres.Count == 0)
            {
                MessageBox.Show("No results available");
            }

        }

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

            GetGenres();
        }

        private void SelectButton_Click(object sender, RoutedEventArgs e)
        {
            var genres = GenresListBox.SelectedItems;

        }
    }
}

Answer 2

I did little change in your code. try this it help you xaml

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
      </Grid.RowDefinitions>
  <ListBox x:Name="GenresListBox" Grid.Row="0" SelectionChanged ="GenresListBox_SelectionChanged">
      <ListBox.ItemTemplate>
         <DataTemplate>
          <CheckBox Content="{Binding Name}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
          </DataTemplate>
      </ListBox.ItemTemplate>
 </ListBox>
<Button Grid.Row="1" Content="Button" HorizontalAlignment="Left" Name="SelectButton" VerticalAlignment="Top" Click="SelectButton_Click"/>    
 </Grid>

IN Code Beind

private void GenresListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (GenresListBox.SelectedIndex == -1)
        return;
}

private void SelectButton_Click(object sender, RoutedEventArgs e)
        {
            var selectedGenres = GenresListBox.SelectedItem;
        }