MAUI Entry 밑줄

Q&A
1

MAUI로 IP스캔 기능을 구현 중입니다. IP입력하는 Entry에 Focus됐을때는 검정색 Focus가 빠지면 회색으로 처리 하려고 합니다.

기본값으로 Focus 됐을 때 파란색 밑줄이 들어있어서 회색으로 바꾸게 설정 했더니 두줄로 나오는 문제가 생겼습니다.

어떻게들 해결하시나요? 검색 해보니 Entry에 밑줄 빼는 라이브러리가 있던데 다들 이 라이브러리를 쓰시나요?

image
image434×217 10.5 KB

xaml

<Entry x:Name="StartIpEntry"
  Text="192.168.0.1"
  Keyboard="Default"
  Placeholder="Start IP"
  FontSize="20"
  HorizontalTextAlignment="Center"
  BackgroundColor="Transparent"
  TextChanged="OnStartIpTextChanged" />

cs

public IpScanPage()
{
      InitializeComponent();
      BindingContext = this;

      // 밑줄 설정 하는 부분
      StartIpEntry.Focused += (s, e) => StartIpUnderline.Color = Color.FromArgb("#1E3A5F");
      StartIpEntry.Unfocused += (s, e) => StartIpUnderline.Color = Color.FromArgb("#9E9E9E");

      EndIpEntry.Focused += (s, e) => EndIpUnderline.Color = Color.FromArgb("#1E3A5F");
      EndIpEntry.Unfocused += (s, e) => EndIpUnderline.Color = Color.FromArgb("#9E9E9E");
}
1개의 좋아요
2

말씀하신 라이브러리가 제가 생각한 라이브러리라면 네이티브 컨트롤에 직접 접근하여 Border 컬러(밑줄)를 지우는 방식이라서 직접구현하여 쓰셔도 상관없습니다.

다만, 올려주신 예제는 네이티브 프레임워크의 컨트롤에 접근하여 한 방식이 아닙니다.

아래와 같은 코드(Gemini요청으로 만든 예제이기에 틀릴 수 있습니다.)

// Entry 밑줄 제거 핸들러 추가
    Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("NoUnderline", (handler, view) =>
    {
#if ANDROID
        // 안드로이드: 배경색을 투명하게 하거나 null로 설정하여 밑줄 제거
        handler.PlatformView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Android.Graphics.Color.Transparent);
#elif IOS || MACCATALYST
        // iOS: 테두리 스타일을 None으로 설정
        handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
#endif
    });

플랫폼별 핸들러 설정이 복잡하고, OS별 디자인 파편화가 부담된다면 DrawnUI 를 사용을 고려해볼 만합니다.

DrawnUI는 각 OS의 네이티브 컨트롤에 의존하지 않고, Skia 기반으로 직접 컨트롤을 렌더링하는 방식이기 때문에
모든 플랫폼에서 동일한 UI를 구현할 수 있으며, 픽셀 단위까지 일관된(퍼펙트 픽셀) 결과를 제공합니다.

1개의 좋아요