Customization of Navigation Bar in Xamarin Forms

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.

Leave a comment