In this lesson, we're going to be looking at setting up float navigation, which is a type of navigation
where a window for the menu item that was selected kind of flies from the side into the center of the
screen.
Right.
And it typically would have what we called a hamburger.
Those three lines to the top, left or right corner of the screen.
I think it's more likely you'll see it in the left, but we'll see those hamburger peels up here when
we tap it.
We should be able to select which page we want to go to, and then that page will fly in.
So let us take a look at what we need to do to get that open running so our journey starts off with
or up shell that zero.
So far we've interacted with this file whenever we wanted to change the start of page, right?
So we're focusing on the layout example.
We changed it, we were focusing on main page with change, etc. So what happens is that we can actually
have multiple nodes inside of this area.
So I'm going to create one for each page that we have so far.
So we have layout example and I'm also going to change the title.
So layout space example and the result is layout example.
We also have new page one and while these are not official page news, but they are there.
So let's just work with them.
And I don't think we have any other page.
Yes, we have test page staff test page.
And I'm really just showing you that it doesn't matter if it's the XAML page or the C sharp edge.
Each of these is an option, right?
But when we are on our opponents, anything visibly different outside of maybe displaying the one that's
first in the list.
So what happens is that we need to see a show love fail behavior and then we change it from disable
to fly out, right?
So let us make that adjustment and test.
So when our app is running, we'll see that we have our hamburger fills.
When we tap that, we see it flies out and with each title that we give, we can see it up here.
So we click layout example.
There we go.
If we choose new page, there we go.
Right?
So each page that we have created so far, we can easily switch between them using this method.
I think that was fairly easy.
I'm sure you realize that that was a very easy exercise to complete.
Now if we wanted icons on those menu items, it would be as easy as inside of the show content.
We could just see icon and then give it a path.
So let us try maybe the dot net, but I think main page had a reference to the dot net, but just want
to make sure I get that path correctly and well, it just has the path there.
So let us try that.
Let us just put the dot net but on the main page and let us test that and there we go.
So when I put icon dot net, but when I tap on the menu, I'm not seeing that icon.
So any page and a resource that you add and once again you add those resources here that dot net what
is false.
And right here in images, you can always go and add those images as you need them and then just add
the icon to each menu item.
So it gives here up a little more character and a little more, you know, a nicer look and feel as
you go along.
Now, the next type of navigation that we would want to look at is tabbed navigation.
Tab navigation usually originates from the bottom of the screen, and then you would have an icon per
tab that you can select and see the relevant page, right?
So we're still here in the show and what we want to do is create a tabbed page.
So I went to open a new tab and that one is going to be tab bar.
And then inside of Tab Bar we're going to have tabs.
So I have the tab tag.
And then instead of that tab tag, we would have that shell content.
All right, so let's just do a few of those.
So I'm just going to create a few tabs.
Three more tabs.
And then put the cell contents in each one.
Right.
So we're just transforming from just the floats.
To our tabbed navigation.
All right.
And as you can see, it's fairly consistent.
So the syntax is not the most difficult syntax to catch on to.
Right.
And if you.
And we already have the fly behavior in it.
So I'm going to show you how the two of them can kind of combine to give a particular user experience.
All right.
So we're hearing up if I go over to the nav bar Pils, I don't see anything.
If I look below, I don't see anything.
However, when I click, you will notice that it is changing.
So obviously there's something there.
But we need a few more elements.
So, one, the icon wouldn't be in the shell content at that point.
It would be in the tab.
So the tab itself can get a title.
So I could see here mean page and then I could also give this that icon.
Well, let me, I think, already have it in the clipboard.
There we go.
All right.
So let us test that first up.
All right.
So there we go.
So here we have main page with the icon.
All right.
So you could just go ahead and do that so I don't have any other icons.
Ah, well, I'll keep the same icon for the other tabs, but I will change the label of course layout.
And this tab would be new page.
And the final one was test pitch.
So after making all those changes, I rerun my app.
And when I take a look now, I'm seeing my tabs, right?
So that's the tab navigation.
Nice and easy.
So now, you know, two ways to navigate between all the pages that you have in your app.
You have the Flyout menu and you have the tabbed page.