I have an Android/iOS/UWP Xamarin.Forms app. At the top of the screen where the TitleView is I want to place a button that leads the user to a page that shows them more information about my app.
I tried:
<NavigationPage.TitleView>
<StackLayout>
<Label Text="My App" FontSize="Large"></Label>
<Image x:Name="info"
Source="information.png"
WidthRequest="20"
HeightRequest="20"
/>
</StackLayout>
</NavigationPage.TitleView>
On UWP this result in the title of the app being shown in addition to MyApp in the TitleView. However in Android, once I add a custom TitleView, the title of the app isn't shown anymore. How do I get uniform behavior where the title text shows once on both platforms?
The default behavior is different between Android and UWP. In Android and iOS, if you custom the title view of navigation bar, the title will no long appear.
You can use OnPlatform as Evgeniy Stepanov mentioned to add additional titleLabel to show the title in iOS and Android.
You can simplily add a ToolbarItem to place the Info button on the right side of the navigationbar:
public MainPage()
{
InitializeComponent();
Title = "My App";
ToolbarItems.Add(new ToolbarItem("", "info", () => { goToInfoPage(); }, ToolbarItemOrder.Primary, 1));
}
public void goToInfoPage() {
}
Have you added "information.png" image to android resources? Check it
Try to use OnPlatform
<StackLayout Orientation="Horizontal">
<Label Text="My App" FontSize="Large"/>
<Image x:Name="info" WidthRequest="20" HeightRequest="20">
<Image.Source>
<OnPlatform UWP="logo.png" Default="logo" x:DataType="ImageSource"/>
</Image.Source>
</Image>
</StackLayout>
Related
I know nothing about Xamarin, but I inherited a project. The request is to pinch and zoom on one of the forms. I followed a tutorial on pinch and zoom on an image, and that worked out fine. However I do not seem to be able to apply to a whole page. I am using the default PinchToZoomContainer from the Xamarin dev site.
Here is how I am implementing it.
Here is where the PinchZoomContainer lives
I think this exposing the name space
xmlns:utilites="clr-namespace:MSTCEvents.Views.Utilities"
And this is how I think it needs to be applied.
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<controls:Header Grid.Row="0"/>
<controls:CustomScrollView Grid.Row="1">
<utilites:PinchZoomContainer>
<utilites:PinchZoomContainer.Content>
a bunch of StackLayouts follow then
</utilites:PinchZoomContainer.Content>
</utilites:PinchZoomContainer>
</controls:CustomScrollView>
Just to see if I could get something simple to work I tried to add a final stacklayout at the end and just apply the container there, with no luck.
<StackLayout>
<utilites:PinchZoomContainer>
<utilites:PinchZoomContainer.Content>
<Image Source="Images/mstcLogo.jpg" />
</utilites:PinchZoomContainer.Content>
</utilites:PinchZoomContainer>
</StackLayout>
I am using Ctrl Left Mouse Click to simulate the gestures on an emulator.
cheers
I created a simple test about it: wrap the stacklayout inside the PinchToZoomContainer,and add the pinchGesture on page's GestureRecognizers,code as following:
<ContentPage.Content>
<local:PinchToZoomContainer>
<StackLayout>
<Label Text="This is a label" ></Label>
<Grid Padding="20">
<Image Source="pic.PNG" />
</Grid>
<Label Text="This is a label" ></Label>
</StackLayout>
</local:PinchToZoomContainer>
</ContentPage.Content>
codebehind:
var pinchGesture = new PinchGestureRecognizer();
pinchGesture.PinchUpdated += (s, e) => { // Handle the pinch };
GestureRecognizers.Add(pinchGesture);
first time asking a question on here, sorry if I mess up the etiquette.
I am using AppShell in my Xamarin.Forms project and am using a flyout in combination with a tab bar.
What I want is for the AppShell flyout to always slide out below the navigation/title bar. Currently it covers the whole screen.
I know that I could use a custom view but I like the features and integration of AppShell. For now, I want to try to do this with AppShell.
I've tried a few things like setting the HeightRequest of the flyout and creating an empty header. The Idea will be to keep the buttons in the nav bar always clickable when the side menu is out.
Although, I'm starting to think that maybe this isn't possible with AppShell. Thanks!
How it's working now
What I want (never-mind the difference in flyout width)
You could try using SwipeView for this instead.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/swipeview
You could use the FlyoutPage instead. On Android, the navigation bar is present at the top of the page and displays a title, an icon, and a button that navigates to the detail page.
Create a FlyoutPage to load the MenuPage.
<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:App10"
x:Class="App10.Page14" Title="Navigation Bar" FlyoutLayoutBehavior="Split">
<FlyoutPage.Flyout >
<local:FlyoutMenuPage x:Name="flyoutPage" />
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
Create a listview to simulate a Flyout of AppShell in FlyoutMenuPage.
<ListView x:Name="listView" x:FieldModifier="public">
<ListView.ItemsSource>
<x:Array Type="{x:Type local:FlyoutPageItem}">
<local:FlyoutPageItem Title="Contacts" IconSource="check.png" TargetType="{x:Type local:ContactsPage}" />
<local:FlyoutPageItem Title="Reminders" IconSource="circle.png" TargetType="{x:Type local:ReminderPage}" />
</x:Array>
</ListView.ItemsSource>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="5,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding IconSource}" />
<Label Grid.Column="1" Text="{Binding Title}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Please note, do not forget to set the NavigationPage in App.xaml.cs.
MainPage = new NavigationPage(new Page14());
For more details about it, you could refer to the code in GitHub. https://github.com/xamarin/xamarin-forms-samples/tree/main/Navigation/FlyoutPage
Tis is the xml file
<ContentPage Title="Teras">
<ContentPage.Content>
<ScrollView>
<FlexLayout x:Name="teras">
<Label Text="Teras"/>
</FlexLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
see i already have FlexLayout
i want to add button with code but i cant include the button to this layout :/ im new on xamarin
var button = new Button { .. };
teras.Children.Add(button);
I am trying to set the BarBackgroundColor and BarTextColor for a simple XF app, and am not understanding the output. A picture of what I am seeing follows the code, and all the code can be downloaded here.
I set BarBackgroundColor, BarTextColor, and BackgroundColor below. It seems the only color (from the attached image) being set is the Color.Blue BarBackgroundColor. Shouldn't the text in the navigation bar and status bar be White? Why isn't the rest of the page Red?
App.xaml.cs
public App()
{
InitializeComponent();
var navPage = new NavigationPage(new MainPage());
navPage.BarBackgroundColor = Color.Blue;
navPage.BarTextColor = Color.White;
navPage.BackgroundColor = Color.Red;
MainPage = navPage;
}
XAML
<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="SampleApp.MainPage">
<NavigationPage.TitleView>
<StackLayout HorizontalOptions="Center"
VerticalOptions="Center">
<Label Text="Page Title" />
</StackLayout>
</NavigationPage.TitleView>
<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
Here is the output I am getting.
Shouldn't the text in the navigation bar and status bar be White?
Yes , if code as shared , will not .
First , we will check how to set the text color in the navigation bar .
Because setting custom title view in Navigation Bar as follow :
<NavigationPage.TitleView>
<StackLayout HorizontalOptions="Center"
VerticalOptions="Center">
<Label Text="Page Title" />
</StackLayout>
</NavigationPage.TitleView>
Then code navPage.BarTextColor = Color.White; will not work .The reason is that , you set a custom title view in ContentPage ,and ContentPage Overrides the effect of the navigation bar text .
If want to show white color of Naviagtion Title , there are two ways based on shared code .
One is : Set TextColor for Label in custom title view .
<NavigationPage.TitleView>
<StackLayout HorizontalOptions="Center"
VerticalOptions="Center">
<Label Text="Page Title" TextColor = "White" />
</StackLayout>
</NavigationPage.TitleView>
Another is : Using original navigation bar title .
<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="SampleApp.MainPage"
Title="Page Title"> // Adding title text here
<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage>
Then code navPage.BarTextColor = Color.White; will work for text of naviagtion bar.
Second, we will check how to set the text color in the status bar .
Here you need to enter iOS Solution folder, then open Info.plist file with Xml Editor as follow :
Then adding the Key UIViewControllerBasedStatusBarAppearance and set its value to false as follow.
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
Saving and rebuliding project , now code navPage.BarTextColor = Color.White; can work for
text color of status bar .
Why isn't the rest of the page Red?
This problem should be different for Android . If running navPage.BackgroundColor = Color.Red; in Android ,it will work.However will not in iOS.
The reason is that , Navigation Controller is different between Android and iOS. The Navigation Bar just a bar in Android , however Navigation Bar can be a whole Page view in iOS. That means if setting background color to NavigationPage in Android , it can work in Navigation Page and ContentPage. However , in iOS it only can work in Navigation page . If Want content page show different , you should individually set in Content page.
Therefore , setting as follow in iOS background color can be work.
//Adding background color here can work
<StackLayout>
<!-- Place new controls here -->
<Label Text="Welcome to Xamarin.Forms!"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand" />
</StackLayout>
Final effect as follow:
I want to add a logo in the middle of the navigation bar like this:
<ContentPage.ToolbarItems>
<ToolbarItem Icon="logo.png" Activated="RefButtonClicked"></ToolbarItem>
</ContentPage.ToolbarItems>
I also tried this:
var cancelItem = new ToolbarItem
{
Text = "Cancel",
Icon = "tabalilogo.png",
Order = ToolbarItemOrder.Secondary
};
Everything I tried positioned the logo on the right side of the navigation bar. How can I center it?
Recently After Updating to xamarin forms 3.2, You can customize the title bar using title bar property.
<ContentPage>
<NavigationPage.TitleView>
<StackLayout Orientation="Horizontal" VerticalOptions="Center" Spacing="10">
<Image Source="iconXamagon.png">
<Image.GestureRecognizers>
<Image.TapGestureRecognizer
Tapped="HandleTapped" />
</Image.GestureRecognizers>
</Image>
<Label Text="3.2.0" FontSize="16" TextColor="Black" VerticalTextAlignment="Center" />
</StackLayout>
</NavigationPage.TitleView>
....
For more details https://blog.xamarin.com/xamarin-forms-3-2-0-released-going-big-with-little-things/
I am not sure if that can be implemented using existing toolbar but I had similar requirement and I couldn't figure out how to achieve using the xamarin forms toolbar on a navigation page. therefore I decided to use a modal page and I disabled the navigation page in the code behind with the line of code below.
NavigationPage.SetHasNavigationBar(this, false);
I am using xaml and I created a custom navigator with absolutelayout as below
<AbsoluteLayout x:Name="slToolbar" Grid.Row="0" >
<Button x:Name="Cancel" BackgroundColor="#ADD8E6" Image="cancel.png" Command="{Binding CancelClick}" AbsoluteLayout.LayoutFlags="PositionProportional">
<AbsoluteLayout.LayoutBounds>
<OnPlatform x:TypeArguments="Rectangle" iOS="0, .5, 36, 36" Android="0, .5, 36, 36" WinPhone="0, .5, 50, 50" />
</AbsoluteLayout.LayoutBounds>
</Button>
<StackLayout Orientation="Horizontal" AbsoluteLayout.LayoutFlags="PositionProportional">
<AbsoluteLayout.LayoutBounds>
<OnPlatform x:TypeArguments="Rectangle" iOS="1,.5,110,50" Android="1,.5,50,36" WinPhone="1,.5,110,50" />
</AbsoluteLayout.LayoutBounds>
<ContentView >
<OnPlatform x:TypeArguments="View">
<OnPlatform.iOS>
<Button x:Name="NewIOS" BackgroundColor="#ADD8E6" Image="ic_add.png" Command="{Binding AddNew}" ></Button>
</OnPlatform.iOS>
<OnPlatform.WinPhone>
<Button x:Name="NewWP" BackgroundColor="#ADD8E6" Command="{Binding AddNew}" Image="ic_add.png"/>
</OnPlatform.WinPhone>
</OnPlatform>
</ContentView>
<Button x:Name="btnSave" BackgroundColor="#ADD8E6" Image="check.png" Command="{Binding SaveClick}" HorizontalOptions="End" ></Button>
</StackLayout>
</AbsoluteLayout>
this code will produce something like below. I have the icons in the corners but surely they can be placed anywhere. I used cancel icon instead of back button. Of course, in this case you need to handle back button(cancel button) click yourself. screenshot below is from uwp application but on android and ios I get similar results.