Tabbar not showing when i select flyout item in xamarine forms - xaml

Im new to xamarine forms, Please guide me what i did wrong, I wanted the tabbars stay visible either i select any flyout item...
<TabBar>
<Tab Title="Home" Icon="home.png">
<ShellContent ContentTemplate="{DataTemplate views:DashboardPage}" />
</Tab>
<Tab Title="Home" Icon="home.png">
<ShellContent ContentTemplate="{DataTemplate views:DashboardPage}" />
</Tab>
<Tab Title="Home" Icon="home.png">
<ShellContent ContentTemplate="{DataTemplate views:DashboardPage}" />
</Tab>
<Tab Title="Home" Icon="home.png">
<ShellContent ContentTemplate="{DataTemplate views:DashboardPage}" />
</Tab>
</TabBar>
<FlyoutItem Shell.TabBarIsVisible="True" Title="Info" Icon="home.png">
<ShellSection>
<ShellContent ContentTemplate="{DataTemplate views:DashboardPage}"/>
</ShellSection>
</FlyoutItem>
<FlyoutItem Shell.TabBarIsVisible="True" Title="Settings" Icon="card.png">
<ShellSection>
<ShellContent ContentTemplate="{DataTemplate views:DashboardPage}"/>
</ShellSection>
</FlyoutItem>


I wanted the tabbars stay visible either i select any flyout item...
If you want the same Tabbar then you would need to specify that tab bar for each flyout item. But, the four home ShellContents, you could put in the Home tab.
Xaml:
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="Home" Icon="tab_chat.png">
<ShellContent
Title="Home1"
ContentTemplate="{DataTemplate local:DashboardPage}"
Icon="tab_chat.png" />
<ShellContent
Title="Home2"
ContentTemplate="{DataTemplate local:DashboardPage}"
Icon="tab_chat.png" />
<ShellContent
Title="Home3"
ContentTemplate="{DataTemplate local:DashboardPage}"
Icon="tab_chat.png" />
<ShellContent
Title="Home4"
ContentTemplate="{DataTemplate local:DashboardPage}"
Icon="tab_chat.png" />
</Tab>
<ShellContent
Title="Info"
ContentTemplate="{DataTemplate local:DashboardPage}"
Icon="tab_about.png" />
<ShellContent
Title="Settings"
ContentTemplate="{DataTemplate local:DashboardPage}"
Icon="tab_feed.png" />
</FlyoutItem>

Related

I can't change the color of text on the Xamarin Forms Shell

If I use dark mode on my smartphone black color stays white only becomes more saturated. The black and white images are displayed in negative. I tried changing the code in AppShell.xaml, but nothing worked.
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:local="clr-namespace:App.Views"
Title="App"
x:Class="App.AppShell">
<!--
The overall app visual hierarchy is defined here, along with navigation.
https://learn.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/
-->
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="#0f4057" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.TabBarForegroundColor" Value="White"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
<Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<TabBar>
<ShellContent Title="Text" Icon="icon_feed.pn" Route="Page1" ContentTemplate="{DataTemplate local:Page1}" />
<ShellContent Title="Text" Icon="icon_feed.png" ContentTemplate="{DataTemplate local:Page2}" />
<ShellContent Title="Text" Icon="icon_feed.png" ContentTemplate="{DataTemplate local:Page3}" />
<ShellContent Title="Text" Icon="icon_feed.png" ContentTemplate="{DataTemplate local:Page4}" />
</TabBar>
<!--
If you would like to navigate to this content you can do so by calling
await Shell.Current.GoToAsync("//LoginPage");
-->
<TabBar>
<ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
</TabBar>
</Shell>

Have you looked at theme support which allows you to define a dark and light theme for your app.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/theming/system-theme-changes

You can use Application.Current.UserAppTheme = OSAppTheme.Dark; to get the theme of the current user and change it by binding AppThemeBinding.

How to center a Pivot header in Fluent UI?

I want to use a pivot in Fluent UI to display the menu.
<Pivot linkSize={PivotLinkSize.large}>
<PivotItem headerText='userInfo' headerButtonProps={}>
<UserPage />
</PivotItem>
<PivotItem headerText='userConfig'>
<UserSetting />
</PivotItem>
<PivotItem headerText='Store'>
<StorePage />
</PivotItem>
<PivotItem headerText='SubInfo'>
<SubInfo />
</PivotItem>
</Pivot>
It displays like this:
But I want to let the Pivot Header to the center, I have tried to change the styles attribute, but didn't have any progress.
How to align the the Pivot Header to center?

If you want all buttons to be horizontically centered, just make the Pivot a flexbox and justify all of its items centered:
<Pivot linkSize={PivotLinkSize.large}
styles={{ root: { display: 'flex', justifyContent: 'center' } }}>
<PivotItem headerText='userInfo' headerButtonProps={}>
<UserPage />
</PivotItem>
<PivotItem headerText='userConfig'>
<UserSetting />
</PivotItem>
<PivotItem headerText='Store'>
<StorePage />
</PivotItem>
<PivotItem headerText='SubInfo'>
<SubInfo />
</PivotItem>
</Pivot>

Xamarin.Forms Shell combine and order FlyoutItem with MenuItem in hambuger menu

I currently have a FlyoutItem with the FlyoutDisplayOptions property in AsMultipleItems, what this does is that the hamburger menu contains as elements the same secondary elements as the tabbed page. I also have some MenuItems in my design, at this moment it does not allow me to place a MenuItem inside the FlyoutItem, this is my current design:
FlyoutItem 1
FlyoutItem 2
FlyoutItem 3
FlyoutItem 4
FlyoutItem 5
MenuItem 1
MenuItem 2
MenuItem 3
MenuItem 4
MenuItem 5
For example, I want MenuItem 1 to be under FlyoutItem 1 and I can't do it in any way, does anyone know how I can sort an item that is not inside the FlyoutItem within that structure? For example, I would like this design:
FlyoutItem 1
MenuItem 1
FlyoutItem 2
MenuItem 2
FlyoutItem 3
MenuItem 3
FlyoutItem 4
MenuItem 4
FlyoutItem 5
MenuItem 5
Currently I can only order one structure over another, but I cannot combine and order different structures from each other.
This is my code:
<FlyoutItem Route="home" x:Name="flyoutItem"
FlyoutDisplayOptions="AsSingleItem">
<ShellContent Route="bottomtab1" Title="FlyoutItem 1"
Style="{StaticResource TabBackground}"
Icon="home_icon"
ContentTemplate="{DataTemplate views:x}" />
<ShellContent Route="bottomtab2" Title="FlyoutItem 2"
Style="{StaticResource TabBackground}"
Icon="home_icon"
ContentTemplate="{DataTemplate DataTemplate views:x}" />
<ShellContent Route="bottomtab3" Title="FlyoutItem 3"
Style="{StaticResource TabBackground}"
Icon="home_icon"
ContentTemplate="{DataTemplate DataTemplate views:x}" />
<ShellContent Route="bottomtab4" Title="FlyoutItem 4"
Style="{StaticResource TabBackground}"
Icon="home_icon"
ContentTemplate="{DataTemplate DataTemplate views:x}" />
<ShellContent Route="bottomtab5" Title="FlyoutItem 5"
Style="{StaticResource TabBackground}"
Icon="home_icon"
ContentTemplate="{DataTemplate DataTemplate views:x}" />
</FlyoutItem>
<MenuItem Text="MenuItem 1"
IconImageSource="home_icon" />
<MenuItem Text="MenuItem 2"
IconImageSource="home_icon" />
<MenuItem Text="MenuItem 3"
IconImageSource="home_icon"/>
<MenuItem Text="MenuItem 4"
IconImageSource="home_icon"/>
<MenuItem Text="MenuItem 5"
IconImageSource="home_icon"/>

You can multi FlyoutItem like the following code .
<FlyoutItem Route="home" x:Name="flyoutItem"
FlyoutDisplayOptions="AsSingleItem">
<ShellContent Route="bottomtab1" Title="FlyoutItem 1"
Style="{StaticResource TabBackground}"
Icon="home_icon"
ContentTemplate="{DataTemplate views:x}" />
</FlyoutItem>
<MenuItem Text="MenuItem 1"
IconImageSource="home_icon" />
<FlyoutItem Route="home"
FlyoutDisplayOptions="AsSingleItem">
<ShellContent Route="bottomtab2" Title="FlyoutItem 2"
Style="{StaticResource TabBackground}"
Icon="home_icon"
ContentTemplate="{DataTemplate DataTemplate views:x}" />
</FlyoutItem>
<MenuItem Text="MenuItem 2"
IconImageSource="home_icon" />
<FlyoutItem Route="home"
FlyoutDisplayOptions="AsSingleItem">
<ShellContent Route="bottomtab3" Title="FlyoutItem 3"
Style="{StaticResource TabBackground}"
Icon="home_icon"
ContentTemplate="{DataTemplate DataTemplate views:x}" />
</FlyoutItem>
<MenuItem Text="MenuItem 3"
IconImageSource="home_icon"/>

XAML babysteps. Using the child element to set a button background color

I have the following and am trying to use an alternative syntax to set the property element but the button now seems to be filling the whole page:
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Button
x:Name="bluebutton"
Width="100"
Height="40"
Content="Click Me" />
<!--Background="Blue"-->
<Button>
<Button.Background>
<SolidColorBrush Color="Blue" />
</Button.Background>
</Button>
</Page>
How do I still use this alternative syntax but apply the color to bluebutton ?

There are two buttons in your code. Perhaps you wanted to do this:
<Button
x:Name="bluebutton"
Width="100"
Height="40"
Content="Click Me">
<Button.Background>
<SolidColorBrush Color="Blue" />
</Button.Background>
</Button>

How to hide the title bar on a TabbedPage only on Android?

In Android, because the tab bar is at top, I don't need both title bar and tab bar to say which tab you're on.
This will hide the title bar for both platforms:
<TabbedPage>
<NavigationPage Title="Page 1">
<x:Arguments>
<local:Page1 NavigationPage.HasNavigationBar="false"/>
</x:Arguments>
</NavigationPage>
</TabbedPage>

try this:
<NavigationPage Title="Page 1">
<x:Arguments>
<Page>
<NavigationPage.HasNavigationBar>
<OnPlatform x:TypeArguments="x:Boolean">
<On Platform="Android" Value="False"></On>
</OnPlatform>
</NavigationPage.HasNavigationBar>
</Page>
</x:Arguments>
</NavigationPage>