Question

I have a listbox to which I parse info from an XML file. I created a custom user control for my ListBoxItems which comprises of a checkbox and a textblock to hold people’s names. My problem is that I can’t access and control the controls of the custom ListBoxItem user control in code. I don’t know how to access them. I want to the click event of a button to remove the names which were not checked and save the ones which were checked to a file in IsolatedStorage. I haven’t yet worked on saving the data because I want to get the basic “selected checkbox identification” working first. Could you help me out?

Here’s the code:

    public partial class OppilasLista : PhoneApplicationPage

    {
        XDocument lista = XDocument.Load("NykyisetKurssit.xml");
        XDocument oppilasInfo = XDocument.Load("Oppilaat.xml");
        string id = string.Empty;

        public OppilasLista()
        {
            InitializeComponent();

        }

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            if (NavigationContext.QueryString.TryGetValue("id", out id))
            {

                var ryhma = (from ryhmaInfo in lista.Descendants("Kurssi")
                             where ryhmaInfo.Attribute("id").Value == id
                             select new Kurssit
                             {
                                 RyhmanNimi = (string)ryhmaInfo.Element("tunnus").Value

                             }).FirstOrDefault();

                PageTitle.Text = ryhma.RyhmanNimi;

                var oppilas = (from oppilaat in oppilasInfo.Descendants("Oppilas")
                               where oppilaat.Attribute("ryhma").Value == id
                               select new Kurssit
                               {
                                   OppilaanNimi = (string)oppilaat.Element("nimi").Value
                               });

                oppilaidenLista.ItemsSource = oppilas;

            }
            base.OnNavigatedTo(e);
        }

        private void Tallenna_Button_Click(object sender, RoutedEventArgs e)
        {

        }

    }

AND XAML

    <!--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 x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="LÄSNÄOLOT" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="{Binding RyhmanNimi}" 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">
            <ListBox ItemsSource="{Binding}" x:Name="oppilaidenLista" Margin="0,0" Height="500" VerticalAlignment="Top" d:LayoutOverrides="VerticalAlignment">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <local:ListboxItem />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
            <Button Content="Tallenna" Height="72" HorizontalAlignment="Left" Margin="12,506,0,0" Name="tallennaButton" VerticalAlignment="Top" Width="438" Click="Tallenna_Button_Click" />
        </Grid>
    </Grid>

AND Custom ListBoxItem control

    <Grid x:Name="LayoutRoot">
        <CheckBox Height="72" HorizontalAlignment="Left" Margin="0,7,0,0" Name="checkBox" VerticalAlignment="Top" />
        <TextBlock Height="55" HorizontalAlignment="Left" Margin="74,12,0,0" Name="studentName" Text= "{Binding OppilaanNimi}" VerticalAlignment="Top" Width="394" FontSize="40" />
    </Grid>

Answer 1

I’d suggest that you bind your ListBox to a collection of items which have a boolean property you can bind the CheckBox‘s IsChecked property to. Something along the lines of;

public class Kurssit : INotifyPropertyChanged {
  private string _Oppilaanimi;
  private bool _IsChecked;

  public string OppilaanNimi {
    get { return _Oppilaanimi; }
    set {
      if (_Oppilaanimi != value) {
        _Oppilaanimi = value;
        PropertyChanged(this, new PropertyChangedEventArgs("OppilaanNimi"));
      }
  }

  public bool IsChecked {
    get { return _IsChecked ; }
    set {
      if (_IsChecked != value) {
        _IsChecked = value;
        PropertyChanged(this, new PropertyChangedEventArgs("IsChecked"));
      }
  }

  public event PropertyChangedEventHandler PropertyChanged;
}

When you create these items in your LINQ statement store them in a member variable, say, private ObservableCollection<Kurssit> _Kurssit.

And then bind your ListBox to this member variable;

oppilaidenLista.ItemsSource = _Kurssit;

Then change your custom ListBoxItem control to be more like;

<Grid x:Name="LayoutRoot">
    <CheckBox IsChecked="{Binding IsChecked}" Height="72" HorizontalAlignment="Left" Margin="0,7,0,0" Name="checkBox" VerticalAlignment="Top" />
    <TextBlock Height="55" HorizontalAlignment="Left" Margin="74,12,0,0" Name="studentName" Text= "{Binding OppilaanNimi}" VerticalAlignment="Top" Width="394" FontSize="40" />
</Grid>

Then in your button’s click handler;

private void Tallenna_Button_Click(object sender, RoutedEventArgs e)
{
  List<Kurssit> selected = _Kurssit.Where(x => x.IsSelected == true).ToList()
  // You can now operate manipulate this sublist as needed
  // ie. Save this subset of items to IsolatedStorage
  //     Or remove the items from the original _Kurssit collection... whatever :)
}

Note: Because the member variable you’re binding too in this example is of type ObservableCollection{T} calling Add(), Remove(), et al, will raise events and the ListBox will respond to these adding / removing the UI controls for those items as necessary.