Xamarin의 새로운 기능표 4.8: 그라데이션, 브러시 및 팝업 배경색

우리의 세계는 끊임없이 변화하고 기술 분야에 가장 큰 변화가 생겼다.8월 7일, Xamarin은 이 점을 다시 한 번 증명했다.양식이 다시 업데이트됩니다.현재, 우리는 4.8 버전을 가지고 있으며, 개발자가 더욱 상호작용적이고 매력적인 응용 프로그램을 만들 수 있도록 일련의 기능을 제공한다.
본고에서, 나는 새로운 Xamarin에서 사용할 수 있는 두 가지 특성을 중점적으로 소개할 것이다.표 4.8 게시:

Gradients and Brushes

Flyout Backdrop Color

시작합시다!

그라데이션 및 브러시

응용 프로그램에서 영역을 그리려면 브러시를 사용해야 합니다.브러시는 서로 다른 출력을 내기 위해 서로 다른 유형이 있다.
사용 가능한 브러시 유형은 다음과 같습니다.

순수한 색상

선형 사다리

직경 사다리

순색

이름과 같이 순수한 색 브러시는 순수한 색 그리기 영역을 사용할 수 있습니다.다음은 XAML 코드를 사용하는 예입니다.

<Frame Background="DarkGreen"
       BorderColor="DarkGreen"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120"/>

이 XAML은 다음 출력을 생성합니다.
출처: Vicente Guzman on GitHub

선형 사다리

선형 그래디언트 브러시는 그래디언트에서 두 가지 이상의 색상을 조합할 수 있도록 합니다.다음 화면 캡처의 녹색에서 노란색 선형 그래디언트를 참조하십시오.
출처: Vicente Guzman GitHub
선형 사다리를 사용하려면 시작점과 단점 속성을 어디서 사용하는지 알아야 한다.만약 우리가 이전 화면 캡처에서 점차적인 변화를 실현하고 싶다면, 우리는 다음과 같은 방식으로 인코딩할 것이다.

<Frame BorderColor="DarkGreen"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
       <Frame.Background>
              <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
               <GradientStop Color="Green" Offset="0.1"/>
               <GradientStop Color="Orange" Offset="1.0"/>
              </LinearGradientBrush>
       </Frame.Background>
</Frame>

직경방향 사다리

Xamarin이 현재 제공하는 마지막 브러시.형식 4.8은 지름 방향의 점차적인 변화로 점차적인 변화에서 두 가지 또는 두 가지 이상의 색깔과 원형을 혼합할 수 있다.이전 그래디언트와 마찬가지로 두 가지 속성을 확인해야 합니다. 중심은 그래디언트 중심의 위치를 지정하고 반지름은 그래디언트 반지름의 크기를 결정합니다.
다음 코드 예제에서는 가장자리가 노란색으로 변하는 가운데 녹색 레이디얼 그라데이션을 생성합니다.

<Frame BorderColor="DarkGreen"
       HasShadow="True"
       CornerRadius="12"
       HeightRequest="120"
       WidthRequest="120">
       <Frame.Background>
         <RadialGradientBrush Center="0.5,0.5" Radius="0.5">
               <GradientStop Color="DarkGreen" Offset="0.1"/>
               <GradientStop Color="Yellow" Offset="1.0"/>
         </RadialGradientBrush>
       </Frame.Background>
</Frame>

이 코드 예시는 다음 화면 캡처에 표시된 출력을 생성합니다.
출처: Vicente Guzman GitHub

팝업 배경색

많은 응용 프로그램들이 햄버거 아이콘을 통해 접근할 수 있는 드롭다운 메뉴를 가지고 있다.Xamarin의 이전 버전에서창을 열 때, 메뉴를 열고 닫을 때 외관을 편집할 수 없습니다.우리는 운영체제가 제공하는 설비의 기본 설계를 사용해야 한다.
사마린 덕분에폼 4.8에서 팝업 배경색 기능을 사용하여 응용 프로그램의 메뉴 외관을 쉽게 사용자 정의할 수 있습니다.
다음 GIF는 팝업 배경색 기능의 실제 효과를 보여 줍니다.
출처: Vicente Guzman GitHub
만약 우리가 팝업 배경색 기능을 앞에서 토론한 브러시와 점차적으로 결합시킬 수 있는지 알고 싶다면, 답은 확실합니다!우리가 해야 할 일은 브러시를 정의하고 속성 셸에 값을 부여하는 것이다.팝업 배경.다음은 예입니다.

<FlyoutItem Route="stores"
            FlyoutDisplayOptions="AsMultipleItems">
        <Shell.FlyoutBackdrop>
          <LinearGradientBrush StartPoint="0,0"
                               EndPoint="1,1">
              <GradientStop Color="#8A2387"
                            Offset="0.1" />
              <GradientStop Color="#E94057"
                            Offset="0.6" />
              <GradientStop Color="#58ADF4"
                            Offset="1.0" />
          </LinearGradientBrush>
      </Shell.FlyoutBackdrop>

      <ShellContent Route="stores"
            ContentTemplate="{DataTemplate views:NationalPage}" />
</FlyoutItem>

너는 Xamarin에서 이러한 새로운 특성의 예시를 찾을 수 있다.GitHub의 표 4.8:

Gradients and Brushes

Flyout Backdrop Color

이러한 기능에 대한 자세한 내용은 Microsoft 설명서를 참조하십시오.

Brushes 및 Gradients

Flyout Backdrop Color

결론

이 블로그에서 우리는 Xamarin의 두 가지 새로운 풍부하고 다채로운 특성을 이해했다.표 4.8: 그라데이션과 브러시, 팝업 배경색.이러한 특징은 우리가 응용 프로그램에서 우아하고 매력적인 UI를 설계하는 데 도움이 된다.
그럼 매혹적인 사마린을 만들어 봅시다.폼 응용 프로그램은 이러한 새로운 기능을 가지고 있습니다!
Syncfusion Xamarin은 기본 편집기부터 DataGrid, Charts, ListView, RTE 등 강력한 고급 컨트롤까지 150여 개의 UI 컨트롤을 제공합니다.그것들로 당신의 생산력을 향상시키세요!
현재 Syncfusion 고객의 경우 License and Downloads 페이지에서 최신 버전을 다운로드할 수 있습니다.Syncfusion 고객이 아닌 경우 30일간free trial 동안 사용 가능한 모든 기능을 확인해 보십시오.이 GitHub 위치에서 우리의 샘플을 보십시오.
저희에게 피드백을 보내려면 아래의 논평 부분을 사용하십시오.저희support forums,Direct-Trac 또는feedback portal을 통해 연락하실 수 있습니다.우리는 항상 기꺼이 너를 돕는다!
만약 당신이 이 문장을 좋아한다면, 우리는 당신도 다음과 같은 내용을 좋아할 것이라고 생각합니다.

[블로그]

[블로그]

[블로그]

[전자책] Xamarin.Forms Succinctly