I am displaying a master details page.
Master page has the list of menu items and details page will have selected item details.
By default detail page is displaying title at left of the screen. I want to customize details page title to show at center of page.
Is there anyway to customize details page title bar in Xamarin forms?
Screenshots attached here
Option 1:
I think TitleView (available since XF 3.2) is what you are looking for. All you have to do is create a the View you want to have as TitleView and asign it to the NavigationPage as:
Code
public class TitleViewPage : ContentPage
{
public TitleViewPage()
{
var titleView = new Slider { HeightRequest = 44, WidthRequest = 300 };
NavigationPage.SetTitleView(this, titleView);
...
}
}
XAML
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NavigationPageTitleView.TitleViewPage">
<NavigationPage.TitleView>
<Slider HeightRequest="44" WidthRequest="300" />
</NavigationPage.TitleView>
...
</ContentPage>
Reference: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/hierarchical#displaying-views-in-the-navigation-bar
Option 2:
Back in the days, before TitleView was available i used to simply remove navigation bar:
Code
NavigationPage.SetHasNavigationBar(this, false);
XAML
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...
NavigationPage.HasNavigationBar="False">
And then i just put on top of my NavigationPage a StackLayout (my custom title bar) with all the icons/buttons/images/formatted text/etc that i wished.
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 been unable to get a simple test working to display a title in the Navigation bar of my Xamarin forms app. I am providing my code below, basically when I set the title on the content page and wrap the content page in a navigation page, the navigation bar is not displaying the corresponding title from the content page.
App.cs
public partial class App : Application
{
public App()
{
InitializeComponent();
Current.MainPage = new NavigationPage(new Presentation.Views.SettingsDeviceUnitView());
}
}
ContentPage.cs
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SettingsDeviceUnitView : ContentPage
{
public SettingsDeviceUnitView()
{
InitializeComponent();
}
}
ContentPage.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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Controls="clr-namespace:GFIApp.Presentation.Controls"
mc:Ignorable="d"
x:Class="TestApp.Presentation.Views.SettingsDeviceUnitView"
BackgroundColor="{StaticResource Key=ColorPrimary}"
Title="TestTitle">
<ContentPage.Content>
<Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
Yet I see nothing in the navigation bar
Has anyone seen this behavior before or have any suggestions? Thank you!
Per FreakyAli's response I tested setting the navigation bar text color and I am now able to see the title. Thank you for the suggestion FreakyAli!
For reference, I added the following in my App.cs
NavigationPage nav = new NavigationPage(new Presentation.Views.SettingsDeviceUnitView());
nav.BarTextColor = Color.White;
Current.MainPage = nav;
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 have a xamarin forms app and I would like to use the search bar control that upon focus will pull up a picker. Is there anyway I can extend the search bar to provide this functionality? In other words I don’t want the user to enter text in the search bar box, rather it’s selected from the pick list. Any examples would be appreciated.
You can look at using the XFX Controls for Xamarin Forms.
https://github.com/XamFormsExtended/Xfx.Controls
In the top of your page add a namespace reference to :
xmlns:xfx="clr-namespace:Xfx;assembly=Xfx.Controls"
Then you use the control as follows:
<!-- XfxComboBox-->
<xfx:XfxComboBox
Placeholder="Select make"
SelectedItem="{Binding SelectedVehicleMake}"
Text="{Binding Description}"
ItemsSource="{Binding AssetMakes}"/>
This control allows to bind to a item source and a selected Item
Picker dialog is shown when you call Focus() on the element, so you could just place a hidden Picker and call the method from the Click Handler of the ToolbarItem.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.Views.MyPage"
Title="My Page Title"
x:Name="MyPage">
<ContentPage.ToolbarItems>
<ToolbarItem Text="ShowPicker" Clicked="ShowPicker">
</ToolbarItem>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<DatePicker x:Name="MyPicker" IsVisible="false" />
</ContentPage.Content>
</ContentPage>
namespace MyApp.Views
{
public partial class MyPage : ContentPage
{
public ItemsPage()
{
InitializeComponent();
}
void ShowPicker(object sender, EventArgs e)
{
MyPicker.Focus();
}
}
}
I'm newbie at Xamarin Forms. I' ve trouble with NavigationPage BarBackgroundcolor in MasterDetailPage. It doesn't see the same on every page. That's Xamarin Forms Portable project and my code;
<?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:MasterDetailPageNavigation;assembly=MasterDetailPageNavigation"
x:Class="MasterDetailPageNavigation.MainPage">
<MasterDetailPage.Master>
<local:MasterPage x:Name="masterPage" BackgroundColor="#fe5722" />
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage BarBackgroundColor="#fe5722" BarTextColor="White">
<x:Arguments>
<local:HomePage />
</x:Arguments>
</NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>
I guess it might be on App page. But how? What can I do to fix that?
I fix my code with that problem is solved. I set the Barbackgroundcolor on MainPage.xaml.cs
var item = e.SelectedItem as MasterPageItem;
if (item != null) {
Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType))
{ BarTextColor=Color.White,BarBackgroundColor=Color.FromHex("fe5722") };
masterPage.ListView.SelectedItem = null;
IsPresented = false;
}
You have to set the BackgroundColor of the Master page to appear in the Navigation Bar. Also it would be good to specify it in in the theme for android so that it gives you a material styling.
There is already plenty of discussion done in the forum.
How to change Xamarin Form NavigationPage Title Color
How to change the nav bar background color on Android?
How to change the color of Xamarin.Forms.NavigationPage
NavigationPage - StatusBar Color