new to Xamarin form.
I have the Following Tabbed Page. I wanted to do the following:
1) The background Color of the Tab is white Or One with Color,one with white color.
2) change the color of the underline of the Tab.
3) How many Tab can I have?
4) The fontsize for the Text.
5) Since each Tab has a contentPage, How to reference contentPage from outside instead inside the Tab as my contentpage is very long and complex.
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
BackgroundColor="White"
x:Class="MainPage2">
<ContentPage Title ="Page1" Icon="itemIcon1" WidthRequest="200" BackgroundColor="White">
<ContentPage.Content>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label Text="T1">
</Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
<ContentPage Title ="Page2" Icon="itemIcon2" WidthRequest="200" BackgroundColor="White">
<ContentPage.Content>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label Text="T2">
</Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
<ContentPage Title ="Page3" Icon="itemIcon3" WidthRequest="200">
<ContentPage.Content>
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Label Text="T3">
</Label>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</TabbedPage>
Thanks
Styling the Tabs
Styling the tabs background color, text size, and highlight will need to be handled in your platform-specific projects. So, for Android this can be achieved by overriding the base styles with a custom theme, which you can modify in Resources > values > styles.xml
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<color name="CustomHighlight">#android:color/transparent</color>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:tabWidgetStyle">#android:style/Widget.TabWidget</item>
...
<!-- The rest of your styles would go here -->
...
</style>
<style name="Widget.TabWidget">
<item name="android:textAppearance">#style/TextAppearance.Widget.TabWidget</item>
<item name="android:ellipsize">marquee</item>
<item name="android:singleLine">true</item>
</style>
<style name="TextAppearance.Widget.TabWidget">
<item name="android:textSize">14sp</item>
<item name="android:textStyle">normal</item>
<item name="android:textColor">#android:color/tab_indicator_text</item>
</style>
</resources>
(Liberally borrowed from this question: Android - How to Change Color of Selected Tab)
Your in-line background colors should suffice in your .xaml markup:
<ContentPage Title ="Page2" Icon="itemIcon2" WidthRequest="200" BackgroundColor="White">
For iOS, changing the highlight color is fairly trivial. In your AppDelegate.cs:
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
UITabBar.Appearance.TintColor = UIColor.Red;
global::Xamarin.Forms.Forms.Init();
...
Things get hairy from there, so I'll refer you to the developer documentation, which has a great walkthrough for creating a custom renderer: Customize Tab Bar on iOS
Tab Count
From the documentation
The user can scroll the collection of tabs that are across the top of the screen if that collection is too large to fit on one screen.
So really, the number of tabs is only limited to what makes sense from a user experience standpoint. I try not to have more than 6, personally, but your use-case may justify a few more.
Related
I have a TabbedPage with 3 tabs, where I want to navigate directly to the 2nd content page (TagsListPage), but still keep my Tabbed header.
<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="BradyRfidDemo.V1.MobileApp.Views.TabbedInventoryPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:BradyRfidDemo.V1.MobileApp.Views"
Title=" SCAN PAGE"
Shell.NavBarIsVisible="false">
<local:InventoryPage />
<local:TagsListPage />
<local:Transfer />
</TabbedPage>
TagsListPage: (I removed most of the code to make it clean).
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="BradyRfidDemo.V1.MobileApp.Views.TagList"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="TAGLIST"
BackgroundColor="{StaticResource Color1}">
<ContentPage.Content>
<StackLayout >
<Frame >
<StackLayout
HorizontalOptions="Center"
Orientation="Horizontal"
VerticalOptions="Center">
<Label
x:Name="TagList"
Margin="0,10,0,0"
HorizontalTextAlignment="Center"
Text="TAGLIST" />
</StackLayout>
</Frame>
</StackLayout>
</ContentPage.Content>
</ContentPage>
So I want to access from another form content page, directly the TagsListPage, and keep my tabbed header.
If I go to the main page, I get my tabbed header, but it goes to the first page (InventoryPage)
Navigation.PushAsync(new TabbedInventoryPage());
If I go directly to the TagListPage, then I get my page, but not the tabbed structure which I need as well.
Navigation.PushAsync(new TagsListPage());
I tried a lot of different things, but nothing worked so far, and this looks like a very simple thing to do. Any help is greatly appreciated.
Image:
I would like to add a frame to toolbar in Xamarin forms. But toolbar is not accepting.
You cannot add a frame as a Toolbar Item.
You can use, for example the TitleView and customize the whole NavigationView yourself.
For example:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TitleViewSample"
x:Class="TitleViewSample.MainPage">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal">
<Label Text="Hello World" HorizontalOptions="Center"/>
<Frame BackgroundColor="Yellow" HorizontalOptions="End"/>
</StackLayout>
</NavigationPage.TitleView>
</ContentPage>
I have changed the default color of the navigation bar by using these codes in app.xaml as I am unable to make it transparent on iOS devices:
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor" Value="#0a82b8" />
<Setter Property="BarTextColor" Value="#ffffff" />
</Style>
Now, there is an unnecessary navigation bar separator on iOS:
On Microsoft's official website, it says these codes can be helpful:
This platform-specific hides the separator line and shadow that is at
the bottom of the navigation bar on a NavigationPage. It's consumed in
XAML by setting the NavigationPage.HideNavigationBarSeparator bindable
property to false:
<NavigationPage ...
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:NavigationPage.HideNavigationBarSeparator="true">
</NavigationPage>
Alternatively, it can be consumed from C# using the fluent API:
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
public class iOSTitleViewNavigationPageCS : Xamarin.Forms.NavigationPage
{
public iOSTitleViewNavigationPageCS()
{
On<iOS>().SetHideNavigationBarSeparator(true);
}
}
Source: Hiding the Navigation Bar Separator on a NavigationPage
The problem is that when I want to paste the ios:NavigationPage.HideNavigationBarSeparator="true" property into the <NavigationPage>tag, it gives this error:
No property, bindable property, or event found for 'HideNavigationBarSeparator', or mismatching type between value and property.
My full codes are:
<?xml version="1.0" encoding="utf-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:My.App" x:Class="My.App.MainPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu" BackgroundColor="#0a82b8" Icon="menu.png">
<StackLayout Orientation="Vertical">
<ListView x:Name="navigationDrawerList" RowHeight="55" SeparatorVisibility="None" BackgroundColor="#ffffff" ItemSelected="OnMenuItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for our menu items -->
<StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal" Padding="20,10,0,10" Spacing="20">
<Label Text="{Binding Title}" FontSize="Large" VerticalOptions="Start" HorizontalOptions="CenterAndExpand" TextColor="#28DDFF" FontAttributes="Bold" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:NavigationPage.HideNavigationBarSeparator="true">
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Here is the tutorial which I followed for the MasterDetail navigation. The file which has <NavigationPage> tag is named as MainPage.xaml
You can use a custom renderer to hide that shadow:
[assembly: ExportRenderer(typeof(NavigationPage), typeof(CustomNavigationPage))]
namespace CustomNavigationPage.iOS
{
public class CustomNavigationPage : NavigationRenderer
{
protected override void OnElementChanged(VisualElementChangedEventArgs e)
{
base.OnElementChanged(e);
NavigationBar.SetBackgroundImage(new UIKit.UIImage(), UIKit.UIBarMetrics.Default);
NavigationBar.ShadowImage = new UIKit.UIImage();
}
}
}
While you have accepted the answer, this one is more precise - you haven't followed the instructions that you have pasted from the site as you have ommited this line:
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
Place UINavigationBar.Appearance.ShadowImage = new UIImage(); inside the public override bool FinishedLaunching(UIApplication app, NSDictionary options) method within AppDelegate.cs file. AppDelegate.cs resides within the iOS project of Xamarin.Forms
Is it possible to add a switch on the toolbar?
<ContentPage.ToolbarItems>
<ToolbarItem>
<Switch x:Name="Switch1" IsToggled="True" Margin="5,0,0,0"/>
</ToolbarItem>
</ContentPage.ToolbarItems>
Does anybody have any ideas?
Thanks!
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:TitleViewSample"
x:Class="TitleViewSample.MainPage">
<NavigationPage.TitleView>
<Switch x:Name="Switch1" IsToggled="True" Margin="5,0,0,0"/>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
I don't think it is possible. You can, however, take the same approach I did when I needed to customise my title bar.
First, you hide the navigation bar, then you can specify your bar at the top, and use the controls you would like.
I have multiple ContentPage xaml files in my Xamarin project. I want to embed a shared piece of xaml into each ContentPage. There is nothing particularly special about the shared piece of xaml (it does't need to do anything platform specific). Shouldn't it be just as easy as embedding a tag in the xaml of the ContentPage to include the shared xaml file? Can someone point me in the right direction?
Thank you very much IdoT, It did work for me, but after adding some lines.
As this will help in making templates/custom controls/sub forms, easily added/shared across Xamarin.Forms.
Here is my full work based on your suggestion, so it can be used as is with others:
HeaderNavigationBar.xaml
<?xml version="1.0" encoding="utf-8" ?>
<StackLayout xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App9.MVC.Views.HeaderNavigationBar"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Padding="10"
ackgroundColor="White">
<Button Text="Internal 1" />
<Button Text="Internal 2" />
</StackLayout>
As you can see, added:
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
and in the HeaderNavigationBar.cs, it was declared as StackLayout:
HeaderNavigationBar.cs
using Xamarin.Forms;
namespace App9.MVC.Views
{
public partial class HeaderNavigationBar : StackLayout
{
public HeaderNavigationBar()
{
InitializeComponent();
}
}
}
then for the page that will hold it/show it:
MainView.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:common="clr-namespace:App9.MVC.Views;assembly=App9"
x:Class="App9.MVC.Views.MainView">
<StackLayout Padding="0,0,0,20">
<common:HeaderNavigationBar>
<Button Text="External 1" />
</common:HeaderNavigationBar>
<Button Text="Test Button 1
x:Name="btnPage1"
Clicked="btnPage1_clicked" />
</StackLayout>
</ContentPage>
As you can notice, the namespace has the full path, in the MainView:
xmlns:common="clr-namespace:App9.MVC.Views;assembly=App9"
Also, you can notice that there is a button called External 1, this will also show with the
Internal buttons, as the control is a StackLayout, so it can handle adding more controls.
Screenshot:
Also for Page inside another Page:
https://github.com/twintechs/TwinTechsFormsLib
http://blog.twintechs.com/advanced-xamarin-forms-techniques-for-flexible-and-performant-cross-platform-apps-part-5-page-in-page-embedding
Again thanks goes to IdoT.
You can take the parent child of your ContentPage (for example, a StackLayout that wraps all the children), put it in an external xaml file,
and then include that component in each one of your ContentPages.
The external xaml file will be a StackLayout type, rather than a ContentPage.
Edit - added a code sample:
Let's add a header StackLayout: we add a code behind class:
public partial class HeaderNavigationBar
{
public HeaderNavigationBar()
{
InitializeComponent();
}
}
Then add the XAML code:
<StackLayout x:Class="HeaderNavigationBar"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
Padding="10"
BackgroundColor="White">
<Image Source="burger_icon"
HorizontalOptions="StartAndExpand"
Aspect="AspectFit">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding SlideNavigationDrawerCommand}" />
</Image.GestureRecognizers>
</Image>
</StackLayout>
And finally, in the page where you want to reuse your component - add this reference:<HeaderNavigationBar />.