Label에 Trigger로 밑줄 치기

❎ Xamarin/MAUI 소모임
#1

WPF의 경우 Textblock이나 Label 등 Text를 출력하는 컨트롤에 마우스를 올려 밑줄을 치고 싶다면,

XAML에서 Trigger를 설정하는 방법이 가장 빠르고 무엇보다 직관적입니다.

하지만 MAUI는 Xamarin에서 와서 그런지 문자열을 출력하는 컨트롤도 Label 하나 뿐인 듯한데,

이 Label에 이벤트 트리거가 없는 것 같습니다.

MAUI를 찾다보면 자료가 많이 없어서 Xamarin것도 함께 보게 되는데 WPF의 이런 Trigger를 이용한 Event 처리는 제가 못찾았는데, 혹시 Xamarin에서는

Label에 마우스커서를 올려서 밑줄을 칠 때 어떤 방식으로 하나요? 가급적 XAML로 처리했으면 싶습니다.

좋아요 3
#2

여러 군데에서 의견을 모아서 남깁니다.

Windows에서 개발만 해오면서 Windows 앱만 개발해오던 저에게 Mobile 환경은 Mouse가 없을 수도 있는 환경이라는 것을 간과하게 되었습니다.

MAUI는 Xamarin이 전신인 프로젝트로, 모바일이 mouse가 기본이 아니기 때문에 마우스 & 키보드 이벤트가 모바일에는 없을 수도 있다는 결론에 도달했습니다.

다만 Maui에서 Platform폴더 안의 Native 영역에서 Windows 영역을 활용하면 Mouse기능을 사용할 수 있지 않을까 연구는 필요할 것 같습니다.

좋아요 6
#3

MAUI, xamarin에 대한 경험이 많지 않아 정확하지는 않습니다만…
Effect를 이용해서 Windows 환경에서만 특정 엘리먼트의 Hover 동작을 적용할 수 있는 것 같습니다~

좋아요 3
#4

Obsolete긴 하지만 Custom Renderer를 구현하는 방법도 있네요.

image
image1075×109 18.3 KB

Controls 폴더 아래 대상 Label을 사용자 정의로 구현하고, Windows 아래 Renderers 폴더를 만들고 CustomRenderer를 구현합니다.
image
image496×588 17.3 KB

CustomLabel 코드

public class CustomLabel : Label
{
}

CustomRenderer 코드

[assembly: ExportRenderer(typeof(CustomLabelRenderer), typeof(CustomLabel))]
namespace MauiApp1.WinUI.Renderers
{
    public class CustomLabelRenderer : LabelRenderer
    {
        private Brush _prevForeground;

        // I DON'T ACTUALLY NEED OnElementChanged, I USE IT JUST TO SEE IF LABEL GETS CUSTOMIZED IN SOME WAY
        protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.PointerEntered += ControlOnPointerEntered;
                Control.PointerExited += ControlOnPointerExited;
            }
        }

        private void ControlOnPointerExited(object sender, PointerRoutedEventArgs e)
        {
            if (_prevForeground != null)
            {
                Control.Foreground = _prevForeground;
            }
        }

        private void ControlOnPointerEntered(object sender, PointerRoutedEventArgs e)
        {
            // MouseHover시 할일
            _prevForeground = Control.Foreground;
            Control.Foreground = new Microsoft.UI.Xaml.Media.SolidColorBrush(Windows.UI.Color.FromArgb(255, 255, 255, 0));
        }
    }
}

렌더러 연결

UseMauiCompatibility 함수로 Custom Renderer를 활성화 하고, ConfigureMauiHandlers로 연결합니다.

public static MauiApp CreateMauiApp()
	{
		var builder = MauiApp.CreateBuilder();
		builder
			.UseMauiApp<App>()
            .UseMauiCompatibility()
			.ConfigureFonts(fonts =>
			{
				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
			})
            .ConfigureMauiHandlers((h) =>
            {
            #if WINDOWS
                h.AddCompatibilityRenderer(typeof(CustomLabel), typeof(CustomLabelRenderer));
			#endif
            });

		return builder.Build();
	}

사용법

사용할 땐 커스텀 label을 선언 해주시면 됩니다.

<local:CustomLabel 
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />
좋아요 2