I have added Tabbbed Page with navigation Page. e,g
Code Inside tabbed Page.
var NavPage = new NavigationPage(new Page1());
NavPage.Icon = "Icon1";
NavPage.Title = "Tab1";
Children.Add(NavPage);
above code not showing Page1 on tab1 click.
Could you please tell Is anything wrong with above code?
Page1 is Content Page.
It work when code like below.
var Page1 = new ContentPage
{
Content = button,
};
NavigationPage.SetHasNavigationBar(Page1 , false);
var navigationPage = new NavigationPage(page) { Title = "click" }
I want to follow approach one.
Related
I want to remove Tabbar from TabbedPage. I got it working but it leaves blank space or page height is not updated after hiding Tabbar.
Note that when we swipe through the pages, the blank goes and never comes back. This issue appears only for the first time.
I have tried from this link. But it doesn't work.
Also tried following
private void Element_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
try
{
TabBar.Hidden = true;
//TabBar.Bounds = new CoreGraphics.CGRect(View.Subviews[0].Frame.X, View.Subviews[0].Frame.Y,
// View.Subviews[0].Frame.Width, 0);
if (TabBar.Hidden)
{
// page
View.Subviews[0].Frame = new CoreGraphics.CGRect(0, 0, View.Subviews[1].Frame.Width, NativeView.Frame.Height);
// Tabbar
View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[0].Frame.X, View.Subviews[0].Frame.Y,
View.Subviews[0].Frame.Width, 0);
}
else
{
View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[1].Frame.X, View.Subviews[1].Frame.Y,
View.Subviews[1].Frame.Width, 49);
View.Subviews[0].Frame = new CoreGraphics.CGRect(View.Subviews[0].Frame.X, View.Subviews[0].Frame.Y,
View.Subviews[0].Frame.Width, View.Subviews[0].Frame.Height - 49);
}
//if (TabBar.Hidden)
// View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[1].Frame.X, View.Subviews[1].Frame.Y, View.Subviews[1].Frame.Width, 0);
//else
// View.Subviews[1].Frame = new CoreGraphics.CGRect(View.Subviews[1].Frame.X, View.Subviews[1].Frame.Y, View.Subviews[1].Frame.Width, 49);
}
catch (Exception ex)
{
//TraceLog("Element_PropertyChanged" + ex.Message);
}
}
EDIT
I open tabbed page on list view item clicked. I allow to add multiple tabs dynamically. Also I have created custom tabbar using ContentView that I update when pages are added or removed from TabbedPage.
The sequence is :
- User opens first tab.
- Click on home icon given on tabbed page.
- open the second page by click on another list item
- swipe through the page and the page height will be normal.
Here is the code on ListView_ItemTapped (Not posted exactly how is it actually but you can get idea :) )
MultiTab ObjMultiTab = new MultiTab(); // Initialize tabbed page
// Get data from server
ObjMultiTab.Data = ObjData;
int Id = Convert.ToInt32(ObjData.id);
if (ActiveList.ContainsKey(Id)) // Dictionary that contains info about index and pageid that are already open
{
TabId = ActiveList[ObjData.id];
CurrentPage = Children[TabId]; // If user taps on already opend page
}
else
{
Count += 1; ActiveList.Add(Id, Count);
Children.Add(new SecondTabbedPage(TableData)); // Or add new child
CurrentPage = Children[Count];
}
await Application.Current.MainPage.Navigation.PushModalAsync(ObjMultiTab);
Is there any way to remove blank space for the first time also ?
Adding following function to the renderer removed blank space from TabbedPage.
public override void ViewDidLayoutSubviews()
{
base.ViewDidLayoutSubviews();
TabBar.Hidden = true;
var page = View.Subviews[0];
var tabbar = View.Subviews[1];
tabbar.Bounds = CGRect.Empty;
page.Bounds = UIScreen.MainScreen.Bounds;
}
There is a solution that doesn't require any renders and works on both Android and iOS.
Wrap the TabbedPage in a NavigationPage so the structure of your app becomes
NavigationPage (root)
TappedPage
NavigationPage
ContentPage (with tabbar)
ContentPage (without tabbar)
On the TabbedPage you have to hide the navigationbar of the 'root' NavigationPage, otherwise you have 2 navbars.
<TabbedPage
...
HasNavigationBar="False">
If you push a page using the 'root' NavigationPage, the tabbar is hidden and there is no blank space at the bottom.
--- Edit ---
See my example at:
https://github.com/Jfcobuss/HideTabbarExample/tree/master/HideTabbarExample
Downside of this solution is
It is bit of an hacky workaround
The title next to back-button is the title of the TabbedPage, not the current tab
The animation to the next page is not as fluent as default
I have an IOS App with a Tabbar and an embedded Xamarin Forms Page with a listview.
This is the code used to embedd it:
contactListViewController = new Business.Views.ContactListView { BindingContext = ViewModel }.CreateViewController();
contactListViewController.WillMoveToParentViewController(this);
View.Add(contactListViewController.View);
AddChildViewController(contactListViewController);
contactListViewController.DidMoveToParentViewController(this);
The page is displayed correctly, but it does have an additional bar on the top.
How can I get rid of that? I tried to set it to hidden on the NavigationController. But it doesn't have one (NavigationController is always null).
How can I remove that bar?
The solution is, to hide the Navigationbar on the mainpage not the new added ViewController:
NavigationController.NavigationBarHidden = true;
// add subview.
activityViewController = new Business.Views.ActivityView { BindingContext = ViewModel }.CreateViewController();
activityViewController.WillMoveToParentViewController(this);
View.Add(activityViewController.View);
AddChildViewController(activityViewController);
activityViewController.DidMoveToParentViewController(this);
I have pushed a new ModalPage onto my current NavigationPage using await Navigation.PushModalAsync(new ProfilePage()); I cannot figure out how to create a NavigationPage inside the ModalPage. I want to load another page, wrapping inside a NavigationPage so that the loaded page has a navigation bar and back button to be able to return to the ModalPage (ProfilePage).
I am trying to achieve:
NavigationPage > ModalPage > New NavigationPage
I have tried creating a new NavigationPage inside the ModalPage and pushing the new page onto the NavigationPage but nothing happens. e.g.
var navigationPage = new NavigationPage(this);
navigationPage.PushAsync(new Page());
Can anyone help?
var page = new NavigationPage(new MyPage());
Navigation.PushModalAsync(page);
I have a form in my Xamarin project that its result is something like that:
Basically there is a header (1) and a body of this form (2). The header is quite simple build with AbsoluteLayout.
For creating the body (2) I've created my component to show a tab control and then for each tab a specific grid with images and text. For each section, I'm checking in the database how many records there are for it and change the text. This activity is very long and I'm trying to understand why and how I can improve speed.
Then I should cut the corner to add later in my page the tab control so the user can see immediately the header and after few second all page. The code is like the following:
public class MyPage : WaitingPage
{
public MyPage(Card card)
{
LoadingMessage = "Loading...";
ShowLoadingFrame = true;
ShowLoadingMessage = true;
ShadeBackground = true;
WaitingOrientation = StackOrientation.Vertical;
IsWaiting = true;
StackLayout stackPage = new StackLayout() {
BackgroundColor = Color.FromHex("#fff"),
Children = {
ShowHeader(card),
}
};
Content = stackPage;
Task.Yield();
Task.Run(async () => {
Content = await ShowDetails(card);
});
IsWaiting = false;
}
}
I tried different ways to add the content from await ShowDetails(card); but nothing happens. Basically the content doesn't change unless await ShowDetails(card); is executed. I discovered Task.Yield(); (you can wait the page is rendered and showed and then continue) but in this case doesn't work. And also WaitingPage doesn't show the message.
Any suggestions or help? Thank you in advance
I'm trying to use GridView from Forms Lab. Problem is that I'm not getting anything shown on screen. One thing to note - when i set Content = gridView or Content = mainLayout I'm getting null pointer reference exception, but i cannot find out which element is null. Here's code in view :
var itemTemplate = new DataTemplate(typeof (MedicineBoxItemCell));
var gridView = new GridView();
gridView.ItemsSource = medicineBoxViewModel.MedicineBoxViewModelItems;
gridView.ItemTemplate = itemTemplate;
StackLayout mainLayout = new StackLayout();
mainLayout.Children.Add(gridView);
var scrollView = new ScrollView()
{
Content = mainLayout,
BackgroundColor = Color.Yellow
};
Content = scrollView;
}
public class MedicineBoxItemCell : ViewCell
{
public MedicineBoxItemCell()
{
var name = new Entry()
{
HorizontalOptions = LayoutOptions.FillAndExpand
};
name.SetBinding(Entry.TextProperty, "MedicineBoxItem.Medicine.Name");
View = name;
}
}`
What platform are you testing? This a very alpha version that has some problems, specially with ItemTemplate.
Try one of the demo ViewCells and see if it works for you.. and go from there.
One thing that will not work is having a layout inside a layout on the template. For example, if you are using a Grid, and inside the grid u have a stackpanel that stackpanel and it's contents will not appear , it s somethign we don't know how to fix yet.