.NET MAUI 미리 보기 13에서 하이퍼링크 UI 만들기

2022년 2월 15일 Microsoft released .NET MAUI Preview 13 . 이 미리 보기 릴리스에서 .NET MAUI는 레이블 컨트롤이 있는 서식이 지정된 텍스트를 지원합니다. .NET MAUI 앱에서 이 기능을 사용하는 것이 즐거웠습니다.

이 블로그에서는 서식이 지정된 텍스트 기능이 .NET MAUI Preview 13 앱에서 하이퍼링크 UI로 레이블을 만드는 데 어떻게 도움이 되는지 알아보겠습니다.

*참고: * Syncfusion은 매월 중순에 해당 컨트롤에 대한 .NET MAUI 미리 보기 업데이트를 릴리스합니다.

레이블의 서식 있는 텍스트

아시다시피 레이블은 텍스트 줄 바꿈이 있거나 없는 텍스트를 표시하는 보기입니다. 이제 단일 레이블에서 서식 있는 텍스트 기능을 사용하여 다양한 범위 요소를 사용하여 각 설정에 대해 여러 옵션을 선택할 수 있습니다. 예를 들어, 단일 레이블의 단어에 별도의 색상을 적용할 수 있습니다. 이것은 라벨을 더욱 장식적으로 만들 것입니다.

span 요소는 다음 옵션을 지원합니다.

CharacterSpacing : 레이블의 해당 범위에 문자 사이의 간격을 적용합니다.

FontAttributes : 레이블 범위의 텍스트에 글꼴 속성을 적용합니다.

FontFamily : 레이블 범위의 텍스트에 글꼴 패밀리를 적용합니다.

FontSize : 범위의 텍스트에 글꼴 크기를 적용합니다.

TextColor : 범위의 텍스트에 색상을 적용합니다.

텍스트 변환. 소문자 : 텍스트의 모든 대문자를 소문자로 변환합니다.

텍스트 변환. 대문자 : 텍스트의 모든 소문자를 대문자로 변환합니다.

텍스트 장식. 밑줄 : 레이블 범위의 텍스트에 밑줄을 긋습니다.

텍스트 장식. 취소선: 레이블 범위의 텍스트를 취소합니다.

다음 코드 예제를 참조하십시오.

<Label Margin="10" LineHeight="2">
 <Label.FormattedText>
  <FormattedString>
   <Span Text=".NET MAUI Label with Text Formatting in Preview 13 " FontSize="20" />
   <Span Text="Character Spacing - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" CharacterSpacing="12" />
   <Span Text="Font Attributes - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" FontAttributes="Bold"/>
   <Span Text="Font Size - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="18"/>
   <Span Text="Font Family - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" FontFamily="Matura MT Script Capitals" />
   <Span Text="Text Color - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" TextColor="Red"/>
   <Span Text="Lowercase - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" TextTransform="Lowercase"/>
   <Span Text="Uppercase - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" TextTransform="Uppercase" />
   <Span Text="Strikethrough - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" TextDecorations="Strikethrough"/>
   <Span Text="Underline - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" TextDecorations="Underline" />
  </FormattedString>
 </Label.FormattedText>
</Label>

레이블 - .NET MAUI 미리 보기 13의 서식 있는 텍스트

레이블의 서식 있는 텍스트 기능을 사용하여 하이퍼링크 UI 만들기

TextColor 및 TextDecorations.Underline 두 가지 옵션을 사용하여 하이퍼링크 UI가 있는 레이블을 만들 것입니다.

재사용 가능한 하이퍼링크 클래스 생성

나는 LinkUrl이라는 바인딩 가능한 속성을 추가한 span에서 파생된 HyperlinkUI라는 클래스를 만들었습니다.

span은 GestureElement를 상속하므로 LinkUrl 속성을 사용하여 탐색하도록 Gesture Recognizer를 추가할 수 있습니다.

다음 코드 예제를 참조하십시오.

public class HyperlinkUI : Span
{
  public static readonly BindableProperty LinkUrlProperty =
   BindableProperty.Create(nameof(LinkUrl), typeof(string), typeof(HyperlinkUI), null);public string LinkUrl
  {
    get
    {
      return (string)GetValue(LinkUrlProperty);
    }
    set
    {
      SetValue(LinkUrlProperty, value);
    }
  }public HyperlinkUI()
   {
      ApplyHyperlinkAppearance();
   }void ApplyHyperlinkAppearance()
   {
      this.TextColor = Color.FromArgb("#0000EE");
      this.TextDecorations = TextDecorations.Underline;
   }void CreateNavgigationCommand()
   {
      //... Since Span inherits GestureElement, you can add Gesture Recognizer to navigate using LinkUrl
   }
}

이제 이 HyperlinkUI를 레이블의 범위 요소로 사용할 수 있습니다. 전체 텍스트 또는 텍스트의 일부를 하이퍼링크 텍스트로 표시할 수 있습니다.

다음 코드 예제를 참조하십시오.

<Label Margin="10" LineHeight="2" InputTransparent="False" TextColor="Black">
 <Label.FormattedText>
  <FormattedString>
   <Span Text="Click "/>
   <local:HyperlinkUI Text="here" LinkUrl="https://docs.microsoft.com/xamarin/"/>
   <Span Text=" to learn more about Syncfusion .NET MAUI Controls."/>
  </FormattedString>
 </Label.FormattedText>
</Label>

.NET MAUI 미리 보기 13에서 하이퍼링크 UI로 레이블 지정

Syncfusion .NET MAUI 컨트롤은 .NET MAUI Preview 13과 호환됩니다.

Syncfusion.NET MAUI controls은 .NET MAUI Preview 13과 호환됩니다. NuGet Gallery에서 제어 패키지(최신 버전: 19.4.53-preview)를 설치하고 애플리케이션에서 사용할 수 있습니다.

현재 Syncfusion은 9개의 컨트롤을 제공합니다. 이 제품군은 Cartesian Charts , Circular Charts , Scheduler 및 ListView 파일에 대한 파일 형식 라이브러리도 지원합니다.

다가오는 2022년 1권 릴리스에 대한 계획은 당사Tab View를 확인하고 해당Radial Gauge에서 제어에 대해 자세히 알아보세요.

슬라이더 GitHub 참조

자세한 내용은 Range Slider을 참조하십시오.

배지 보기 결론

이 블로그를 즐겼기를 바라며 읽어주셔서 감사합니다! 자세한 내용은 Effects View 문서를 참조하십시오. 또한 Excel 을 확인하십시오.

내가 말했듯이 Syncfusion .NET MAUI 컨트롤은 Preview 13 버전과 호환되므로 앱에서 쉽게 사용할 수 있습니다.

.NET MAUI 제품군에서 보고 싶은 피드백, 특별 요구 사항 또는 컨트롤이 있는 경우 아래 의견 섹션에 알려주십시오.

또한 PDF , Word 또는 PowerPoint 을 통해 문의할 수 있습니다. 우리는 항상 당신을 도와 드리겠습니다!

.NET MAUI는 로드맵을 제어합니다. 관련 블로그

documentation

example for Creating a Hyperlink UI in .NET MAUI Preview 13