Cascading ListBox

CascadingListBoxExample.png

Here is a basic example of a cascading listbox where the choices of a 2nd ListBox (on bottom) change based on the selection of an item in the 1st ListBox (on top).

.AddLabel<UserControl>(0, 4, "Cascading ListBox Example", Brushes.Khaki)
                  .AddAnyIParent<ListBox, UserControl>(0, 5, myIParent =>
                  {
                       myIParent.Initialize(100D, 100D, ContainerType.VerticalPanel, null, null);
                       myIParent.BeginSettings()
                           .SetFontOnLabel(0, 0, "Arial", 12, FontWeights.DemiBold, FontStyles.Italic)
                           .SetSelectedContentControlColor(Colors.Green)
                           .EndSettings();

                       //Must subscribe Selection Changed On Parent BEFORE adding Child Composites
                       myIParent.SubscribeSelectionChangedOnParent((o, e) =>
                       {
                           if (e.SelectedKey() == ListBoxItemGuids.ItemA) //A
                           {
                               ListBox theOtherListBox = thisUserControl.GetChildFromComposite<ListBox, UserControl>(0, 6);
                               //get the other ListBox, then the First Child in the other ListBox and check its Text
                               if (theOtherListBox.Items.Count > 0 &&
                                   (theOtherListBox.GetChildFromParent<TextBlock, ListBox>(
                                   (thisUserControl.GetChildFromComposite<ListBox, UserControl>(0, 6).GetCompositeLookupDictionary().Keys.First<string>())
                                   , 0, 0) as TextBlock).GetText() == "List Box Item A-1")
                               {
                                   //Both are A, so do nothing
                               }
                               else
                               {
                                   //Load A
                                   theOtherListBox.RemoveAll();

                                   theOtherListBox.BeginComposite()
                                       .AddText(0, 0, "List Box Item A-1")
                                       .EndComposite<ListBox, ListBoxArgs>(null);

                                   theOtherListBox.BeginComposite()
                                       .AddText(0, 0, "List Box Item A-2")
                                       .EndComposite<ListBox, ListBoxArgs>(null);

                                   theOtherListBox.BeginComposite()
                                       .AddText(0, 0, "List Box Item A-3")
                                       .EndComposite<ListBox, ListBoxArgs>(null);
                               }
                           }
                           else  //B
                           {
                               ListBox theOtherListBox = thisUserControl.GetChildFromComposite<ListBox, UserControl>(0, 6);
                               //get the other ListBox, then the First Child in the other ListBox and check its Text
                               if (theOtherListBox.Items.Count > 0 &&
                                   (theOtherListBox.GetChildFromParent<TextBlock, ListBox>(
                                   (thisUserControl.GetChildFromComposite<ListBox, UserControl>(0, 6).GetCompositeLookupDictionary().Keys.First<string>())
                                   , 0, 0) as TextBlock).GetText() == "List Box Item B-1")
                               {
                                   //Both are B, so do nothing
                               }
                               else
                               {
                                   //Load B
                                   theOtherListBox.RemoveAll();

                                   theOtherListBox.BeginComposite()
                                       .AddText(0, 0, "List Box Item B-1")
                                       .EndComposite<ListBox, ListBoxArgs>(null);

                                   theOtherListBox.BeginComposite()
                                       .AddText(0, 0, "List Box Item B-2")
                                       .EndComposite<ListBox, ListBoxArgs>(null);

                                   theOtherListBox.BeginComposite()
                                       .AddText(0, 0, "List Box Item B-3")
                                       .EndComposite<ListBox, ListBoxArgs>(null);
                               }
                           }
                       });

                       myIParent.BeginComposite(ListBoxItemGuids.ItemA)
                           .AddText(0, 0, "List Box Item A")
                           .EndComposite<ListBox, ListBoxArgs>(null);

                       myIParent.BeginComposite(ListBoxItemGuids.ItemB)
                           .AddText(0, 0, "List Box Item B")
                           .EndComposite<ListBox, ListBoxArgs>(null);                       
                   })
                  .AddAnyIParent<ListBox, UserControl>(0, 6, myIParent =>
                    {
                        myIParent.Initialize(100D, 100D, ContainerType.VerticalPanel, null, null);
                        myIParent.BeginSettings()
                            .SetFontOnLabel(0, 0, "Arial", 12, FontWeights.DemiBold, FontStyles.Italic)
                            .SetSelectedContentControlColor(Colors.LawnGreen)
                            .EndSettings();

                        myIParent.SubscribeSelectionChangedOnParent((o, e) =>
                        {
                            Canvas canVas = (Canvas)Application.Current.Properties["Canvas"];
                            string dialogGuid = Guid.NewGuid().ToString();

                            if (e.SelectedKey() != String.Empty)
                            {
                                ContemporaryStyle.ShowOKDialog(canVas, dialogGuid, "  Clicked '" + myIParent.GetChildFromParent<TextBlock, ListBox>(e.SelectedKey(), 0, 0).GetText() + "'.", 200D, 505D, 405D, Brushes.Black, new Thickness(1), Brushes.WhiteSmoke, Brushes.White, Brushes.Gray, Brushes.Black, Brushes.LightGray);
                            }
                        });
})

You may notice in the code at the end that I added displaying an OK Dialog upon selection changed of the 2nd ListBox:

CascadingListBoxExample2.png

Last edited Jun 23, 2013 at 5:21 AM by stagathome0069, version 3

Comments

No comments yet.