I have a problem. I want to load a TabbedPage when I click on a button in a different page, so I created this code:
protected void imgAdd_Clicked(object sender, EventArgs args)
{
var tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new Page1());
tabbedPage.Children.Add(new Page2());
App.Current.MainPage = tabbedPage;
}
But the result is as follows:
As you can see the Image leaves a trail of the image when you swipe between the pages.
However, when I load the Tabbed Page using the App.xaml.cs it loads correctly without the flickering, so it seems to only occur when I call the tabbed page from another page...
Any ideas?
I make the sample to test. You could check the sample TabbedPageDemo on my github.
https://github.com/WendyZang/Test.git
Create two pages.
Page1.xaml:
<StackLayout >
<Image Source="pig.jpg"></Image>
</StackLayout>
Page2.xaml:
<StackLayout>
<Image Source="world.jpg"></Image>
</StackLayout>
With the code you provided.
var tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new Page1());
tabbedPage.Children.Add(new Page2());
App.Current.MainPage = tabbedPage;
Result:
Need more explanation about the issue,
The tabs in the Tabbedpage are dynamically created?
Suggestion: Use https://help.syncfusion.com/xamarin/tabbed-view/getting-started
it will save your time.
Related
I am fairly new and inexperienced. I have two questions. First: what would the xaml code in xamarin look like for such a button? The blue one should be the button. The button should contain a text and a picture. So it should also work that when the image or text is clicked, the button is actually clicked.
enter image description here
Second: my app has two sides. The start page is MainPage and the other page is Page1. I can switch to Page1 using a button on MainPage. I looked at a tutorial and in App.xaml.cs "MainPage = new MainPage ();" was made to "MainPage = new NavigationPage (new MainPage ());". Why was that done? Why does the page change via a button click not work differently?
enter image description here
Since it was coded to "MainPage = new NavigationPage (new MainPage ());" , there is a blue bar at the top of my MainPage. How can I remove this bar or make it white?
enter image description here
For the first question:
There is no such control now, but you can do this by using a Frame and adding an Image and Label to it，then you could add a TapGestureRecognizer to the Frame.
like:
<Frame CornerRadius="20" HorizontalOptions="Start" WidthRequest="100" HeightRequest="120" BackgroundColor="Blue" Padding="40">
<StackLayout Orientation="Vertical" >
<Image Source="heart.png"></Image>
<Label Text="hello world" BackgroundColor="Red" ></Label>
</StackLayout>
<Frame.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped">
</TapGestureRecognizer>
</Frame.GestureRecognizers>
</Frame>
handle the click event in code behind:
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
//do something
}
For the second question:
1)To move from one page to another, an application will push a new page onto the navigation stack.The NavigationPage class provides a hierarchical navigation experience where the user is able to navigate through pages, forwards and backwards, as desired. The class implements navigation as a last-in, first-out (LIFO) stack of Page objects.
2)The top blue bar we call it NavigationBar.If you want display it,you could set NavigationPage.SetHasNavigationBar(this, false); in your MainPage.xaml.cs like:
public MainPage()
{
InitializeComponent();
NavigationPage.SetHasNavigationBar(this, false);
}
or set it in the MainPage.xaml like：
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
NavigationPage.HasNavigationBar="False"
x:Class="YourNamespace.MainPage">
....
</ContentPage >
You could look at https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical for more details.
I have created a Master Detail Page
I am loading a list of items into the 'detail' frame / window
I want to replace the contents of that page with a template / view which never has any reason to exist as an item in the Menu Items
I have tried replacing MainPage and Navigation which load the page but you lose the Master Detail context - the menu
Please can someone tell me what I call in order to replace the current page with one of my choice while staying within the context of Master Detail?
This does not work, for example - it removes the MasterDetail menu
Navigation.PushAsync(new Arcade.Index());
I have created the MasterDetailPage by pretty much letting Visual Studio generate it. I set it after a successful login, like so:
var welcome = new Pages.Welcome();
Application.Current.MainPage = welcome;
This is an excerpt of the XAML for Welcome
<MasterDetailPage.Master>
<pages:WelcomeMaster x:Name="MasterPage" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage>
<x:Arguments>
<pages:Index />
</x:Arguments>
</NavigationPage>
I've added this to the code behind for Welcome
InitializeComponent();
MasterPage.ListView.ItemSelected += ListView_ItemSelected;
this.Detail = new NavigationPage(new Arcade.Index());
In spite of all that, when I call this later, the MasterDetail menu disappears
((MasterDetailPage)Application.Current.MainPage).Detail = new Arcade.Index();
In you App.xaml.cs add static method then you can use it to navigate in you code
public static void SetDatailPage(Page page)
{
if (App.Current.MainPage is MasterDetailPage)
{
var masterPage = (MasterDetailPage)App.Current.MainPage;
masterPage.Detail = new NavigationPage(page);
}
}
And use it like this
App.SetDatailPage(new YourPageYouWannaNavigateTo());
1 - use App.Current.Mainpage
var md = (MasterDetailPage)App.Current.MainPage;
md.Detail = new MyPage();
2 - use navigation
when you initially create your detail, wrap it in a NavigationPage
this.Detail = new NavigaitionPage(new Page1());
then later, Page1 can navigate to Page2 within the Detail pane
Navigation.PushAsync(new Page2());
3 - explicitly pass a reference to the MasterDetailPage
// when you create Page1, pass a reference to the MasterDetailPage
// you will also need to modify Page1's constructor
this.Detail = new Page1(this);
How to add a photo in the navigation. On click on the photo should be navigating to edit user screen. I am using a tabbed page design, Home, Map and Settings are my tabbed pages.
You can use the ToolbarItems to add icon on the right hand side of the Navigationbar
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TabPageSample.Views.MyTabbedPage">
<TabbedPage.ToolbarItems>
<ToolbarItem Icon="profileicon.png" Clicked="OnProfilePicClicked"/>
</TabbedPage.ToolbarItems>
<ContentPage Title="HOME" />
<ContentPage Title="MAP" />
<ContentPage Title="SETTINGS" />
</TabbedPage>
In the Page's backend class you add event:
private void OnProfilePicClicked(object sender, EventArgs e)
{
//Navigate to Edit Profile page here
}
PS: Programatically:
var tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new Home());
tabbedPage.Children.Add(new Map());
tabbedPage.Children.Add(new Settings());
//Create Toolbar Item
var profilePicTollbarItem = new ToolbarItem()
{
Icon = "profileicon.png"
};
profilePicTollbarItem.Clicked += OnProfilePicClicked;
tabbedPage.ToolbarItems.Add(profilePicTollbarItem);
The Result will look like:
I am trying to remove navbar from my pages in Xamarin Forms, but I am not able to get it working. I have tried by adding NavigationPage.SetHasNavigationBar(this, false); inside constructor of page eg.
public RegisterUser ()
{
InitializeComponent ();
NavigationPage.SetHasNavigationBar(this, false);
}
And / or by adding NavigationPage.HasNavigationBar="False" inside xaml page
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PetApp.Pages.RegisterUser"
NavigationPage.HasNavigationBar="false">
But none of those helps.
Is there some better best practice to just show clean page with scrollview or should it be possible to remove navbar totally?
It works in Mainpage but not the rest of pages that I am navigating to via
await Navigation.PushAsync(new NavigationPage(new RegisterUser()));
I found a solution, instead of using Navigation.PushAsync I used
Navigation.PushModalAsync(new NavigationPage(new RegisterPet()));
and also OnAppearing of RegisterPet page I added SetHasNavigationBar
protected override void OnAppearing()
{
InitializeSettings();
NavigationPage.SetHasNavigationBar(this, false);
base.OnAppearing();
}
I've just started working on my very first Xamarin Forms app for Android, iOS and UWP and have looked through a lot of examples and code in order to get started.
The app is built using MVVM structure, as i guess most Xamarin.Forms apps are and I am currently facing two issues that I can't find any answer to.
These problems might be Xamarin.Forms 101 so I apologize if these are "stupid" questions.
App.xaml.cs -> App.MainPage = new NavigationPage(new MainPage())
In the App.xaml.cs file I have defined which page that should be set as the startup-page based on Device idiom.
Page startupPage = null;
if (Device.Idiom == TargetIdiom.Phone)
startupPage = new NavigationPage(new MainPage());
else
startupPage = new NavigationPage(new MainPageTablet());
MainPage = startupPage;
This works fine, but i face one issue with this.
OnAppearing() and OnDisappearing() are both called on startup
When the app starts, both OnAppearing() and OnDisappearing() are called inside MainPage.xaml.cs/MainPageTablet.xaml.cs file(s).
Is this a bug, or should this happen?
When removing "NavigationPage" from the declaration of startupPage only OnAppearing() is called on startup
Page startupPage = null;
if (Device.Idiom == TargetIdiom.Phone)
startupPage = new MainPage();
else
startupPage = new MainPageTablet();
MainPage = startupPage;
Now the startup works, like I feel it should with only calling OnAppearing() on startup.
This however now introduces some new "problem(?)". The ToolbarItem that i have inside MainPage.xaml/MainPageTablet.xaml disappears.
<?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:TestApp.Classes;assembly=TestApp"
x:Class="TestApp.Views.MainPageTablet">
<ContentPage.ToolbarItems>
<ToolbarItem Name="MenuItem1" Order="Secondary" Text="Log out" Command="{Binding LogOutCommand}" Icon="settingsImage.png" />
</ContentPage.ToolbarItems>
<ContentPage.Content>
....
</ContentPage.Content>
</ContentPage>
Can a ToolbarItem only be used in a NavigationPage, or do I have to do more than just adding it to the in order to get it to work?
Any help or comments regarding this would be really helpful.
Thanks
If you are running your app on mobile, then on startup OnAppearing() of MainPage() should only be called.
If the page is setup as Navigation page, then only default navigation bar appears.
So when you add toolbar item it will be visible. But as you have not set main page as navigation page, navigation bar will not appear and so toolbar item is not visible.