I start my Xamarin.Forms android project simply by calling:
MainPage = new NavigationPage(new HomePage());
in the App.xaml.cs
As stated in the https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/hierarchical/
This causes the HomePage ContentPage instance to be pushed onto the
navigation stack, where it becomes the active page and the root page
of the application.
But when i check the stack, its empty:
What is happening here? Why the page is not in the stack?
I have simply created a new XF project.
I have changed the main page xml to 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" xmlns:local="clr-namespace:Test" x:Class="Test.TestPage">
<StackLayout>
<Button Text="How many?" Clicked="Handle_Clicked"/>
<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
and add this to xml.cs
void Handle_Clicked(object sender, System.EventArgs e)
{
//throw new NotImplementedException();
Application.Current.MainPage.DisplayAlert("Attention", Navigation.NavigationStack.Count.ToString(), "Ok");
}
and I see that NavigationStack's Count is 1...
UPDATE
Also with a CarouselPage, I have the same result
<?xml version="1.0" encoding="UTF-8"?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Test.TestPage">
<ContentPage>
<StackLayout>
<Button Text = "how many?" Clicked="Handle_Clicked"/>
<Label Text="Red" />
<BoxView Color="Red" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Label Text="Green" />
<BoxView Color="Green" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Label Text="Blue" />
<BoxView Color="Blue" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
</CarouselPage>
Related
I have an ImageButton in a Grid. Around the ImageButton, I have an <AbsoluteLayout>. When clicking, nothing happens or the method is not executed.
My XAML:
<VerticalStackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="#24D4A3">
<Grid BackgroundColor="White">
<AbsoluteLayout>
<ImageButton
Clicked="CreateNote"
Source="add.png"
BorderColor="#2b3c3c"
BorderWidth="0"
BackgroundColor="#34A4EB"
CornerRadius="35"
WidthRequest="70"
HeightRequest="70"
AbsoluteLayout.LayoutBounds="313,625"
Padding="2,0,0,0"/>
</AbsoluteLayout>
</Grid>
</VerticalStackLayout>
The method CreateNote:
private async void CreateNote(object sender, EventArgs e)
{
await Shell.Current.GoToAsync("//CreateNote");
}
I would be grateful for any help!!
I copied your code to my app and did a test,I found the space above your ImageButton is so large that I couldn't see it on my emulator.
So I added a ScrollView out of the VerticalStackLayout.Then I could see the ImageButton after I scrolled my page. And I could also trigger the clicked event ImageButton_Clicked of ImageButton .
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp1226.MainPage">
<ScrollView>
<VerticalStackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
BackgroundColor="#24D4A3">
<Grid BackgroundColor="White">
<AbsoluteLayout>
<ImageButton
Clicked="ImageButton_Clicked"
Source="icon.png"
BorderColor="#2b3c3c"
BorderWidth="0"
BackgroundColor="#34A4EB"
CornerRadius="35"
WidthRequest="70"
HeightRequest="70"
AbsoluteLayout.LayoutBounds="313,625"
Padding="2,0,0,0"/>
</AbsoluteLayout>
</Grid>
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Function ImageButton_Clicked
private void ImageButton_Clicked(object sender, EventArgs e)
{
System.Diagnostics.Debug.WriteLine(" click this ImageButton ");
}
I am beginner in MvvmCross using it with Xmarin Forms and trying to implement a MasterDetailPage with a TabbedPage as the MvvmCross won't support the AppShell right now.
I've manage to implement what I want by myself in Xamarin Forms without using MvvmCross but when comes to implement it using MvvmCross I have no idea how to approach it.
What I'am trying to implement is something like this:
The code that works for me in XamarinForms:
In App.xaml.cs:
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new MaineMasterDetailPage());
}
In MasterDetailPage:
<MasterDetailPage.Master>
<local:HomePage x:Name="masterPage" BackgroundColor="Red" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<TabbedPage x:Name="tabs" android:TabbedPage.ToolbarPlacement="Bottom">
<ContentPage Title="Tab1">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Tab1" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
<ContentPage Title="Tab2">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Tab2" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
<ContentPage Title="Tab3">
<ContentPage.Content>
<StackLayout Margin="5,30,5,5">
<Label Text="Tab3" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
</TabbedPage>
</MasterDetailPage.Detail>
When my app loads the TitleView BackgroundColor starts after the menu.png icon. I can only get it to work after I select one of the menu items where I set the detailPage.BarBackgroundColor?
Is there anyway to set this color in the mainpage.xml or the menupage.xaml?
Mainpage.xaml
<pages:MenuPage x:Name="menuPage"/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage BackgroundColor="#22335c">
<x:Arguments>
<pages:HomePage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
Mainpage.xaml.cs
This will only set the color
var detailPage = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
detailPage.BarBackgroundColor = Color.FromHex("#22335c");
MenuPage.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"
x:Class="Pages.MenuPage"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:telerik="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:model="clr-Model"
xmlns:page="clr-Pages"
Title="Menu" Icon="menu.png" BackgroundColor="#22335c" >
<Grid>
homepage.xaml
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" BackgroundColor="#22335c" >
<Label Text="App" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="#22335c" TextColor="White" HorizontalTextAlignment="Center" />
</StackLayout>
</NavigationPage.TitleView>
First at all, if you want a white background, try to use this code
<?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="Pages.MenuPage"
xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:telerik="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"
xmlns:model="clr-Model"
xmlns:page="clr-Pages"
Title="Menu" Icon="menu.png" BackgroundColor="#FFFFFF" >
or use it :
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" BackgroundColor="#FFFFFF" >
<Label Text="App" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" BackgroundColor="#22335c" TextColor="White" HorizontalTextAlignment="Center" />
</StackLayout>
</NavigationPage.TitleView>
I prefer use it :
MainPage = new NavigationPage (new MainView()) { BarBackgroundColor = Color.White, BarTextColor = Color.NavyBlue };
If you want to overlap 2 tipes of blue, try to use a icon without background. Make or take a SVG figure for example and convert in png using paint.
This figure is a sample for you:
Figure without background link
Regards
I am somewhat puzzled as it seems to be too obvious, but this works:
<pages:MenuPage x:Name="menuPage"/>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage BarBackgroundColor ="#22335c">
<x:Arguments>
<pages:HomePage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
When starting the app I get the UI as I want it. When returning to the same page I get the gap at the top. How can I fix this?
All navigation uses the Application.Current.MainPage = new SomePage(); shape.
The XAML is trivial:
<?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="ShipShapeMobile.LandingPage"
BackgroundImage="Gradient640x1136.png"
>
<ContentPage.Content >
<Grid
x:Name="grid"
>
<StackLayout
HorizontalOptions="Center"
VerticalOptions="Center"
>
<Image
HorizontalOptions="Center"
Source="ShipShapeShipA448x591.png"
VerticalOptions="Center"
Margin="50,15,50,15"
/>
<Image
HorizontalOptions="Center"
Source="TextOnlySS.png"
VerticalOptions="CenterAndExpand"
/>
<Image Source="hr7.png" Margin="20,10,20,10" />
<Button
x:Name="btnSignIn"
BackgroundColor="DodgerBlue"
BorderColor="White"
BorderWidth="1"
Clicked="BtnSignIn_OnClicked"
CornerRadius="15"
Image="Icon29.png"
Margin="50,10,50,10"
Text="SIGN UP"
TextColor="White"
/>
</StackLayout>
</Grid>
</ContentPage.Content>
It looks like in your LandingPage NavigationBar being displayed. Hide it in your xaml class itself.
NavigationPage.HasNavigationBar="false"
Use this in your top tag of ContentPage.
I want to be able to display LessonView.xaml within MainPage.xaml.
Here is my attempt below.
Am i missing something important that it wont display ?
MainPage.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:local="clr-namespace:KanjiStudy"
x:Class="KanjiStudy.MainPage"
xmlns:views="KanjiStudy.View.LessonView">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Label Text="Welcome to Xamarin.Forms!"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<views:View.LessonView>
</views:View.LessonView>
<StackLayout Margin="0,0,0,20" Padding="20,0,20,0" VerticalOptions="End" HorizontalOptions="Center" Orientation="Horizontal">
<Button Margin="20,0,50,20" FontSize="Large" HorizontalOptions="Start" Text="Study" >
</Button>
<Button Margin="50,0,20,20" FontSize="Large" Text="Test" Clicked="Button_Clicked">
</Button>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
LessonView.xaml
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="KanjiStudy.View.LessonView">
<ContentView.Content>
<StackLayout>
<Label Text="i am a view" />
</StackLayout>
</ContentView.Content>
</ContentView>
The namespace declaration in MainPage.xaml should only include the namespace of where the view view:
xmlns:views="KanjiStudy.View">
Then when displaying the view, use the xmlns name and C# class name (but not the C# namespace name), as such:
<views:LessonView>
</views:LessonView>
The way to think about it is that the XAML parser will create an instance of the class for the view by taking the namespace path from the xmlns declaration, and finding the classname in there.
In other words, in the original code, it will attempt to look in the namespace KanjiStudy.View.LessonView. Since the full namespace + class name for your view is KanjiStudy.View.LessonView, put the namespace parts in the xmlns, and the classname on the XML tag where you want the view.
I was able to find a wpf tutorial this did something similar here http://blog.scottlogic.com/2012/02/06/a-simple-pattern-for-creating-re-useable-usercontrols-in-wpf-silverlight.html
MainPage.xaml
This needed to use the following namespace
xmlns:local="clr-namespace:KanjiStudy.View">
instead of
xmlns:views="KanjiStudy.View.LessonView">
Then in the body i can pull in multiple lessonView objects so
<?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="KanjiStudy.MainPage"
xmlns:local="clr-namespace:KanjiStudy.View">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" VerticalOptions="StartAndExpand">
<Label Margin="0,20,0,0" Text="Grade 1"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
<StackLayout HorizontalOptions="CenterAndExpand" Orientation="Horizontal">
<local:LessonView Margin="10,10,10,10">
</local:LessonView>
<local:LessonView Margin="10,10,10,10">
</local:LessonView>
<local:LessonView Margin="10,10,10,10">
</local:LessonView>
</StackLayout>
</StackLayout>
<StackLayout Margin="0,0,0,20" Padding="20,0,20,0" VerticalOptions="End" HorizontalOptions="Center" Orientation="Horizontal">
<Button Margin="20,0,50,20" FontSize="Large" HorizontalOptions="Start" Text="Study" >
</Button>
<Button Margin="50,0,20,20" FontSize="Large" Text="Test" Clicked="Button_Clicked">
</Button>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>