CODEWITHSUNDEEP
xamarinxamarin.forms
John Livermore
John Livermore

Reputation: 31343

Custom TitleView shows small white border on either side

In the screenshot below, my app is showing a title bar with a small white border on the left and right sides. How can I get rid of this border when setting a custom TitleView? In the case below, the red box should stretch from edge to edge of the screen, but you can see the small white border on either side.

enter image description here

Here I set up the NavigationPage.

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        ContainerRegistration.Register();

        var authPage = FreshPageModelResolver.ResolvePageModel<LoginPageModel>();
        var authPageNavigation = new FreshNavigationContainer(authPage, NavigationContainerNames.AuthenticationContainer);

        MainPage = authPageNavigation;
    }
}

Here is the XAML that references the navigation page to set the TitleView contents to a BoxView.

<?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:control="clr-namespace:WP.MobileMidstream.Device.Pages"
             x:Class="WP.MobileMidstream.Device.Pages.LoginPage"             
             Visual="Material">
    <NavigationPage.TitleView>
        <BoxView BackgroundColor="Red" />
    </NavigationPage.TitleView>
    <ContentPage.Content>
        <StackLayout Orientation="Vertical">
            <Entry Placeholder="Username" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Upvotes: 1

Views: 1142

Answers (4)

IvanF.
IvanF.

Reputation: 543

This saved me! Add it in App.xaml

under ResourceDictionary

<ResourceDictionary>
    <!--Global Styles-->
    <Style TargetType="NavigationPage">
            <Setter Property="BarBackgroundColor" Value="Red"/>
            <Setter Property="BarTextColor" Value="White"/>
    </Style>
</ResourceDictionary>

Upvotes: 2

valentasm
valentasm

Reputation: 2422

It really depends on solution which you use for your toolbar. Mostly updating toolbar in your android solution would be enough. If it wont work it could be in your toolbar renderer (if you use) or in styles.xml Check out for more solutions

app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"

Full Toolbar.xml

<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Upvotes: 1

Cherry Bu - MSFT
Cherry Bu - MSFT

Reputation: 10356

I suggest you don't add BoxView in NavigationPage.TitleView, just set BarBackgroundColor in App.xaml.cs, like this:

<?xml version="1.0" encoding="utf-8" ?>


<!--<NavigationPage.TitleView>
    <BoxView BackgroundColor="Red" VerticalOptions="CenterAndExpand" />
</NavigationPage.TitleView>-->
<ContentPage.Content>
    <StackLayout Orientation="Vertical">
        <Entry Placeholder="Username" />
    </StackLayout>
</ContentPage.Content>


 public App()
    {
        InitializeComponent();

        MainPage = new NavigationPage(new MainPage()) { BarBackgroundColor=Color.Red};

    }

enter image description here

Upvotes: 1

deczaloth
deczaloth

Reputation: 7495

It seems that the Navigation bar has a default Padding set (although i could not find that documented anywhere), and i could not find a way to change that (without using custom renderers).

Nevertheless, if what you are looking for is simply get the whole bar of a desired color, you could set the BarBackgroundColor property of your page as follows:

protected override void OnAppearing()
{
    base.OnAppearing();
    ((NavigationPage)App.Current.MainPage).BarBackgroundColor = Color.Red;
}

enter image description here

Upvotes: 3

Related Questions