locked
Databinding & Grid View - grouped items with item on click to navigate to new static page RRS feed

  • Question

  • Hello

    I don't understand that well data binding and I found several good examples, one of which I would like to modify for a better understanding.

    The example is here: http://code.msdn.microsoft.com/windowsapps/Items-Grouping-Demo-2853657f/sourcecode?fileId=70281&pathId=364468537 , I asked the guy that uploaded it a question but it remained unanswered.

    In the SampleDataItem.cs you can find the following lines of code:

    using System; 
    using System.ComponentModel; 
     
    namespace App6.Data 
    { 
        public class SampleDataItem : INotifyPropertyChanged 
        { 
            private String _title; 
            public String Title 
            { 
                get { return _title; } 
                set 
                { 
                    _title = value; 
                    OnPropertyChanged("Title"); 
                } 
            } 
     
            private String _subtitle; 
            public String Subtitle 
            { 
                get { return _subtitle; } 
                set 
                { 
                    _subtitle = value; 
                    OnPropertyChanged("Subtitle"); 
                } 
            } 
     
            private String _imagePath; 
            public String ImagePath 
            { 
                get { return _imagePath; } 
                set 
                { 
                    _imagePath = value; 
                    OnPropertyChanged("ImagePath"); 
                } 
            } 
     
            public SampleDataItem(String title, String subtitle, String imagePath, String description, String content, SampleDataGroup group) 
            { 
                this._title = title; 
                this._subtitle = subtitle; 
                this._imagePath = imagePath; 
                this._content = content; 
                this._group = group; 
            } 
     
            public event PropertyChangedEventHandler PropertyChanged; 
     
            protected void OnPropertyChanged(string name) 
            { 
                PropertyChangedEventHandler handler = PropertyChanged; 
                if (handler != null) 
                { 
                    handler(this, new PropertyChangedEventArgs(name)); 
                } 
            } 
     
            private string _content = string.Empty; 
            public string Content 
            { 
                get { return this._content; } 
                set 
                { 
                    _content = value; 
                    OnPropertyChanged("Content"); 
                } 
            } 
     
            private SampleDataGroup _group; 
            public SampleDataGroup Group 
            { 
                get { return this._group; } 
                set 
                { 
                    _group = value; 
                    OnPropertyChanged("Group"); 
                } 
            } 
        } 
    } 

    These are organized in groups as shown in the SampleDataGroups.cs:

    using System; 
    using System.Collections.ObjectModel; 
    using System.Collections.Specialized; 
    using System.ComponentModel; 
     
    namespace App6.Data 
    { 
        public class SampleDataGroup : INotifyPropertyChanged 
        { 
            private String _title; 
            public String Title 
            { 
                get { return _title; } 
                set 
                { 
                    _title = value; 
                    OnPropertyChanged("Title"); 
                } 
            } 
     
            private String _imagePath; 
            public String ImagePath 
            { 
                get { return _imagePath; } 
                set 
                { 
                    _imagePath = value; 
                    OnPropertyChanged("ImagePath"); 
                } 
            } 
     
            public SampleDataGroup(String title, String imagePath) 
            { 
                this._title = title; 
                this._imagePath = imagePath; 
                Items.CollectionChanged += ItemsCollectionChanged; 
            } 
     
            public event PropertyChangedEventHandler PropertyChanged; 
     
            protected void OnPropertyChanged(string name) 
            { 
                PropertyChangedEventHandler handler = PropertyChanged; 
                if (handler != null) 
                { 
                    handler(this, new PropertyChangedEventArgs(name)); 
                } 
            } 
     
            private void ItemsCollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e) 
            { 
                switch (e.Action) 
                { 
                    case NotifyCollectionChangedAction.Add: 
                        if (e.NewStartingIndex < 12) 
                        { 
                            TopItems.Insert(e.NewStartingIndex, Items[e.NewStartingIndex]); 
                            if (TopItems.Count > 12) 
                            { 
                                TopItems.RemoveAt(12); 
                            } 
                        } 
                        break; 
                    case NotifyCollectionChangedAction.Move: 
                        if (e.OldStartingIndex < 12 && e.NewStartingIndex < 12) 
                        { 
                            TopItems.Move(e.OldStartingIndex, e.NewStartingIndex); 
                        } 
                        else if (e.OldStartingIndex < 12) 
                        { 
                            TopItems.RemoveAt(e.OldStartingIndex); 
                            TopItems.Add(Items[11]); 
                        } 
                        else if (e.NewStartingIndex < 12) 
                        { 
                            TopItems.Insert(e.NewStartingIndex, Items[e.NewStartingIndex]); 
                            TopItems.RemoveAt(12); 
                        } 
                        break; 
                    case NotifyCollectionChangedAction.Remove: 
                        if (e.OldStartingIndex < 12) 
                        { 
                            TopItems.RemoveAt(e.OldStartingIndex); 
                            if (Items.Count >= 12) 
                            { 
                                TopItems.Add(Items[11]); 
                            } 
                        } 
                        break; 
                    case NotifyCollectionChangedAction.Replace: 
                        if (e.OldStartingIndex < 12) 
                        { 
                            TopItems[e.OldStartingIndex] = Items[e.OldStartingIndex]; 
                        } 
                        break; 
                    case NotifyCollectionChangedAction.Reset: 
                        TopItems.Clear(); 
                        while (TopItems.Count < Items.Count && TopItems.Count < 12) 
                        { 
                            TopItems.Add(Items[TopItems.Count]); 
                        } 
                        break; 
                } 
            } 
     
            private ObservableCollection<SampleDataItem> _items = new ObservableCollection<SampleDataItem>(); 
            public ObservableCollection<SampleDataItem> Items 
            { 
                get { return this._items; } 
            } 
     
            private ObservableCollection<SampleDataItem> _topItem = new ObservableCollection<SampleDataItem>(); 
            public ObservableCollection<SampleDataItem> TopItems 
            { 
                get { return this._topItem; } 
            } 
        } 
    } 

    and in GroupedItemsPage.xaml.cs: 

    using App6.Data; 
     
    using System; 
    using System.Collections.Generic; 
     
    namespace App6 
    { 
     
        public sealed partial class GroupedItemsPage : App6.Common.LayoutAwarePage 
        { 
            public GroupedItemsPage() 
            { 
                this.InitializeComponent(); 
            } 
     
            protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState) 
            { 
                var sampleDataGroups = SampleDataSource.GetGroups((String)navigationParameter); 
                this.DefaultViewModel["Groups"] = sampleDataGroups; 
            } 
        } 
    } 

    The SampleDataSource is the following:

    using System; 
    using System.Collections.Generic; 
    using System.Collections.ObjectModel; 
     
    namespace App6.Data 
    { 
        public sealed class SampleDataSource 
        { 
            private static SampleDataSource _sampleDataSource = new SampleDataSource(); 
     
            private ObservableCollection<SampleDataGroup> _allGroups = new ObservableCollection<SampleDataGroup>(); 
            public ObservableCollection<SampleDataGroup> AllGroups 
            { 
                get { return this._allGroups; } 
            } 
     
            public static IEnumerable<SampleDataGroup> GetGroups(string uniqueId) 
            { 
                if (!uniqueId.Equals("AllGroups")) throw new ArgumentException("Only 'AllGroups' is supported as a collection of groups"); 
                 
                return _sampleDataSource.AllGroups; 
            } 
     
            public SampleDataSource() 
            { 
                var group1 = new SampleDataGroup("First Group", ""); 
     
                group1.Items.Add(new SampleDataItem("Group-1-Item-1", 
                        "Item Title: 1", 
                        "Assets/pic1.jpg", 
                        "Content", 
                        "Item Description", 
                        group1)); 
                group1.Items.Add(new SampleDataItem("Group-1-Item-2", 
                        "Item Title: 2", 
                        "Assets/pic2.jpg", 
                        "Content", 
                        "Item Description", 
                        group1)); 
                group1.Items.Add(new SampleDataItem("Group-1-Item-3", 
                        "Item Title: 3", 
                        "Assets/pic2.jpg", 
                        "Content", 
                        "Item Description", 
                        group1)); 
                group1.Items.Add(new SampleDataItem("Group-1-Item-4", 
                        "Item Title: 4", 
                        "Assets/pic1.jpg", 
                        "Content", 
                        "Item Description", 
                        group1)); 
                group1.Items.Add(new SampleDataItem("Group-1-Item-5", 
                        "Item Title: 5", 
                        "Assets/pic1.jpg", 
                        "Content", 
                        "Item Description", 
                        group1)); 
                this.AllGroups.Add(group1); 
     
                var group2 = new SampleDataGroup("Second Group", ""); 
     
                group2.Items.Add(new SampleDataItem("Group-2-Item-1", 
                        "Item Title: 1", 
                        "Assets/pic2.jpg", 
                        "Content", 
                        "Item Description", 
                        group2)); 
                group2.Items.Add(new SampleDataItem("Group-2-Item-2", 
                        "Item Title: 2", 
                        "Assets/pic2.jpg", 
                        "Content", 
                        "Item Description", 
                        group2)); 
                group2.Items.Add(new SampleDataItem("Group-2-Item-3", 
                        "Item Title: 3", 
                        "Assets/pic2.jpg", 
                        "Content", 
                        "Item Description", 
                        group2)); 
                this.AllGroups.Add(group2); 
     
                this.AllGroups.Add(group1); 
            } 
        } 
    } 

    Now I tried the example and it worked great. I just want now when I click on an item to be sent to a static page that I've already created. I guessed that the SampleDataItem must have another parameter like a string and the SampleDataSource to have that string the path of the page I want to be redirected to....but I couldn't really make it to work. Somehow I find data binding very difficult to understand and I'm really not that new to programming.

    Could someone guide me in how to make this work?

    Thanks a lot for reading all of this and have a nice day!

    Thursday, December 12, 2013 8:26 AM

Answers

  • I figured it out! So in "GroupedItemsPage.xaml.cs" I have this code (I changed quite a lot and I'll just post the whole files hoping that it will help other people) :

    using App6.Data;
    using System;
    using System.Collections.Generic;
    
    namespace App6
    {
    
        public sealed partial class GroupedItemsPage : App6.Common.LayoutAwarePage
        {
            public GroupedItemsPage()
            {
                this.InitializeComponent();
            }
    
            protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
            {
                var sampleDataGroups = SampleDataSource.GetGroups((String)navigationParameter);
                this.DefaultViewModel["Groups"] = sampleDataGroups;
            }
    
            private void itemGridView_ItemClick(object sender, Windows.UI.Xaml.Controls.ItemClickEventArgs e)
            {
                // Navigate to the appropriate destination page, configuring the new page
                // by passing required information as a navigation parameter
                string itemId = ((SampleDataItem)e.ClickedItem).PageName;
                //this.Frame.Navigate(typeof(page_ofItem), itemId);
                if (itemId == "page1")
                {
                    this.Frame.Navigate(typeof(BasicPage1));
                }
                else
                {
                    if (itemId == "page2")
                    {
                        this.Frame.Navigate(typeof(BasicPage2));
                    }
                }
            }
        }
    }

    SampleDataItem.cs :

    using System;
    using System.ComponentModel;
    
    namespace App6.Data
    {
        public class SampleDataItem : INotifyPropertyChanged
        {
            #region String title
            private String _title;
            public String Title
            {
                get { return _title; }
                set
                {
                    _title = value;
                    OnPropertyChanged("Title");
                }
            }
            #endregion
            #region String subtitle
            private String _subtitle;
            public String Subtitle
            {
                get { return _subtitle; }
                set
                {
                    _subtitle = value;
                    OnPropertyChanged("Subtitle");
                }
            }
            #endregion
            #region String imagePath
            private String _imagePath;
            public String ImagePath
            {
                get { return _imagePath; }
                set
                {
                    _imagePath = value;
                    OnPropertyChanged("ImagePath");
                }
            }
            #endregion
            #region String pageName
            private String _pageName;
            public String PageName
            {
                get { return _pageName; }
                set
                {
                    _pageName = value;
                    OnPropertyChanged("PageName");
                }
            }
            #endregion
            public SampleDataItem(String pageName, String title, String subtitle, String imagePath, String description, String content, SampleDataGroup group)
            {
                this._pageName = pageName;
                this._title = title;
                this._subtitle = subtitle;
                this._imagePath = imagePath;
                this._content = content;
                this._group = group;
            }
    
            public event PropertyChangedEventHandler PropertyChanged;
            #region [Event] Property changed
            protected void OnPropertyChanged(string name)
            {
                PropertyChangedEventHandler handler = PropertyChanged;
                if (handler != null)
                {
                    handler(this, new PropertyChangedEventArgs(name));
                }
            }
            #endregion
            private string _content = string.Empty;
            public string Content
            {
                get { return this._content; }
                set
                {
                    _content = value;
                    OnPropertyChanged("Content");
                }
            }
    
            private SampleDataGroup _group;
            public SampleDataGroup Group
            {
                get { return this._group; }
                set
                {
                    _group = value;
                    OnPropertyChanged("Group");
                }
            }
        }
    }


    SampleDataSources.cs :

    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    
    namespace App6.Data
    {
        public sealed class SampleDataSource
        {
            private static SampleDataSource _sampleDataSource = new SampleDataSource();
    
            private ObservableCollection<SampleDataGroup> _allGroups = new ObservableCollection<SampleDataGroup>();
            public ObservableCollection<SampleDataGroup> AllGroups
            {
                get { return this._allGroups; }
            }
    
            public static IEnumerable<SampleDataGroup> GetGroups(string uniqueId)
            {
                if (!uniqueId.Equals("AllGroups")) throw new ArgumentException("Only 'AllGroups' is supported as a collection of groups");
                
                return _sampleDataSource.AllGroups;
            }
    
            public SampleDataSource()
            {
                var group1 = new SampleDataGroup("First Group", "");
    
                group1.Items.Add(new SampleDataItem
                    (
                        "page1",
                        "Group-1-Item-1",
                        "Item Title: 1",
                        "Assets/pic1.jpg",
                        "Content",
                        "Item Description",
                        group1));
                group1.Items.Add(new SampleDataItem
                    (
                        "page2",
                        "Group-1-Item-2",
                        "Item Title: 2",
                        "Assets/pic2.jpg",
                        "Content",
                        "Item Description",
                        group1));
                //group1.Items.Add(new SampleDataItem("Group-1-Item-3",
                //        "Item Title: 3",
                //        "Assets/pic2.jpg",
                //        "Content",
                //        "Item Description",
                //        group1));
                //group1.Items.Add(new SampleDataItem("Group-1-Item-4",
                //        "Item Title: 4",
                //        "Assets/pic1.jpg",
                //        "Content",
                //        "Item Description",
                //        group1));
                //group1.Items.Add(new SampleDataItem("Group-1-Item-5",
                //        "Item Title: 5",
                //        "Assets/pic1.jpg",
                //        "Content",
                //        "Item Description",
                //        group1));
                this.AllGroups.Add(group1);
    
                var group2 = new SampleDataGroup("Second Group", "");
    
                group2.Items.Add(new SampleDataItem
                    (
                        "page3",
                        "Group-2-Item-1",
                        "Item Title: 1",
                        "Assets/pic2.jpg",
                        "Content",
                        "Item Description",
                        group2));
                group2.Items.Add(new SampleDataItem
                    (
                        "page4",
                        "Group-2-Item-2",
                        "Item Title: 2",
                        "Assets/pic2.jpg",
                        "Content",
                        "Item Description",
                        group2));
                //group2.Items.Add(new SampleDataItem("Group-2-Item-3",
                //        "Item Title: 3",
                //        "Assets/pic2.jpg",
                //        "Content",
                //        "Item Description",
                //        group2));
                this.AllGroups.Add(group2);
    
                //this.AllGroups.Add(group1);
            }
        }
    }

    most important changes:added a new string in SampleDataSources.cs "pageName" which is used in GroupedItemsPage.xaml.cs in the following code block:

    private void itemGridView_ItemClick(object sender, Windows.UI.Xaml.Controls.ItemClickEventArgs e)
            {
                // Navigate to the appropriate destination page, configuring the new page
                // by passing required information as a navigation parameter
                string itemId = ((SampleDataItem)e.ClickedItem).PageName;
                //this.Frame.Navigate(typeof(page_ofItem), itemId);
                if (itemId == "page1")
                {
                    this.Frame.Navigate(typeof(BasicPage1));
                }
                else
                {
                    if (itemId == "page2")
                    {
                        this.Frame.Navigate(typeof(BasicPage2));
                    }
                }
            }

    Now I can edit the individual static pages "page1" and "page2".

    My solution isn't elegant or neatly written mainly because I did it on a Toshiba Encore tablet :)



    If you don't gain anything from arguing with someone, do yourself a favor and stop wasting your time for free.

    • Marked as answer by Andrei Pi Thursday, December 12, 2013 3:32 PM
    Thursday, December 12, 2013 3:31 PM