Adding my own pages to bottom navigation - xamarin

I'm following this guide (https://15mgm15.ghost.io/2018/06/06/bottom-tabbed-page-for-xamarin-forms-android/) but I cant figure out how to add the pages I've added to the project.
I need to add something here in order for the app to understand which pages are to be shown:
<TabbedPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:bottom"
x:Class="bottom.MainPage">
<TabbedPage.Children>
<ContentPage Title="Page 1" Icon="death_star.png"/>
<ContentPage Title="Page 2" Icon="green_star.png"/>
<ContentPage Title="Page 3" Icon="star.png"/>
</TabbedPage.Children>
</TabbedPage>
Right now, It is only showing the tabbed page since it doesnt know which pages to get info from.

Strongly recommend that you read the official docs: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page
If you are attempting to add an existing XAML page to the tabbed page, you would need to replace each ContentPage element in your code above with the pages you want.
eg if you had a page called "MyTestPage"
<TabbedPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:bottom"
x:Class="bottom.MainPage">
<TabbedPage.Children>
<MyTestPage Title="Page 1" Icon="death_star.png"/>
<ContentPage Title="Page 2" Icon="green_star.png"/>
<ContentPage Title="Page 3" Icon="star.png"/>
</TabbedPage.Children>

Related

Xamarin forms Prism Content Page Design

I'm working on Xamarin Project and I don't need navigation bur, I switched it off but now I cant move app content of page
<?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:prism="http://prismlibrary.com"
prism:ViewModelLocator.AutowireViewModel="True"
xmlns:imgExt="clr-namespace:GulfStar.Xamarin.Extensions"
x:Class="GulfStar.Xamarin.Views.StatusPickerPage"
NavigationPage.HasNavigationBar="False">
<StackLayout>
<StackLayout Orientation="Horizontal" VerticalOptions="Start" >
<Image Source="{imgExt:ImageResource GulfStar.Xamarin.Images.Icon.png}" WidthRequest="70" HeightRequest="70"/>
<Label HorizontalOptions="Center" Margin="0,17,0,0" FontSize="Title">GSI Accountability</Label>
</StackLayout>
</StackLayout>
</ContentPage>
I figured out who it happen
How to remove blue section
Use NavigationPage.SetHasNavigationBar(this, false); to hide the navigation bar.
I figured out how to make that thing disappears
when you navigation to some page does not use Navigation page NavigationService.NavigateAsync("NavigationPage/StatusPickerPage");
Use
NavigationService.NavigateAsync("StatusPickerPage");
And it would not track navigation and its not needed if you have only two pages

Going from the carousel page to the carousel view

I read the following message on the page: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/carousel-page
The CarouselPage has been superseded by the CarouselView, which
provides a scrollable layout where users can swipe to move through a
collection of items. For more information about the CarouselView, see
Xamarin.Forms CarouselView.
In this regard, I decided to start using the CarouselView.
But when I tried to use the carousel to look out for the page carousel and got an error: the ElementTemplateContent property was set more than once.
<CarouselView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:test.Views"
x:Class="test.Corusel">
<CarouselView.ItemTemplate>
<DataTemplate>
<local:Page1></local:Page1>
<local:Page2></local:Page2>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Here is the result I want to get.
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:test.Views"
x:Class="test.Corusel">
<CarouselPage.Children>
<local:Page1></local:Page1>
<local:Page2></local:Page2>
</CarouselPage.Children>
I wanted to use the carousel view because I need indicators.
Your DataTemplate contains 2 child elements. Remove one and it will work.
There can be only be 1 template content inside DataTemplate.
If you want to use both,you can add both pages in any single layout like StackLayout,ContentView,ContentPage etc:
<CarouselView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:test.Views"
x:Class="test.Corusel">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<local:Page1></local:Page1>
<local:Page2></local:Page2>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
Or
you can merge both pages code into a single page
You can use DataTemplateSelector if you need different templates for different items: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/populate-data#choose-item-appearance-at-runtime

How can I change the font size in the title area of the Navigation bar in Xamarin Forms?

The font that I have is too big for the amount of words that I would like to display. Does anyone have any suggestions as to how I can change the font size. I would prefer to be able to do it in the shared code but if it needs a custom renderer then can someone show me how this can be done?
So, if you are using Xamarin.Forms 3.2.0 or above, you can use TitleView property like this:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xamarin.Forms.Controls.GalleryPages.TitleView">
<NavigationPage.TitleView>
<Label Text="This is my Title" FontSize="12" TextColor="White" />
</NavigationPage.TitleView>
<!-- YOUR CONTENT HERE-->
</ContentPage>

How to add Search bar in top of a tabbed page in xamarin forms

In my xamarin app,I want to add a search bar on top of the page in my tabbed page.
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Sample.Mobile.Test">
<StackLayout>
<SearchBar></SearchBar>
</StackLayout>
<TabbedPage.Children>
<ContentPage x:Name="tab1" Title="Home">
</ContentPage>
</TabbedPage.Children>
</TabbedPage>
You can use follow this link for the Search bar Implementation
https://developer.xamarin.com/api/type/Xamarin.Forms.SearchBar/

Do I need to surround a <TableView> with a <StackLayout> in a <ContentPage>

I am working on an application where the developer has a <ContentPage> with a <TableView> inside. Is this needed / normal practice? I am trying to work out why the developer did this.
The developer added a element surrounding the <TableView>
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="Network">
<ContentPage.Content>
<StackLayout>
<TableView>
...
</TableView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
A ContentPage can only have a single child element. It's not uncommon to include some sort of Layout container as the child, so multiple child elements can be added to the page. However, in cases like this where there is really only a single child it's probably unnecessary.

Resources