跨入口边框的 Xamarin Forms 标签

Question

如何在 Xamarin Forms 中条目周围的圆角边框的截止部分中渲染标签？

Answer 1

有两种方法可以实现此目的：

1. （简单的方法）使用SfTextInputLayout和ConainerTypeasOutlined

<inputLayout:SfTextInputLayout
    Hint="Name" 
    ContainerType="Outlined">
    <Entry/>
</inputLayout:SfTextInputLayout>

2. （更具创意的方式）将 a 重叠Label在Frame周围Entry

自定义渲染器以删除本机轮廓Entry

原生轮廓将被删除。

安卓

public class NoOutlineEntryRenderer : EntryRenderer
{
    public NoOutlineEntryRenderer(Context context) : base(context)
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);
        this.Control.Background = null;
    }
}

iOS系统

public class NoOutlineEntryRenderer : EntryRenderer
{
    public NoOutlineEntryRenderer()
    {
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);
        this.Control.BorderStyle = UIKit.UITextBorderStyle.None;
    }
}

XAML

将 aFrame和a 放在同一个Label后面EntryGrid

    <Grid>
        <Frame
            BorderColor="Blue"
            CornerRadius="5"
            HasShadow="False"/>
        <Label
            x:Name="fancyEntryLabel"
            AnchorY="1"
            AnchorX="0"
            Margin="10"
            Padding="3"
            TextColor="Blue"
            BackgroundColor="White"
            HorizontalOptions="Start"
            Text="Some text"/>
        <local:NoOutlineEntry
            x:Name="fancyEntry"
            BackgroundColor="Transparent"/>
    </Grid>

翻译Entry焦点变化

fancyEntry.Focused += FancyEntry_Focused;
fancyEntry.Unfocused += FancyEntry_Unfocused;

    ... ...

private void FancyEntry_Unfocused(object sender, FocusEventArgs e)
{
    if (string.IsNullOrEmpty(fancyEntry.Text))
    {
        fancyEntryLabel.ScaleXTo(1);
        fancyEntryLabel.ScaleYTo(1);
        fancyEntryLabel.TranslateTo(0, 0);
    }
}

private void FancyEntry_Focused(object sender, FocusEventArgs e)
{
    fancyEntryLabel.ScaleYTo(0.8);
    fancyEntryLabel.ScaleXTo(0.5);
    fancyEntryLabel.TranslateTo(0, -(fancyEntryLabel.Height));
}

希望这可以帮助