Zindex dosent work

Question

I am trying to make a custom control that resembles a Material Design textbox

My app is almost there

ContentView
    x:Class="CustomEntry.Controls.CustomEntry"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:controls="clr-namespace:CustomEntry.Controls"
    x:Name="MaterialEntry">

    <Grid RowDefinitions="Auto,Auto">

        <!--  Label  -->
        <Label
            Grid.Row="0"
            HorizontalOptions="Start"
            Text="{Binding Hint, Source={x:Reference MaterialEntry}}"
            VerticalOptions="End"
            ZIndex="1"/>

        <!--  Border and BorderlessEntry  -->
        <Border
            Grid.Row="1"
            Margin="0,-10,0,0">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="{Binding CornerRadius, Source={x:Reference MaterialEntry}}" />
            </Border.StrokeShape>
            <controls:BorderlessEntry Text="{Binding Text, Source={x:Reference MaterialEntry}}" />
        </Border>
    </Grid>

</ContentView>


I don't know if is possible to make a little cut in the border to put the label.

Another way that I thought is using the Zindex, to make the line on the top line of the border disappear, by bringing the label to the front 

Answer 1

Hello,

I don't know if is possible to make a little cut in the border to put the label.Another way that I thought is using the Zindex, to make the line on the top line of the border disappear, by bringing the label to the front

Yes, you can do it by set BackgroundColor="White" for your Label. To get closer to the effect you want, please try adding left margin. Here is code.

<Label
     Grid.Row="0"

     BackgroundColor="White"

     HorizontalOptions="Start"

     Margin="10,0,0,0"

     Text="{Binding Hint, Source={x:Reference MaterialEntry}}"

     VerticalOptions="End"

     ZIndex="1"/>

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.