Sticky Bottom Nav

How-to Discussions
1

Attempting to complete a sticky bottom nav. Currently, I have a navbar completed, and positioned at the bottom of the page, but with enough content, it moves to the bottom of the content and is not displayed throughout the application. I have a Panel class, that contains the navigation in a grid.

Is there a way to make the Panel class “sticky” to the bottom of the screen? Am I missing something very simple?

2

Hey Matt,

yes, you’re looking for a DockPanel as the parent container in this case. I suggest you read a bit about Layout and then find an example that looks something like what you want to do. tab-bar-navigation could be a good candidate I reckon.

First understanding the theory and then looking at working code is arguably the fastest route to fluency in UX Markup. That said, have you taken the Tutorial yet?

3

Hi Uldis!

Thanks for the quick response!

I’ve done the tutorial, read the Layout page, and opened up the tab-bar-navigation example. I thought the tab-bar-navigation would be a great example for my situation also, but in the example the bottom navigation in fact is not sticky either. By adding a scrollview and some extra content, the navigation in the example moves around.

I am able to create the tab navigation in my own application, but to make it sticky to the bottom seems to be the challenge.

Thanks for your help! :slight_smile:

4

Well it certainly does not “move around” in the tab-bar-navigation until you introduce your code, does it? Or if it does, please define “sticky”.

If it only “moves around” when you introduce some more code, you are probably doing something wrong. You will need to show a minimal code of what you did, otherwise it’s impossible to help.

5

You’re right, it doesnt. But the content is not scrollable, which it is in my application. If there is more or less “content” on the page selected, the bottom navigation doesn’t stay on the same exact position (the bottom) on your screen, but remains at the bottom of the content, which could be anywhere on the sceen, as it is originally displayed.

In the tab-bar example originally, it is perfectly on the bottom, but with added or removed content, it would move around, instead of being bound to the bottom of the viewport.

For example, on the tab-bar example (line 22):

<ScrollView>
<DockPanel>

	<StatusBarBackground Dock="Top"/>
	<BottomBarBackground Dock="Bottom"/>

By adding a ScrollView, the content shrinks, and because the navigation is not “sticky”, the navigation moves up with the content, instead of being bound to the bottom of the screen.

This could be a misunderstanding with ScrollView on my part also?

Thanks in advance! :slight_smile:

6

If you put the ScrollView around all of the content, all of it will be placed in the ScrollView, thus making the tab bar scrollable, too.

You should instead only wrap the PageControl which fills the remaining available space after the top and bottom visuals are docked.

Alternatively, you could put the ScrollView inside of the pages, around the actual content that needs to be scrollable.

7

I see. Maybe it was a misunderstanding on how ScrollView works in that case! Thank you so much for the answer!

8

I had issues with this when starting too, the solution I use is explicitly declaring the Dock property of each element inside the DockPanel and having the ScrollView Dock as “Fill”.

“Fill” will use whatever space is available between the top and bottom elements, if there are any, or the bounds of the view.

<DockPanel>
    <Panel ux:Name="TopBar" Dock="Top" />
    <ScrollView ux:Name="Content" Dock="Fill">
        <Panel />
    </ScrollView>
    <Panel ux:Name="NavBar" Dock="Bottom" />
</DockPanel>