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

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

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

设置一个grid遮罩

   <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="1"  x:Name="TopBarTitle" FontSize="16" FontAttributes="Bold" VerticalOptions="Center" TextColor="White"  HorizontalOptions="Center" />
        Grid>

————————————————————————————————
Xamarin.Forms——

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

"Vertical" x:Name="Main" >
        <Grid x:Name="TopBar"  BackgroundColor="#2196F3"  >
            <Grid.RowDefinitions>
                "60" />
            Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                "*" />
                "7*" />
                "*" />
            Grid.ColumnDefinitions>
            <Label  Grid.Row="0" Grid.Column="0"  x:Name="TopBarBack"  Text="<" 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来着,我目前不会用- -
源码:

你可能感兴趣的:(xamarin)