我正在使用Toolbar
在TitleView
上建立通知计数。在TitleView
中,我使用了RelativeLayout
,它是从顶部裁剪,没有显示完整的计数圆圈Label
。
这是我的代码:
<NavigationPage.TitleView>
<RelativeLayout HorizontalOptions="Fill" BackgroundColor="Transparent">
<Image Source="bell.png" HeightRequest="30" WidthRequest="30" x:Name="yellowBoxView"
RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Height,
Factor=0.018,Constant=0}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=0.85,Constant=0}"/>
<Frame
CornerRadius="20"
Padding="-2"
BackgroundColor="White"
HasShadow="False"
RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToView,
Property=Y,
ElementName=yellowBoxView,
Factor=1,Constant=-6}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToView,
Property=X,
ElementName=yellowBoxView,
Factor=1,Constant=-8}">
<Label FontSize="10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Transparent" Text="2"
TextColor="Red" HeightRequest="22" WidthRequest="23" x:Name="labelText"/>
</Frame>
</RelativeLayout>
</NavigationPage.TitleView>
这是我的输出:
答案 0 :(得分:1)
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamarinTest.View.Page3">
<NavigationPage.TitleView >
<StackLayout BackgroundColor="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
</Grid.ColumnDefinitions>
<Image Source="notification.png" Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="Center" HeightRequest="25" WidthRequest="25"/>
<Frame Grid.Row="0" Grid.Column="0" HorizontalOptions="End" VerticalOptions="Center" Margin="0,-25,10,0" CornerRadius="20"
Padding="-2"
BackgroundColor="White"
HasShadow="False">
<Label FontSize="10" HeightRequest="22" WidthRequest="23" Margin="1,1,1,1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="Transparent" Text="100"
TextColor="Red" x:Name="labelText"/>
</Frame>
</Grid>
</StackLayout>
</NavigationPage.TitleView>
<ContentPage.Content>
<StackLayout >
<Label Text="Hello" />
</StackLayout>
</ContentPage.Content>
</ContentPage>