как я могу установить метку или текст над рамкой

Question

Я хотел бы сделать этот дизайн на изображении ниже

image

проблема в том, что текст скрыт под рамкой,

Проблемное изображение

мой код:

             <Frame Margin="40,20,40,-25" Parent="gggg" WidthRequest="60" HeightRequest="20" BackgroundColor="#E2F3F3" HasShadow="False" IsClippedToBounds="False" >
                    <Label x:Name="liTitel2" FontSize="17" HorizontalOptions="CenterAndExpand" TextColor="#009896" Text="الإحصاءات"/>
            </Frame>
            <Frame BorderColor="#009896" BackgroundColor="Transparent" Margin="10,0,10,10" >
                    //Some Code 
            </Frame>

Я использовал AbsoluteLayout и Grid, но проблема все та же

Answer 1

Пожалуйста, go через приведенный ниже код, надеюсь, он вам пригодится

<Grid VerticalOptions="Center" Padding="1" Margin="15">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Frame Grid.Row="0" CornerRadius="10" BorderColor="Red" HasShadow="False" Padding="10,20">
            <BoxView HeightRequest="150">

            </BoxView>
        </Frame>

        <StackLayout Grid.Row="0" HorizontalOptions="Center" VerticalOptions="Start" TranslationY="-10" Padding="10,0" BackgroundColor="White">
            <Label Text="Sample Text" VerticalOptions="Center" VerticalTextAlignment="Center"/>
        </StackLayout>

    </Grid>

Вывод:

Answer 2

Я использую AbsoluteLayout, чтобы сделать один образец, который вы можете посмотреть:

 <AbsoluteLayout
            x:Name="ViewControls"
            Margin="10,10,10,10"
            BackgroundColor="#E2F3F3"
            HeightRequest="300">
            <Frame
                Margin="20,20,20,20"
                AbsoluteLayout.LayoutBounds="1,1,1,1"
                AbsoluteLayout.LayoutFlags="All"
                BackgroundColor="Transparent"
                BorderColor="#009896">


                <!--<Grid Margin="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Label
                        Grid.Column="0"
                        BackgroundColor="White"
                        HorizontalTextAlignment="Center"
                        Text="Left" />
                    <Label
                        Grid.Column="2"
                        BackgroundColor="White"
                        HorizontalTextAlignment="Center"
                        Text="Right" />
                    <Label
                        Grid.Row="1"
                        Grid.Column="0"
                        Grid.ColumnSpan="3"
                        BackgroundColor="White"
                        HorizontalTextAlignment="Center"
                        Text="Across Page" />
                </Grid>-->
            </Frame>

            <Frame
                Padding="2"
                AbsoluteLayout.LayoutBounds=".5,0,100,50"
                AbsoluteLayout.LayoutFlags="PositionProportional"
                BackgroundColor="#E2F3F3"
                BorderColor="Transparent">

                <Label
                    x:Name="liTitel2"
                    FontSize="17"
                    HorizontalOptions="CenterAndExpand"
                    Text="الإحصاءات"
                    TextColor="#009896" />

            </Frame>
        </AbsoluteLayout>

Answer 3

Если вы посмотрите свой код, ответ придет сам, вы поставили метку под рамкой, просто поставьте ее выше:

        <Frame BorderColor="#009896" BackgroundColor="Transparent" Margin="10,0,10,10" >
                //Some Code 
        </Frame>             
    <Frame Margin="40,20,40,-25" Parent="gggg" WidthRequest="60" HeightRequest="20" BackgroundColor="#E2F3F3" HasShadow="False" IsClippedToBounds="False" >
                <Label x:Name="liTitel2" FontSize="17" HorizontalOptions="CenterAndExpand" TextColor="#009896" Text="الإحصاءات"/>
        </Frame>