Select elements from a list on a button click. WP8

Question

I need some help doing this. I have a MVVM list of 20 elements in file MainViewModel.cs:

 public MainViewModel()
    {
        this.Items = new ObservableCollection<ItemViewModel>();
    }
public ObservableCollection<ItemViewModel> Items { get; private set; }

public void LoadData(int part)                                  
{                                   
    if (part == 1)
    {
            this.Items.Add(new ItemViewModel()
            { ID = "0", Title = "Title 0...", Image = "/Images/img001.jpg", Description = "Description 0" });
            this.Items.Add(new ItemViewModel()
            { ID = "1", Title = "Title 1", Image = "/Images/img002.jpg", Description = "Description 1" });
            // And so on from Item 0 to Item 4

     }
     if (part == 2)
     {
            this.Items.Add(new ItemViewModel()
            { ID = "5", Title = "Title 5", Image = "/Images/img006.jpg", Description = "Description 5" });
            this.Items.Add(new ItemViewModel()
            { ID = "6", Title = "Title 6", Image = "/Images/img007.jpg", Description = "Description 6" });
            //And so on from Item 5 to Item 9
      }
      this.IsDataLoaded = true;
}

And a list of 5 Buttons:

<phone:Panorama Grid.Row="1" Margin="0,3,0,3">
      <phone:PanoramaItem Header="Semanas 1 - 5" HeaderTemplate="{StaticResource MyItemHeaderTemplate}">
            <StackPanel x:Name="Semanas1a5">
                    <Button Content="Semana 1" Click="Button_Click_1"/>
                    <Button Content="Semana 2" Click="Button_Click_2"/>
                    <Button Content="Semana 3" Click="Button_Click_3"/>
                    <Button Content="Semana 4" Click="Button_Click_4"/>
                    <Button Content="Semana 5" Click="Button_Click_5"/>
            </StackPanel>
      </phone:PanoramaItem>
</phone:Panorama>

Here's what I need to do. On clicking each of these buttons, Button1 should show elements from 0 to 4, Button 2 should elements from 5 to 9 and so on. Up to now, I'm able to bind the whole list, so each button brings the full list to view.

Here's what I have for each button on Button_Click_n handler:

 private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        NavigationService.Navigate(new Uri("/DataBoundApp1;component/MainPage.xaml?dataPart=1", UriKind.Relative));
    //The rest of the butons are the same, just updating dataPart = 2, 3, etc.
    }

Then, MainPage.xaml is defined as follows:

<StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock Text="Tips Semana 1" Style="{StaticResource WeekHeader}"/>

            <ListBox x:Name="MainLongListSelector" Margin="10,5,0,10" 
                     Background="#50F5F5F5" Foreground="Black"
                     ItemsSource="{Binding Items}"
                     SelectionChanged="MainLongListSelector_SelectionChanged" >

                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding Image}" Width="100" Height="100" Stretch="Uniform"/>
                            <TextBlock Text="{Binding Title}" TextWrapping="Wrap" Margin="10" 
                                       FontSize="25" VerticalAlignment="Center"/>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </StackPanel>

And MainPage.cs

public partial class MainPage : PhoneApplicationPage
{
    public string dataPart = string.Empty;
    public int part;
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        if (!App.ViewModel.IsDataLoaded)
        {
            App.ViewModel.LoadData(int part);
        }
    }

    private void MainLongListSelector_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (MainLongListSelector.SelectedItem == null)
            return;
        NavigationService.Navigate(new Uri("/DataBoundApp1;component/DetailsPage.xaml?selectedIndex=" + (MainLongListSelector.SelectedItem as ItemViewModel).ID, UriKind.Relative));
        MainLongListSelector.SelectedItem = null;
    }

}

Then, it takes me to App.cs, where I have to update LoadData to receive a parameter, it ends like this:

private void Application_Activated(object sender, ActivatedEventArgs e)

    public int part;
    {
        // Ensure that application state is restored appropriately
        if (!App.ViewModel.IsDataLoaded)
        {
            App.ViewModel.LoadData(int part);
        }
    }

With this all, at clicking any of the buttons the app quits (No exception, no error to show, just quits). Any one could help me? I'm newbie on WP8 (or programming at all) and have no experience doing these things. Thank you!

So what's the issue you're having now? – Kulasangar Sep 12 '14 at 06:17 — Kulasangar, Sep 12 '14 at 06:17

score 0 · Answer 1 · answered Sep 12 '14 at 02:52

0

You haven't specified the type of Items. so Please put some more details about it.

If it is an ObeservableCollection than Below solution should work.

You can have your whole list as a separate global list. and on each button click you can apply filter on your global list and create your Items List according. I think this should work.

answered Sep 12 '14 at 02:52

jadavparesh06

926
7
11

Yes, it is an ObservableCollection. public MainViewModel() { this.Items = new ObservableCollection(); } – Geovanni Ortega Sep 12 '14 at 15:40

score 0 · Answer 2 · edited May 23 '17 at 11:49

0

You can use query string to pass string data to MainPage.xaml :

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    NavigationService.Navigate(new Uri("/DataBoundApp1;component/MainPage.xaml?dataPart=1", UriKind.Relative));
}

Then in MainPage.xaml read the query string and load data accordingly :

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    string dataPart = string.Empty;
    if (NavigationContext.QueryString.TryGetValue("dataPart", out dataPart)) 
    {
        int part = int.Parse(dataPart);
        LoadData(int part);
    }
}

public void LoadData(int part)                                  
{                                   
    //load relevant items according to parameter "part"
}

For reference : How to pass values (parameters) between XAML pages?

edited May 23 '17 at 11:49

Community

1
1

answered Sep 12 '14 at 06:19

har07

88,338
12
84
137

Looks very sensible. Let me put hands on work. I'll let you know. – Geovanni Ortega Sep 12 '14 at 15:44
I'm such a fool :( I have not been able to filter it yet. It is not that the advises are not good. It's just that I'm not capable to make them work. – Geovanni Ortega Sep 18 '14 at 00:30
@GeovanniOrtega You mean the `LoadData()` part? How did you try to implement it? (edit question and add latest code you tried) – har07 Sep 18 '14 at 03:12
Yeah. I mean that part. – Geovanni Ortega Sep 19 '14 at 00:38

score 0 · Answer 3 · answered Sep 13 '14 at 10:58

I suggest you to bind the Button Click event of all 4 buttons to a command , and pass parameter as (1, 2, 3, 4) to indicate which segment to be loaded.

Command Handler will bind the 5 items to to the Observable Collection which will be reflected.

                <Button Content="Btn1">
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="Click">
                            <i:InvokeCommandAction Command="{Binding LoadSegmentCommand}" CommandParameter="{Binding SegmentNumber}"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </Button>

In the View Model

    public ICommand LoadSegmentCommand
    {
        get { return new RelayCommand<int>(OnLoadSegmentCommandCommandReceived); }
    }

    private void OnLoadSegmentCommandCommandReceived(int segment)
    {
        // Assign the data to Observable Collection
    }

Select elements from a list on a button click. WP8

3 Answers3