Hi Guys, in this blog we will learn how to Customize Navigation Bar in Xamarin forms.There are some scenarios where we need a customized navigation bar like by default, you can not perform search inside your navigation bar in Xamarin Forms, that takes time to figure out how to do it. However, there’s a workaround for doing that. Things will be pretty much easy, To implement a Custom Navigation Bar on platform specifically by using custom renderers to achieve a additional customized Navigation Bar so, we just need to extend NavigationPage class and add some Attached properties also make sure about using Custom Renderers.
Let’s take a look at some customization attached properties:-
Here’s a workaround for doing that more specifically. Following are the steps:-
- First of all we need to create custom Navigation class that extends from the NavigationPage class and add some attached property to achieved extra customization.
- To apply the attached property platform specifically so, we need to create custom renderer class natively. Created custom renderer class extends the custom Navigation class which is created shared.
- After extending custom navigation class by custom renderer, we are going to overwrite the method OnViewAdded to detect when Toolbar is added.
- CustomNavigationPage:- To perform Customization in Navigation Bar so, we need to create CustomNavigation class which extends NavigationPage class and define Get/Set property.
- CustomNavigationBarRenderer:- To perform customization natively so we need to create Renderer class platform specifically and overwrite the method OnViewAdded to detect when Toolbar is added.
Note: Please remember to add [assembly:ExportRenderer(typeof(CustomNavigation), typeof(CustomNavigationRenderer))] to your custom renderer.
Now It’s time to demonstrate more specifically by giving you a simple example:-
To customization of NavigationBar, we are taking some properties and performing in our example.
- Title Font and Position:- To set NavigationBar Title font and position we need to set TitleFontProperty and TitlePositionProperty.
Xaml:-
<StackLayout>
<Label Text=”Position” TextColor=”Gray” FontAttributes=”Bold”/>
<Picker x:Name=”positionPicker” Title=”Select title position” SelectedIndex=”0″ SelectedIndexChanged=”PositionPickerSelectedIndexChanged”>
<Picker.Items>
<x:String>Start</x:String>
<x:String>Center</x:String>
<x:String>End</x:String>
</Picker.Items>
</Picker>
<Label Text=”Font Size” TextColor=”Gray” FontAttributes=”Bold”/>
<Picker x:Name=”fontSizePicker” Title=”Select title size” SelectedIndex=”2″ SelectedIndexChanged=”FontSizePickerSelectedIndexChanged”>
<Picker.Items>
<x:String>Small</x:String>
<x:String>Medium</x:String>
<x:String>Large</x:String>
</Picker.Items>
</Picker>
</StackLayout>
C#:-
private void PositionPickerSelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
int selectedIndex = picker.SelectedIndex;
if (selectedIndex != -1)
{
switch(picker.Items[selectedIndex])
{
case “Start”:
CustomNavigationPage.SetTitlePosition(this, CustomNavigationPage.TitleAlignment.Start);
break;
case “Center”:
CustomNavigationPage.SetTitlePosition(this, CustomNavigationPage.TitleAlignment.Center);
break;
case “End”:
CustomNavigationPage.SetTitlePosition(this, CustomNavigationPage.TitleAlignment.End);
break;
}
}
}
private void FontSizePickerSelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
int selectedIndex = picker.SelectedIndex;
if (selectedIndex != -1)
{
switch (picker.Items[selectedIndex])
{
case “Small”:
CustomNavigationPage.SetTitleFont(this, Font.SystemFontOfSize(NamedSize.Small));
break;
case “Medium”:
CustomNavigationPage.SetTitleFont(this, Font.SystemFontOfSize(NamedSize.Medium));
break;
case “Large”:
CustomNavigationPage.SetTitleFont(this, Font.SystemFontOfSize(NamedSize.Large));
break;
}
}
}
- Gradient Background:- If we want to set Title color, NavigationBar start and end color with direction so, we just have to call GradientColorsProperty and GradientDirectionProperty.
Xaml:-
<StackLayout>
<Label Text=”Title Color” TextColor=”Gray” FontAttributes=”Bold”/>
<Picker x:Name=”titleColorPicker” ItemDisplayBinding=”{Binding Item1}” Title=”Select title color” SelectedIndexChanged=”TitleColorPicker_SelectedIndexChanged”>
</Picker>
<Label Text=”Gradient Start Color” TextColor=”Gray” FontAttributes=”Bold”/>
<Picker ItemDisplayBinding=”{Binding Item1}” x:Name=”startColorPicker” Title=”Select start color” SelectedIndexChanged=”ColorPicker_SelectedIndexChanged”>
</Picker>
<Label Text=”Gradient End Color” TextColor=”Gray” FontAttributes=”Bold”/>
<Picker x:Name=”endColorPicker” ItemDisplayBinding=”{Binding Item1}” Title=”Select end color” SelectedIndexChanged=”ColorPicker_SelectedIndexChanged”>
</Picker>
<Label Text=”Gradient Direction” TextColor=”Gray” FontAttributes=”Bold”/>
<Picker x:Name=”gradientDirectionPicker” Title=”Select gradient direction” SelectedIndex=”0″ SelectedIndexChanged=”GradientDirectionPicker_SelectedIndexChanged”>
<Picker.Items>
<x:String>Top to Bottom</x:String>
<x:String>Right to Left</x:String>
<x:String>Left to Right</x:String>
<x:String>Bottom to Top</x:String>
</Picker.Items>
</Picker>
</StackLayout>
C#:-
private void ColorPicker_SelectedIndexChanged(object sender, EventArgs e)
{
if (startColorPicker.SelectedIndex != -1 && endColorPicker.SelectedIndex!=-1)
{
var startColor = App.Colors.FirstOrDefault(n => n.Item1 == startColorPicker.Items[startColorPicker.SelectedIndex]).Item2;
var endColor = App.Colors.FirstOrDefault(n => n.Item1 == endColorPicker.Items[endColorPicker.SelectedIndex]).Item2;
CustomNavigationPage.SetGradientColors(this, new Tuple<Color, Color>(startColor, endColor));
}
}
private void GradientDirectionPicker_SelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
int selectedIndex = picker.SelectedIndex;
if (selectedIndex != -1)
{
switch (picker.Items[selectedIndex])
{
case “Top to Bottom”:
CustomNavigationPage.SetGradientDirection(this, CustomNavigationPage.GradientDirection.TopToBottom);
break;
case “Right to Left”:
CustomNavigationPage.SetGradientDirection(this, CustomNavigationPage.GradientDirection.RightToLeft);
break;
case “Left to Right”:
CustomNavigationPage.SetGradientDirection(this, CustomNavigationPage.GradientDirection.LeftToRight);
break;
case “Bottom to Top”:
CustomNavigationPage.SetGradientDirection(this, CustomNavigationPage.GradientDirection.BottomToTop);
break;
}
}
}
private void TitleColorPicker_SelectedIndexChanged(object sender, EventArgs e)
{
var picker = (Picker)sender;
int selectedIndex = picker.SelectedIndex;
if (selectedIndex != -1)
{
var titleColor = App.Colors.FirstOrDefault(n => n.Item1 == picker.Items[selectedIndex]).Item2;
CustomNavigationPage.SetTitleColor(this, titleColor);
}
}
- Bar Image Background:- If we set NavigationBar Background image with Opacity so, we need to use BarBackgroundProperty and BarBackgroundOpacityProperty.
Xaml:-
<StackLayout>
<Label Text=”Bar Opacity”/>
<Slider x:Name=”opacitySlider” HeightRequest=”40″ HorizontalOptions=”FillAndExpand” Maximum=”1″ Minimum=”0″ ValueChanged=”OpacitySlider_ValueChanged”/>
</StackLayout>
C#:-
public BarBackgroundPage()
{
InitializeComponent();
Title = “NavigationBar Image”;
opacitySlider.Value = 0.6f;
CustomNavigationPage.SetTitleColor(this, Color.White);
CustomNavigationPage.SetBarBackground(this, Device.RuntimePlatform == Device.iOS ? “bg.jpg” : “bg”);
}
private void OpacitySlider_ValueChanged(object sender, ValueChangedEventArgs e)
{
CustomNavigationPage.SetBarBackgroundOpacity(this, (float)e.NewValue);
}
Here we can simply customize Navigation Bar in a different ways by using some customization attached properties.
you’re in reality a good webmaster. The site loading pace is
incredible. It kind of feels that you’re doing any unique trick.
Moreover, The contents are masterpiece. you’ve done a magnificent task in this
subject!
Hey There. I discovered your blog using msn. That is an extremely well written article.
I will be sure to bookmark it and come back to learn extra of your helpful information. Thanks for the post.
I’ll certainly comeback.