Xamarin.Forms——"顶部导航栏"文字居中的技巧

最新推荐文章于 2021-05-29 00:54:26 发布

硝基苯

最新推荐文章于 2021-05-29 00:54:26 发布

阅读量4.8k

点赞数 3

分类专栏： xamarin 文章标签： xamarin+

本文链接：https://blog.csdn.net/weixin_33805152/article/details/77504181

版权

xamarin 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

刚学习forms技术一个月，总觉得在安卓端Navigation他的导航栏不好用，不能够将导航栏文字居中。在git上也看到不少设置导航栏居中的一些自定义控件，但是自己用起来都感觉很困难（每次看到git上大神的代码就感觉好牛逼好牛逼），例如：
https://github.com/Peefy/Xamarin.Forms.BottomTabView 在安卓端，有底部导航栏，在上方标题栏还可以文字居中
——github上的截图

太复杂了，完全看不懂啊….
今天突然冒出一个小聪明的想法，就是直接在一个页面顶部设置一个横条遮罩作为顶部导航栏的背景，再在左边设置一个label标签，想给大家分享一下。
首先先上效果图把。
![这里写图片描述]

设置一个grid遮罩

   <Grid x:Name="TopBar"  BackgroundColor="#2196F3"  >
            <Grid.RowDefinitions>
                <RowDefinition Height="60" />
            </Grid.RowDefinitions>
            <!--* 7* *便于在文字左右两端能够插入新的图片或则文字 -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="7*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Label Grid.Row="0" Grid.Column="1"  x:Name="TopBarTitle" FontSize="16" FontAttributes="Bold" VerticalOptions="Center" TextColor="White"  HorizontalOptions="Center" />
        </Grid>

————————————————————————————————
这里写图片描述

如果想在标题栏左侧加上<

<StackLayout Orientation="Vertical" x:Name="Main" >
        <Grid x:Name="TopBar"  BackgroundColor="#2196F3"  >
            <Grid.RowDefinitions>
                <RowDefinition Height="60" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="7*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label  Grid.Row="0" Grid.Column="0"  x:Name="TopBarBack"  Text="&lt;" FontSize="16" FontAttributes="Bold" VerticalOptions="Center" TextColor="White"  HorizontalOptions="Center"  />
            <Label Grid.Row="0" Grid.Column="1"  x:Name="TopBarTitle"  Text="{Binding Text}" FontSize="16" FontAttributes="Bold" VerticalOptions="Center" TextColor="White"  HorizontalOptions="Center" />
        </Grid>

再在上面加上手势事件

  var tapGestureRecognizer = new TapGestureRecognizer() { NumberOfTapsRequired = 1 };
            tapGestureRecognizer.Tapped += (s, e) => {
                //  handle the tap
                Navigation.PopModalAsync();
            };
            TopBarBack.GestureRecognizers.Add(tapGestureRecognizer);

这样就可以做到像导航栏一样的功能了，大家都可以修改他的高度，加上图片，或则导航栏背景颜色。

希望哪位大神看见了能够把这个想法做成一个自定义控件，用什么renderer来着，我目前不会用- -
源码：