UWP-024 - Hamburger Heaven Challenge: Solution

Play UWP-024 - Hamburger Heaven Challenge: Solution
Sign in to queue

Description

This is the solution video (one possible solution) to the Hamburger Heaven challenge.

Lesson source code: https://github.com/Windows-Readiness/AbsoluteBeginnersWin10/tree/master/UWP-024/UWP-024

Full series source code: https://github.com/Windows-Readiness/AbsoluteBeginnersWin10

PDF: https://aka.ms/absBeginnerWin10pdf

Embed

Download

Download this episode

Download captions

The Discussion

  • User profile image
    thekinghippo

    This portion of code never works in the sample project (As well as in your video). You mention it not being loaded, but it never does.

     

    public sealed partial class MainPage : Page

        {

        public MainPage()

            {

            this.InitializeComponent();

            Financial.IsSelected = true;

            }

     

    In theory that's supposed to cause the Financial ListBoxItem to start as selected on launch. Any clues on why that's not working properly?

     

  • User profile image
    Niner486279

    @thekinghippo:Yes, I wonder why that didn't work, too.

  • User profile image
    Jocel1GC9

    Concerning the Financial ListBoxItem selected on launch, here is what I wrote.

    In the file MainPage.xaml:

    <ListBox SelectionMode="Single"
                         Name="IconsListBox"
                         SelectionChanged="IconsListBox_SelectionChanged">

    ...

    <ListBoxItem Name="FinancialListBoxItem" IsSelected="True">


    In the file MainPage.xaml.cs:

    private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
          if (FoodListBoxItem.IsSelected)
          {
                MyFrame.Navigate(typeof(Food));                
          }
          else if (FinancialListBoxItem.IsSelected)
          {
                if (MyFrame !=null)
                { 
                     MyFrame.Navigate(typeof(Financial));
                }                
          }
    }

    I solved the issue of MyFrame null, on the launch of the application, with the line in bold.

  • User profile image
    Nicolas

    I found that the Frame has an Event called Navigated that will be triggered when the Frame loads a diferent Page. You can use that to set the MainPage states instead of repeating the code for the BackButton and the ListBox_SelectionChanged. Found that the Frame has a property CurrentSourcePageType so you can compare that with the typeof(Financial) or typeof(Food) to set the states.

    To set the Financial ListBoxItem selected, I just added the property IsSelected to True in the XAML file.

    Greets!

  • User profile image
    adityosn

    Hii,

    First of all, this series is really awesome, thank you very much to Andy Wigley, Bob Tabor, and Clint Rutkas. I'm finally reach this step and gonna move on to the next episode. This series is really great for beginner like me to learning UWP basics.

    Regarding to thekinghippo question, I have figured out why:

    Financial.IsSelected = true; inside MainPage() is not working.

    It is gonna be break soon after the debug run, because while frame is initiate, Navigation on MyFrame is running together. So, MyFrame is still null.

    So, if you want to open Financial at the beginning, you must activate Loaded Trigger on XAML and applied Financial.IsSelected on the Loaded Event. So, Navigation will applied after all the element is ready.

  • User profile image
    MauRiEEZZZ

    I used 2 icons from webdings font. E4 and 8F

    I wonder if this can problem for the compatibility, anyone?

     

  • User profile image
    Hieper

    An elegant solution to thekinghippo's question is to name the ListBox and set its 'SelectedIndex' property in MainPage. This will set the selection (highlight) correctly when the application loads, and will also get rid of the code duplication in MainPage().

    public MainPage()
    {
    this.InitializeComponent();
    HamburgerListBox.SelectedIndex = 0;
    }

  • User profile image
    NithinRamu

    @Jocel1GC9:Wow, thanks, your solution for MyFrame being null worked! I was getting frustrated...

     

    Could anyone explain though, why this happens? Why is MyFrame null?

  • User profile image
    harpo

    I was screaming "font SIZE! font SIZE!" for about ten minutes. I felt powerless.

  • User profile image
    VABreeze

    IMO the coding exercises in this series are too infrequent. In the C# for Absolute Beginners series, there were many more hands-on coding examples that reinforced the concepts. I think this series would be more useful following that motif.

  • User profile image
    ManjeetK

    Got almost everything, nearly with the same code.

    Except the back button visibility property, though stumbled across it  while looking but could not get how to use it.

    Anyways Thanks Bob.

  • User profile image
    al1en

    About Financial.IsSelected = true;
    If someone still struggling why this is not working, what I think is because the elements inside the page are not populated in the constructor (initialization). If you wanna that line of code working go to your XAML designer->click anywhere on the <Page> tag and from the events on the right choose "Loaded" (click twice). This will create an event that launches after all the page is loaded (this means all the elements are on the page) and than you can do the selection. In your code behind created event out the same line of code and it will work i.e. :

    private void Page_Loaded(object sender, RoutedEventArgs e)
    {
    Financies.IsSelected = true;
    }

  • User profile image
    golkhandani

    Hi and thanks for absolute beginner series
    I'm a little curious
    how can I set back button to return to the previous selected item (not only home) if I had three items in list? 

  • User profile image
    Dan T

    golkhandani,

    The back button automatically works the way you want.  It will go back any number of pages.  Prove it yourself by hitting your two pages repeatedly: Financial / Food / Financial / Food ...

    Then the back button will traverse backward through ALL of those pages.

    This assumes you're using the back navigation correctly, as described in UWP19.

  • User profile image
    TEL

    Very good tutorial. I came up with a solution that was almost identical to yours. The few minor differences still accomplished the same end result.

    I do have one question. I notice on some projects (but not all) you eliminate the Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" statement in the Grid. I didn't do that and didn't see any difference. What's the logic? When should it be left alone and when eliminated? Does it ever really matter?

  • User profile image
    IamThePeter

    @Nicolas: Yeah, the Navigated event of the Frame worked really nicely. It's a much cleaner way to handle it. Nice suggestion.

  • User profile image
    Mintydog

    I enjoyed this challenge. The only bit I got stuck on was.

    BackButton.Visibility = Visibility.Collapsed

    I wasn't sure where to find the Visibility enum.

    Thanks again.

  • User profile image
    Srikanth20

    , Srikanth20 wrote

    @thekinghippo:It won't work because when the item in the list box is selected, it fires the SelectionChanged event, which in turn tries to load (navigate) the page into the frame.

    But, when the SelectionChanged event fires, there is no instance of the "Frame(in the SplitView.Content)".

    This problem can easily be solved by placing the SplitView.Content on top of SplitView.Pane.

    Hope this helped :)

    Cheers! Have a nice day!

  • User profile image
    tomaat69

    One possible way to select an item in ListBox:

    1. Give the listbox a name in MainPage.xaml:
    <ListBox SelectionMode="Single" Name="IconsListBox" SelectionChanged="IconsListBox_SelectionChanged">

     

    2. Check that you've named the items in ListBox:
    <ListBoxItem Name="Financial">
    ...
    </ListBoxItem>

    3. in MainPage.xaml.cs (in constructor) add this line:

    public MainPage()
    {
    this.InitializeComponent();
    ...
    IconsListBox.SelectedItem = Financial;
    }



  • User profile image
    keyfumbler

    If there are more than 2 listboxitems then how can the titleText change to suit the page being loaded into the frame? The solution in the video only works if the item is selected, not if the back button is pressed.

    Can a backbutton press not only navigate to the page but retrieve a parameter or objetc from the page to inject into the title in main?

  • User profile image
    keyfumbler

    Found the solution to back-paging and injecting the correct title:

    if (MyFrame.CanGoBack)
    {
    MyFrame.GoBack();

    if (MyFrame.CurrentSourcePageType == typeof(1))
    pageName.Text = "1";
    else if (MyFrame.CurrentSourcePageType == typeof(2))
    pageName.Text = "2";

    ........etc

    }

  • User profile image
    keyfumbler

    When I back-page I want to select the appropriate list-item too. But trying this doesn't work:

    if (MyFrame.CanGoBack)
    {
    MyFrame.GoBack();

    if (MyFrame.CurrentSourcePageType == typeof(1))
    pageName.Text = "1";
    lst1.IsSelected = true;

    else if (MyFrame.CurrentSourcePageType == typeof(2))
    pageName.Text = "2";
    lst2.IsSelected = true;

    ........etc

    }

    I end up having to press the back-button twice to get the list item to highlight!

Add Your 2 Cents