XAML 如何将导航栏文本居中

abithluo  于 2023-10-14  发布在  其他
关注(0)|答案(4)|浏览(119)

我想在不改变文本本身的导航栏文本的中心是,它显示(页面名称)
我尝试在标题视图中更改它,但它删除了现有的模板,并且没有HorizontalOptions属性可以在标题中更改,以便能够将其居中或移动其位置。

hivapdat

hivapdat1#

我建议您使用Relative bindings来实现这一点。
您可以参考以下代码:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp108.SearchByName"
             Title="TestPage">

     <!-- add Shell.TitleView here -->

    <Shell.TitleView>
        <HorizontalStackLayout HorizontalOptions="Center">
            <Label  Text="{ Binding Source={RelativeSource AncestorType={x:Type ContentPage}},Path= Title}"  TextColor="White" VerticalOptions="Center" />
        </HorizontalStackLayout>
    </Shell.TitleView>

    <VerticalStackLayout>
        <Label 
            Text="Welcome to TestPage!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
           
    </VerticalStackLayout>
</ContentPage>
ycl3bljg

ycl3bljg2#

我不认为有一种选择的中心像你想要的。我用Shell.SetTitleView来做这个,这样我就可以自定义它,添加按钮和任何你想要的东西。把它放在出现的例子。

protected override void OnAppearing()
{
    base.OnAppearing();
    var stackLayout = new HorizontalStackLayout
    {
        HorizontalOptions = LayoutOptions.Center
    };
    var titel = new Label
    {
        Text = Title,
    };
    stackLayout.Children.Add(titel);
    Shell.SetTitleView(this, stackLayout);
}

另一种方法是让ContentView控制器像这样使用它

Shell.SetTitleView(this, new PatientTitleView());
rdlzhqv9

rdlzhqv93#

另一种方法是禁用内容页面的默认导航栏,并使用固定行高的Grid设计一个自定义导航栏。这里有一个例子。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackOverflowQnA.Views.NewPage"
             Shell.NavBarIsVisible="False">
    <Grid
        RowDefinitions="40,*">
        <Label
            Text="{Binding PageTitle}"
            TextColor="WhiteSmoke"
            BackgroundColor="Blue"
            HorizontalTextAlignment="Center"
            VerticalTextAlignment="Center"/>
        <VerticalStackLayout
            Grid.Row="1">
            <Label 
                Text="Page Content"
                VerticalOptions="Center" 
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </Grid>
</ContentPage>
djp7away

djp7away4#

如果使用Shell,则可以设置custom TitleView
请注意,使用 GridVerticalStackLayout 很重要,以便能够使用HorizontalOptions="Center"设置水平居中,因为官方的 HorizontalStackLayout 文档指出:
HorizontalStackLayout只考虑与布局方向相反的子视图上的对齐首选项。
标题可以使用相对绑定来绑定,也可以简单地使用x:Reference attached属性和页面的x:Name作为绑定源。
因此,要在 TitleView 中完全居中标题标签,您可以执行以下操作:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SomeProject.SomePage"
             x:Name="MyContentPage"
             Title="MyPage">

    <Shell.TitleView>
        <Grid>
            <Label
                Text="{Binding Title, Source={x:Reference MyContentPage}}"
                VerticalOptions="Center"
                VerticalTextAlignment="Center"
                HorizontalOptions="Center"
                HorizontalTextAlignment="Center" />
        </Grid>
    </Shell.TitleView>

    <!-- Content goes below this -->

</ContentPage>

相关问题