GridView Filter buttons for collection

Question

I currently got databinding to work on a collection view to show all my buttons.

However since my collection List has over 24 items in it, I want to add four buttons (Appetizer, Breakfast, Lunch, Dinner) on the same page and filter based on which one I clicked. That way i only show only a few of those selections at a time.

Should I handle this in the ViewModel? Or is should this be a responsibility for the pageview?

MenuItem class:

public enum type
{
    Appetizer,
    Breakfast,
    Lunch,
    Dinner
};
class MenuItem
{
 //stuff
}

MenuItemsPage:

    public sealed partial class MenuItemsPage : Page
    {
        public MenuItemsPage()
        {
            this.InitializeComponent();       
        }
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            string tableName = e.Parameter as string;
            this.DataContext = new MenuPageVM(tableName);  //this returns List<MenuItem> 24 items. All 4 types of MenuItems    
        }
    }
}

XAML:

<CollectionViewSource x:Key="MenuItemsCollectionViewSource" Source="{Binding MenuItems}"/>
<GridView   SelectionMode="None" 
            x:Name="menuGrid" ItemsSource="{Binding Mode=OneTime, Source={StaticResource MenuItemsCollectionViewSource}}" Margin="256,113,320,184"
                    ItemTemplate="{StaticResource MenuButtonTemplate}"/>

score 1 · Accepted Answer · answered Mar 31 '15 at 08:41

1

Keep a property AllItems in the view model. On the button click, a method in the view model can be invoked to do the filtering.

public void Filter(type filterType)
{
    MenuItems.Clear();
    foreach(var item in AllItems)
    {
       if(item.type == filterType)
       {
          MenuItems.Add(item);
       }
    }
}

The changes will be reflected in the UI only if MenuItems is an ObservableCollection.

answered Mar 31 '15 at 08:41

Bells

1,465
1
19
30

Thanks! This worked. An additional question if you don't mind. Would it be okay if I trigger this Filter with a click event? Or would that go against the MVVM principle? – cvu Mar 31 '15 at 23:04
1

Ideal way would be to bind a command to the button. Guess these links will help you - http://stackoverflow.com/questions/1468791/wpf-icommand-mvvm-implementation http://social.technet.microsoft.com/wiki/contents/articles/18199.event-handling-in-an-mvvm-wpf-application.aspx – Bells Apr 01 '15 at 03:52

GridView Filter buttons for collection

1 Answers1