Shell tab button on page

Question

Shell tab button on page

-- -- 957

Hi

Xamarin Forms.

How can I have a single Shell tab button on not first page that has the collectionview but on the second detail page?

Thanks

Regards

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,456 Reputation points Microsoft External Staff

2023-08-14T06:54:40.48+00:00

Are there any arguments need to be passed to the second page? Currently, you set MainPage = new AppShell () in App class, right? After going to the second page, do you want to go back to the first page?

You could try setting MainPage = new Page1(), then going to the Shell in Page1 so that it looks like the shell is the second page. ( App.Current.MainPage = New AppShell())

Or try TabbedPage instead of Shell.

Since it's not clear about your expected behavior, I'm not sure if this is what you want.

For further help, could you provide more details and describe more about your expected behavior?
-- -- 957 Reputation points

2023-08-14T08:43:10.8033333+00:00

Hi Wenyan

First page has the collectionview which when clicked goes to the second page which shows the details of the item selected in collectionview. I need to perform an operation on the second page and need a button at t he bottom of the page. This button is not needed on the first page.

Thanks

Regards
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,456 Reputation points Microsoft External Staff

2023-08-14T09:47:32.18+00:00

Currently, the MainPage of App is not AppShell, right?

-- -- 957

Hi Wenyan

The app flow is as below;

App.xaml.cs

Current.MainPage = new AppShell();

AppShell.xaml

<ShellContent Route="HomePage"
              ContentTemplate="{DataTemplate local:HomePage}"
              Title="Home" >
</ShellContent>

HomePage.cs

await Shell.Current.GoToAsync("//UpcomingJobsPage");

UpcomingJobsPage.xaml

                <CollectionView>
                                 ...
                                    <TapGestureRecognizer 
                                        Command="{Binding Source={RelativeSource AncestorType={x:Type local1:UpcomingJobsViewModel}}, Path=ItemTapped}"
                                        CommandParameter="{Binding .}">
                                    </TapGestureRecognizer>
                                ...
                </CollectionView>

UpcomingJobsViewModel.cs

await Shell.Current.GoToAsync($"{nameof(UpcomingJobsDetailsPage)}?{nameof(UpcomingJobsDetailsViewModel.ItemId)}={item.ID}");

UpcomingJobsDetailsPage is the page I need the bottom button on. A button that does not move with page scroll.

Thanks

Regards

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,456 Reputation points Microsoft External Staff

2023-08-15T09:03:25.59+00:00
Is the following ShellContent wrapped in a TabBar? Like the official sample? Are there some other tabs on the Shell?

<ShellContent Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" Title="Home" > </ShellContent>

UpcomingJobsDetailsPage is the page I need the bottom button on

If there is a TabBar in your app, and you want to show the TabBar on this page, you could try setting Shell.TabBarIsVisible="True" for this page. And you can set Shell.TabBarIsVisible="False" for other pages.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,456 Reputation points Microsoft External Staff

2023-08-17T07:27:18.0066667+00:00

May I know whether your issue has been solved or not? If you're still having problems, please explain in detail what is still going wrong and what you need help with.

Answer accepted by question author

0 additional answers

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,456 Reputation points Microsoft External Staff

2023-08-14T06:54:40.48+00:00

Are there any arguments need to be passed to the second page? Currently, you set MainPage = new AppShell () in App class, right? After going to the second page, do you want to go back to the first page?

You could try setting MainPage = new Page1(), then going to the Shell in Page1 so that it looks like the shell is the second page. ( App.Current.MainPage = New AppShell())

Or try TabbedPage instead of Shell.

Since it's not clear about your expected behavior, I'm not sure if this is what you want.

For further help, could you provide more details and describe more about your expected behavior?
-- -- 957 Reputation points

2023-08-14T08:43:10.8033333+00:00

Hi Wenyan

First page has the collectionview which when clicked goes to the second page which shows the details of the item selected in collectionview. I need to perform an operation on the second page and need a button at t he bottom of the page. This button is not needed on the first page.

Thanks

Regards
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,456 Reputation points Microsoft External Staff

2023-08-14T09:47:32.18+00:00

Currently, the MainPage of App is not AppShell, right?
-- -- 957 Reputation points

2023-08-15T03:15:18.3533333+00:00

Hi Wenyan

The app flow is as below;

App.xaml.cs

Current.MainPage = new AppShell();

AppShell.xaml

<ShellContent Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" Title="Home" > </ShellContent>

HomePage.cs

await Shell.Current.GoToAsync("//UpcomingJobsPage");

UpcomingJobsPage.xaml

<CollectionView> ... <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type local1:UpcomingJobsViewModel}}, Path=ItemTapped}" CommandParameter="{Binding .}"> </TapGestureRecognizer> ... </CollectionView>

UpcomingJobsViewModel.cs

await Shell.Current.GoToAsync($"{nameof(UpcomingJobsDetailsPage)}?{nameof(UpcomingJobsDetailsViewModel.ItemId)}={item.ID}");

UpcomingJobsDetailsPage is the page I need the bottom button on. A button that does not move with page scroll.

Thanks

Regards
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,456 Reputation points Microsoft External Staff

2023-08-15T09:03:25.59+00:00

Is the following ShellContent wrapped in a TabBar? Like the official sample? Are there some other tabs on the Shell?

<ShellContent Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" Title="Home" > </ShellContent>

UpcomingJobsDetailsPage is the page I need the bottom button on

If there is a TabBar in your app, and you want to show the TabBar on this page, you could try setting Shell.TabBarIsVisible="True" for this page. And you can set Shell.TabBarIsVisible="False" for other pages.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,456 Reputation points Microsoft External Staff

2023-08-17T07:27:18.0066667+00:00

May I know whether your issue has been solved or not? If you're still having problems, please explain in detail what is still going wrong and what you need help with.

Answer 1

Hello,

UpcomingJobsDetailsPage is the page I need the bottom button on

If there is a TabBar in your app, and you want to show the TabBar on this page, you could try setting Shell.TabBarIsVisible="True" for this page. And you can set Shell.TabBarIsVisible="False" for other pages.

Best Regards,

Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Share via

Shell tab button on page

0 additional answers

Your answer