xamarin 自定义标题视图在两侧显示白色小边框

z2acfund  于 2022-12-07  发布在  其他
关注(0)|答案(4)|浏览(192)

在下面的截图中,我的应用显示了一个标题栏,左右两侧都有一个白色的小边框。在设置自定义TitleView时,如何去掉这个边框?在下面的例子中,红色的框应该从屏幕的边缘延伸到边缘,但你可以看到两边都有白色的小边框。

我在这里设置了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;
    }
}

下面是引用导航页以将TitleView内容设置为BoxView的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: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>
nhhxz33t

nhhxz33t1#

似乎导航栏有一个默认的填充集(虽然我找不到任何地方的文件),我找不到一种方法来改变它(不使用自定义渲染器)。
不过,如果您要寻找的只是所需颜色的整个条,则可以按如下所示设置页面的BarBackgroundColor属性:

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

lvmkulzt

lvmkulzt2#

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};

    }

wvt8vs2t

wvt8vs2t3#

这真的取决于你的工具栏所使用的解决方案。在你的android解决方案中更新工具栏就足够了。如果它不工作,它可能在你的工具栏渲染器(如果你使用)或styles.xml Check out for more solutions

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

完整的工具栏. 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" />
fkvaft9z

fkvaft9z4#

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>

相关问题