New to Xamarin and I'm trying to create a custom navigation bar in my Cross-Platform App. After some reading I found that I might be able to use the the title-view component in my xaml page file like below.
<?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="amici.MyGroups">
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
<Label HorizontalOptions="StartAndExpand" Text="Left"/>
<Label HorizontalOptions="CenterAndExpand" Text="Center"/>
<Label HorizontalOptions="EndAndExpand" Text="Right"/>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<ScrollView>
<Grid x:Name="grid1">
<StackLayout>
<Label Text="Welcome"
VerticalOptions="CenterAndExpand"
HorizontalOptions="CenterAndExpand" />
</StackLayout>
<ActivityIndicator x:Name="WaitIcon" IsRunning="{Binding IsBusy}" VerticalOptions="Center" HorizontalOptions="Center" />
</Grid>
</ScrollView>
</ContentPage.Content>
</ContentPage>
I navigate to my page "MyGroups" like this : Navigation.PushAsync(new MyGroups());.
However, the only thing that shows is the default navigation page with the back icon arrow?
obliviously I missing something, or I don't understand something. Does this need to be done at the application level?
If you are using Shell in your Xamarin.Forms app than you will have to use <Shell.TitleView> instead of <NavigationPage.TitleView>. Below code worked for me...
<Shell.TitleView>
<Label Text="QR Code" HorizontalTextAlignment="End" Margin="0,0,10,0" Padding="0" VerticalTextAlignment="Center" TextColor="White" FontSize="20"/>
</Shell.TitleView>
As XAML states:
<NavigationPage.TitleView> .. </NavigationPage.TitleView>
You could set a totally custom View as a NavigationBar, however, this is possible only on NavigationPages. Your code is partly correct because you set the NavigationPage.TitleView not on a NavigationPage:
Navigation.PushAsync(new MyGroups())
If you will navigate to a NavigationPage:
Navigation.PushAsync(new NavigationPage(new MyGroups()))
You should see your custom NavigationPage.TitleView. The outcome, however, will depend on your current navigation model and you may end up with multiple navigation bars. That is because you will nest a NavigationPage within another NavigationPage.
I would strongly recommend reading the official documentation on this topic so it would become clear for you.
You can also set Navigation with MainPage like
MainPage = new NavigationPage(new PageName());
Related
I have the following 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"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="NGIC_XAML.Views.Payments.Payments">
<ContentPage.Content>
<FlexLayout Direction="Column" AlignItems="Center" HorizontalOptions="FillAndExpand">
<StackLayout BackgroundColor="Red" HeightRequest="108" HorizontalOptions="FillAndExpand">
<Label Text="Payments" TextColor="#F9F8FA" FontSize="20" Margin="40"
HorizontalTextAlignment="Center" VerticalOptions="Center"
HorizontalOptions="FillAndExpand">
</Label>
</StackLayout>
</FlexLayout>
</ContentPage.Content>
</ContentPage>
I want the outer layout, the FlexLayout, to automatically size the width to the device's maximum. I want the Layout (the StackLayout) and child Control (the Label), to also automatically resize their widths to the FlexLayout. I am stumped as to how to do this. Any suggestions?
In the FlexLayout docs, they mention "The HorizontalOptions property doesn't work for children of a FlexLayout".
If you take a look at the Page layout with FlexLayout section (Holy Grail Layout) you can see an example somewhat similar to what you are trying to accomplish, basically use a nested FlexLayout instead of a StackLayout.
The code would look like:
<ContentPage.Content>
<FlexLayout
BackgroundColor="Yellow"
Direction="Column">
<FlexLayout
HeightRequest="108"
AlignItems="Center"
Direction="Column"
BackgroundColor="Red">
<Label
BackgroundColor="Green"
LineBreakMode="CharacterWrap"
Text="Payments"
TextColor="#F9F8FA"
FontSize="20"
Margin="40"
HorizontalTextAlignment="Center"
VerticalOptions="Center">
</Label>
</FlexLayout>
</FlexLayout>
</ContentPage.Content>
And here is the screenshot:
Notice that the label will grow as needed to use the full width of the row.
To achieve this, please assign HorizontalOptions="FillAndExpand" to StackLayout and Label and other child controls if any.
This will tell the controls to fill all the space available horizontally.
Thanks!
I am trying to incorporate a background image into my App using Xaml. I have tried various different methods but none seem to working. My code at the minute is
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Cabiee;assembly=Cabiee"
BackgroundImage="CabieBackground.jpg"
x:Class="Cabiee.Login">
<ContentPage.Content>
<StackLayout VerticalOptions="CenterAndExpand" HeightRequest="500">
<Entry
x:Name="usernameEntry"
Placeholder="Email"/>
<Entry
x:Name="passwordEntry"
IsPassword="true"
Placeholder="*********"
Completed="PasswordEntry_Completed"/>
<StackLayout Orientation="Horizontal">
<Button
x:Name="BtnCustomer"
Text="Customer"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
FontSize="30"
Clicked="BtnCustomer_Clicked"/>
<Button
x:Name="BtnDriver"
Text="Driver"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
FontSize="30"
Clicked="BtnDriver_Clicked"/>
</StackLayout>
<RelativeLayout HorizontalOptions="CenterAndExpand" >
<Button
x:Name="BtnRegister"
WidthRequest="300"
Text="Register"
FontSize="30"
Clicked="BtnRegister_Clicked"
/>
</RelativeLayout>
</StackLayout>
</ContentPage.Content>
And this what my solution explorer looks like: https://gyazo.com/0af186bbca7e8456dfb1e7b1bafcb7ad
I have CabieBackground.jpg in my Resources folder so that is displays on android but when i run the code nothing appears on the screen, it just blank
The background image was made in photoshop, the dimensions are: 640px by 1136 px with a resolution of 600 pixels/inch
You need to put your image in drawable folder. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=windows#local-images
As said in the comment, you should also ensure that the image has right properties as copy and paste make wrong properties.
I'm trying to setup a XAML form definition which shows a WebView but which has a Floating Action Button over the bottom right.
If I use an AbsoluteLayout, the FAB appears correctly over the WebView. However, due to the Height/WidthRequest of the Webview, it is displayed at full size - the text disappears off the right side and doesn't wrap, so the page doesn't scroll.
<ContentPage ...snip... Title="Document">
<StackLayout Padding="5,5,5,5" HorizontalOptions="FillAndExpand" Orientation="Vertical">
<WebView x:Name="webViewDocument" WidthRequest="1000" HeightRequest="1000" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalTextAlignment="Center" HorizontalTextAlignment="End" FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0.95,0.975,-1,-1"
Margin="10" />
</StackLayout>
</ContentPage>
If I use a StackLayout, the WebView sizes and scrolls correctly, however the FAB occupies a full width strip at the bottom of the screen and the text does not appear behind it - the WebView stops above it.
I've spent the last hour and a half trying every combination of nested Layout I can think of to solve this and just can't get it right - can some kind layout genius out there please tell me how I can solve this.
Thanks
Use a Grid and do not indicate rows or columns.
Something like this:
<Grid Padding="5,5,5,5"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<WebView x:Name="webViewDocument"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding UpdatedWhen, StringFormat='Last Updated: {0:dd MMM yyyy HH:mm}'}"
VerticalOptions="End"
HorizontalOptions="Center"
HorizontalTextAlignment="End"
FontSize="Small" />
<customControls:ImageButton x:Name="fab"
Source="{markupExtensions:PlatformImage SourceImage='IconFAB'}"
Command="{Binding AddCommand}"
VerticalOptions="End"
HorizontalOptions="End"
Margin="10" />
</Grid>
This should work for you.
I am working on a Xamarin Forms Project and stuck with an issue, where I want to open some popups. As Forms does not have in build Popups so, I have different XAML pages and I’m loading them inside my MainPage.xaml and changing the visibility when required.
Popup_1.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="ABC.Views.Popup_1">
<StackLayout >
<Label Text="{Binding FirstName}" VerticalOptions="CenterAndExpand" HorizontalOptions="StartAndExpand" Font="Large" TextColor="Black" />
</StackLayout>
</StackLayout>
I have many layouts like Popup_1 which I want them to be shown as popup. Here’s my MainPage.xaml here contains 3 popup layouts.
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPagexmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml
xmlns:controls="clr-namespace:ABC.Views;assembly=ABC"
x:Class="ABC.Views.MainPage">
<AbsoluteLayout BackgroundColor="Transparent" Padding="10" IsVisible="{Binding ShowPopup_1}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional" >
<controls:Popup_1 />
</StackLayout>
</AbsoluteLayout>
<AbsoluteLayout BackgroundColor="Transparent" Padding="10" IsVisible="{Binding ShowPopup_2}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional" >
<controls:Popup_2 />
</StackLayout>
</AbsoluteLayout>
<AbsoluteLayout BackgroundColor="Transparent" Padding="10" IsVisible="{Binding ShowPopup_3}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" >
<StackLayout Orientation="Horizontal" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional" >
<controls:Popup_3 />
</StackLayout>
</AbsoluteLayout>
</ContentPage>
The problem is when I am trying to navigate to Mainpage.xaml it taking a lot of time to navigate. Is there any standard solution for this issue? or How can I deal with this delay ?
Note: I’m using MVVM binding pattern to change the visibility of layouts.
You're right about to use ContentPage to customize your own popup dialog, but the normal way to show this custom dialog is not setting the visibility of the parent element of your dialog. We need to display it using PushModalAsync and dismiss it using PopModalAsync.
For code sample you can refer to PushModalAsync or PopModalAsync.
I'm not sure what blocks your UI to cause the delay of navigation since you didn't post any code behind of your dialog. Anyway, you can try to push and pop a modal page and see if this helps.
As Forms does not have in build Popups
Refer this page of documentation
https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/pop-ups/
So far, most examples using Xamarin.Forms are using C# for building up the UI. I prefer using XAML for the UI, and databind it to ViewModels.
I'm having trouble using the Xamarin.Forms.MasterDetailPage in combination with XAML, and I can't seem to port the C# example to XAML + ViewModels.
This is the XAML I got so far:
<?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:NSContacten;assembly=NSContacten"
x:Class="MasterDetailExample.Main"
Title="Master Detail Example">
<MasterDetailPage.Master BindingContext="{Binding Menu}">
<ContentPage Padding="5, 25">
<StackLayout Orientation="Vertical">
<Label Text="Master" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail BindingContext="{Binding Detailpage}">
<ContentPage Padding="5, 25">
<StackLayout Orientation="Vertical">
<Label Text="Detail" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
The component works: I do see the 'Master' and 'Detail' labels. The bound labels (on the BindingContext objects) are not displayed.
I've used loads of different combinations, but I'm still stuck: How does this work? Is my binding incorrect (should it be on the "ContentPage"), can't I bind to the .Master and .Detail properties etc.? How should the "Menu" and "Detailpage" bindings look like?
It would be a huge help if anyone could help me out! The next step would be that the .Detail will be changed when a button is pressed in the .Master . Thanks in advance!
Your Xaml is almost ok, but:
The {BindingContext} are invalid on the properties and should be on the ContentPage elements
MasterDetailPage.Master require a Page.Title to be set, or it throws.
Here's the correct Xaml working for me:
<?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:NSContacten;assembly=NSContacten"
x:Class="MasterDetailExample.Main"
Title="Master Detail Example">
<MasterDetailPage.Master>
<ContentPage Padding="5, 25" BindingContext="{Binding Menu}" Title="Master">
<StackLayout Orientation="Vertical">
<Label Text="Master" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<ContentPage Padding="5, 25" BindingContext="{Binding Detailpage}">
<StackLayout Orientation="Vertical">
<Label Text="Detail" HorizontalOptions="Center" />
<Label Text="{Binding Subtitle}" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
I tested it with an anonymous type as the page view model:
public MyMDPage ()
{
InitializeComponent ();
BindingContext = new {
Menu = new { Subtitle = "I'm Master" },
Detailpage = new { Subtitle = "I'm Detail" }
};
}
and this works just fine. In your case, you probably want concrete types instead of anonymous ones for your view model, but you get the idea.