We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

TabNavigationControl custom navigation

Thread ID:

Created:

Updated:

Platform:

Replies:

121773 Jan 24,2016 10:02 PM Feb 4,2016 07:31 AM WPF 10
loading
Tags: TabNavigationControl
Blainer Abando
Asked On January 24, 2016 10:02 PM

This is about my concern (incident report http://www.syncfusion.com/support/directtrac/incidents/150103) on TabNavigationControl. I want to navigate to TabNavigationItems without using the built-in navigation buttons, instead i will add a 'previous' and 'next' button for those functions.. Is there a way?

Ashok Kumar Murugesan [Syncfusion]
Replied On January 25, 2016 07:41 AM

Hi Blainer,


Thank you for contacting Syncfusion Support.

We have analyzed your query "navigate the TabNavigationItems without using the built-in navigation buttons". We have prepared a sample which tries to meet your requirement. In this sample we have added two buttons 'Previous' and 'Next' to increase or decrease the selected TabNavigationItem index with the help of button click event. Please download the sample for the same from the below link.

Sample: TabNavigation

Regards,

Ashok Kumar M.

Blainer Abando
Replied On January 25, 2016 07:52 AM

Hello again.

I tried the sample (already answered in the incident report here), and this is what i wanted.

Thanks a lot! It's a big help =)

- Blainer

Victory Jessie Selvam D [Syncfusion]
Replied On January 26, 2016 03:39 AM

Hi Blainer,

We are happy to hear that your issue has been resolved.

Please let us know if you need any further assistance.

Regards,
Jessie

Blainer Abando
Replied On January 28, 2016 05:26 AM

Good day.

I would like to add a concern in this thread, since this relates to the topic.

Using the TabNavigationControl, I plan to navigate through all my pages. However, I cannot add all of the pages via design mode so I wanted to add TabControlItems then navigate in my code behind..
I tested some codes, and my syntax looks like this:

//assuming I am in the tabnavigation's first TabNavigationItem
TabNavigationControl tabnavigation = (TabNavigationControl)VisualUtils.FindAncestor(sender as Visual, typeof(TabNavigationControl));//detects parent TabNavigationControl

//select a particular page where to navigate next
TabNavigationItem item = new TabNavigationItem();
var page = new SampleViews.SamplePage();
item.Content = page;

//add the new TabControlItem to tabnavigation, then navigate
tabnavigation.Items.Add(item);
int lastIndex = tabnavigation.Items.Count();
tabnavigation.SelectedIndex = lastIndex; - 1

I tried the codes and these worked. However I am worrying about two things now:
1) navigating continuously will increase the items of the TabNavigationControl non-stop; and
2) how about the "back" navigation -- how can I go back the previous page? shall I have to detect my current page's index to TabNavigationControl's items then minus 1, then navigate? If that's so, how can it be done "properly"?

Hope I made my questions clear to understand, so you could give me ideas to solve to these concerns.. :-)
Thanks a lot!

Blainer

Vijayalakshmi Roopkumar [Syncfusion]
Replied On January 29, 2016 07:09 AM

Hi Blainer,

Thank you for your update,

Query#1: Navigating continuously will increase the items of the TabNavigationControl non-stop;

You can get the TabNavigationControl by passing child TabNavigationItem using Find Ancestor of VisualUtils anywhere in the application. So you can move the codes for add new TabNavigationItem from SelectionChanged and execute the same on demand.

Query#2: How about the "back" navigation -- how can I go back the previous page? Shall I have to detect my current page's index to TabNavigationControl's items then minus 1, then navigate? If that's so, how can it be done "properly"?

Yes, you can go back to the previous page by decrementing the SelectedIndex as demonstrated in our last updated sample that shown in the below Code example:
 

 

TabNavigationControl tabnavigation = (TabNavigationControl)VisualUtils.FindAncestor(sender as Visual,typeof(TabNavigationControl));

if (tabnavigation != null && tabnavigation.SelectedIndex > 0)

tabnavigation.SelectedIndex = tabnavigation.SelectedIndex - 1;

 

 
Please let us know if you have any other concerns,

Regards,

Vijayalakshmi V.R.


Blainer Abando
Replied On January 29, 2016 09:13 PM

Hello Vijayalakshmi V.R.,

Thanks for emphasizing those codes, I nearly forgot about the use of the codes you gave me.
Hmm I tried it and it worked fine.

I am just wondering now if I navigate forward to many TabNavigationItems using this style, then went back to previous items also several times,
I will leave many idle TabNavigationItems. How can I navigate forward to different TabNavigationItem, considering that I came from the same index?
To make this clear, here's a simple example:

navigation
In this navigation sequence, we are sure that LoginPage will always be the SelectedIndex=0, and MainMenuPage is the SelectedIndex=1 of the TabNavigationControl.
Assume we will navigate to CRUDPage, and this item will be marked as the SelectedIndex=2. Then I will go back to MainMenuPage, decrementing the SelectedIndex value.. No problem with that.
But If we want to navigate forward to ParametersPage, and we did our style of navigation, ParametersPage will be marked as SelectedIndex=3, because we added CRUDPage earlier assigning the SelectedIndex=2 already, and we did not do anything like 'deleting' or 'clearing' the indices ahead the current index.

No problem with navigating forward, because I could just set the SelectedIndex to last item, but how can I go back to the 'previous page' I actually came from, now that the items are jumbled..
You can also refer to the attached project.

How can we do this right?

Thanks!

- Blainer

Attachment: NavigationApp_d35eeba8.zip

Blainer Abando
Replied On January 29, 2016 10:32 PM

Hello..

Answering my own question, I guess I made the navigation work -- clearing the TabNavigationItems ahead the current item every time I go back.
My answer is a for-loop executing tabnavigation.Items.RemoveAt(index).. You can refer to the updated project I attached.

If you can improve the navigation style, pls do suggest here..

Thanks a lot!

- Blain

Attachment: NavigationAppupdated_ef347e86.zip

Vijayalakshmi Roopkumar [Syncfusion]
Replied On February 1, 2016 07:52 AM

Hi Blainer,
We have modified the sample according to your requirement. In this sample, we have restricted the adding of duplicate TabNavigationItem, if the page is already added in the view. And for moving back to the main page from each of the pages, we have set the SelectedIndex as 1 in the button click event. 

Please download the sample from the following location:

Sample:NavigationApp_Modified
Regards,
Vijayalakshmi V.R

Blainer Abando
Replied On February 4, 2016 04:51 AM

Hello Vijayalakshmi V.R,

Nice concept. Now I can continue with my work. I will combine these navigation styles and use them in my app.

Thanks a lot!

- Blainer

Vijayalakshmi Roopkumar [Syncfusion]
Replied On February 4, 2016 07:31 AM

Hi Blainer,

We are glad to hear that the reported issue has been resolved. Please let us know if you need any further assistance on this.

Regards,
Vijayalakshmi V.R.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;