I have a brand new Xamarin Shell application. I just want to disable one of the buttons in the TabBar section. I see there is an IsEnabled property but even if I set it to False, the button is still clickable and the view becomes visible.
<TabBar>
<ShellContent Title="Home" Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}"/>
<ShellContent Title="Settings" Route="SettingsPage" ContentTemplate="{DataTemplate local:SettingsPage}" IsEnabled="False" />
</TabBar>
Is it not possible to disable the buttons that appear in the lower navigation of a Xamarin.Forms application? I was hoping to disable certain buttons when conditions weren't met and enable them using event listeners.
I believe #ToolmakerSteve's comments would work, what I ended up doing was putting each ShellContent in its own Tab:
<TabBar>
<Tab>
<ShellContent Title="Home" Route="HomePage" ConentTemplate="{DataTemplate local:HomePage}"/>
</Tab>
<Tab>
<ShellContent Title="Settings" Route="SettingsPage" ContentTemplate="{Data Template local:SettingsPage}" IsEnabled="False" />
</Tab>
</TabBar>
Then I subscribed to events in the ShellContent class and enabled / disabled the Settings button at will.
Related
How to define the following navigation hierarchy in a Xamarin.Forms Shell application?
Navigation Tab (route "main")
Page with Orders List (route "orders")
Detail Page for one order (route "order", parameter "orderId")
Sub-Detail Page 1 for that particular order (route "details1", parameter "orderId")
Sub-Detail Page 2 for that particular order (route "details2", parameter "orderId")
It works well as long as there is only the order page without having the sub-detail pages defined. I can navigate then to that page via Shell.Current.GoToAsync("//main/orders/order?orderId=5") route.
But when I add the sub-detail pages (doesn't matter if I do this via XAML or Routing.RegisterRoute), the same GoToAsync call fails with System.ArgumentException: 'unable to figure out route for: //main/orders/order?orderId=5'
Hierarchy definition via XAML:
<Tab Title="My Orders" Route="main">
<ShellContent ContentTemplate="{DataTemplate pages:OrdersListPage}" Route="orders">
<ShellContent ContentTemplate="{DataTemplate pages:OrderPage}" Route="order">
<ShellContent ContentTemplate="{DataTemplate pages:OrderDetailPage1}" Route="details1" />
<ShellContent ContentTemplate="{DataTemplate pages:OrderDetailPage2}" Route="details2" />
</ShellContent>
</ShellContent>
</Tab>
Same exception when I define it via custom routes:
Routing.RegisterRoute("main/orders/order", typeof(pages:OrderPage));
Routing.RegisterRoute("main/orders/order/details1", typeof(pages:OrderDetailPage1));
Routing.RegisterRoute("main/orders/order/details1", typeof(pages:OrderDetailPage1));
I have a workaround for this, you could RegisterRoute for the third and fourth level Route again in the AppShell.xaml.cs.
As follows:
Routing.RegisterRoute("Order", typeof(OrderPage));
Routing.RegisterRoute("Details1", typeof(OrderDetailPage1));
Then can use the follow route path to navigate:
Shell.Current.GoToAsync("//main/orders/Order/Details1?orderId=5")
If you Register the Route for each Page in .cs code, it will work. Generally, the first and second level if defined in Xaml, it seems not need to re-register in code again. Therefore, I only re-register the third and fourth Route with a name-key, not a path-key.
I'm using the Xamarin.Form Shell Flyout.
When click item menu, from the second time, the page don't reload.
How do reload page (reload data) when click item menu in Xamarin.Form Shell Flyout?
<FlyoutItem Route="animals" Title="Animals" FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Route="Monkeys" Title="Monkeys" Icon="tab_feed.png" ContentTemplate="{DataTemplate local:MonkeysPage}" />
</FlyoutItem>
You can reload the page in the OnAppearing method:).
I have a Xamarin Forms Shell Application with a flyout. My entries are defined like this:
<FlyoutItem Title="{x:Static resources:Strings.DashboardTitle}" FlyoutIcon="ic_dashboard_black">
<Tab>
<ShellContent>
<dashboard:DashboardPage />
</ShellContent>
</Tab>
</FlyoutItem>
This works so far as the icons is shown. But to support light and dark theme I would like for example to be able to bind that with an AppThemeBinding. Is that possible? Or how would I theme the icons in the flyout?
You can use AppThemeBinding markup extension to define image source under light/dark mode:
<FlyoutItem Title="{x:Static resources:Strings.DashboardTitle}" FlyoutIcon="{AppThemeBinding Light=lightlogo.png, Dark=darklogo.png}">
<Tab>
<ShellContent>
</ShellContent>
</Tab>
</FlyoutItem>
The following requirements must be met for Xamarin.Forms to respond to a system theme change:
Xamarin.Forms 4.6.0.967 or greater.
iOS 13 or greater.
Android 10 (API 29) or greater.
UWP build 14393 or greater.
Responding to a system theme change is currently experimental, and can only be used by setting the AppTheme_Experimental flag.
Refer: Enable flags in platform projects
I am using Xamarin.Forms Shell and I have bottom Tab Bar navigation with no Flyout.
<TabBar Route="tabs">
<Tab Title="Page1" Route="page1" Icon="page1.png">
<ShellContent ContentTemplate="{DataTemplate local:Page1}" />
</Tab>
<Tab Title="Page2" Route="page2" Icon="page2.png">
<ShellContent Route="page2A" ContentTemplate="{DataTemplate local:Page2A}" />
<ShellContent Route="page2B" ContentTemplate="{DataTemplate local:Page2B}" />
</Tab>
<Tab Title="Page3" Route="page3" Icon="page3.png">
<ShellContent ContentTemplate="{DataTemplate local:Page3}" />
</Tab>
</TabBar>
I want the content of the page2 tab to be programatically determined using GoToAsync("tabs/page2/page2A") and GoToAsync("tabs/page2/page2B").
This way there should be persistence when the user navigates between tabs as to which ShellContent is displayed (e.g. page2A or page2B).
The behaviour works fine, but I want to hide the TOP Tab Bar that allows the user to navigate between the two ShellContent pages. Is there a way to do that in Xamarin.Forms Shell?
I can't find a way to do this with routes. The desired behaviour can be achieved with:
(Shell).CurrentItem.Navigation.PushAsync({desired_content});
By pushing onto the CurrentItem's Navigation the content within a tab can be updated, and will persist while the user navigates between bottom-bar tabs.
I am using the xamarin. forms application, where there will be two tabs with a search icon in the navigation bar. What I wanted here to implement is, when the search icon is tapped all the navigation bar and the tabs should disappear and open the search bar with respect to the current tab.
The example: initially, the page will be like as
when the search icon is tapped, I want the view as follows.
how can it be achieved?
You can use Xamarin's latest Xamarin.Forms Shell to achieve tabbed page kind of Layout.
Refer to following code structure:
AppShell.Xaml
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:views="clr-namespace:ProjectName.Views"
x:Class="ProjectName.AppShell">
<Tab>
<ShellContent
Title="Page1"
ContentTemplate="{DataTemplate views:Page1}" />
<ShellContent
Title="Page2"
ContentTemplate="{DataTemplate views:Page2}" />
</Tab>
</Shell>
Page1.Xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ProjectName.Views.Page1"
Title="Page1">
<Shell.SearchHandler>
<SearchHandler Placeholder="Enter search term"/>
</Shell.SearchHandler>
<ContentPage.Content>
<!--Get you desired content here-->
</ContentPage.Content>
</ContentPage>
Output: