VSM(Visual State Manager)을 사용하여 Syncfusion .NET MAUI 컨트롤 구성

Visual State Manager (VSM)은 개발자가 시각적 상태에 따라 컨트롤의 모양을 지정하는 데 도움이 됩니다. 저처럼 .NET MAUI 플랫폼에서 VSM 지원을 예상하셨을 것입니다.

이 블로그에서는 몇 가지 예를 통해 VSM이 무엇이며 VSM을 사용하여 컨트롤Syncfusion .NET MAUI을 구성하는 방법을 살펴보겠습니다.

시각적 상태 관리자란 무엇입니까?

상태에 따라 컨트롤의 속성을 업데이트할 때 전통적으로 우리는 다양한 상태에서 값을 설정하기 위해 직접 속성을 찾습니다. 그렇지 않으면 코드 뒤에 업데이트하기 전에 컨트롤의 상태가 변경될 때까지 기다릴 수 있습니다.

Visual State Manager의 도움으로 이 작업을 쉽게 수행할 수 있습니다. 컨트롤이 일반적인 상태인 경우 컨트롤 보기의 시각적 모양을 변경할 수 있는 코드를 XAML 파일에 추가할 수 있습니다.

예를 들어 항목 컨트롤을 고려하십시오. 여기에서는 컨트롤이 비활성화되었을 때 배경색을 빨간색으로 변경하겠습니다.

<Entry FontSize=”18”>
 <VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name=”CommonStates”>
   <VisualState x:Name=”Disabled”>
    <VisualState.Setters>
     <Setter Property=”BackgroundColor” Value=”Red” /> 
    </VisualState.Setters> 
   </VisualState> 
  </VisualStateGroup> 
 </VisualStateManager.VisualStateGroups> 
</Entry>

사용자 정의 상태가 있는 Syncfusion .NET MAUI 컨트롤의 VSM 지원

적용 가능한 Syncfusion .NET MAUI 컨트롤은 VSM과 호환됩니다. 일부 컨트롤은 구성에 사용할 수 있는 사용자 지정 상태로 빌드되었습니다.

Syncfusion .NET MAUI 탭 보기 및 슬라이더 컨트롤에 대한 예를 살펴보겠습니다.

.NET MAUI 탭 보기

코드에 설정된 시각적 상태를 기반으로 VSM을 사용하여 .NET MAUI Tab View 컨트롤의 속성을 변경할 수 있습니다. 속성을 사용자 정의한 시각적 상태는 선택됨(사용자 정의), 정상 및 비활성화입니다. 선택된 상태는 공통 상태에 추가된 사용자 지정 상태입니다.

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

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:tabs="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView" 
             x:Class="VSMMAUI.MainPage"> 
 <ContentPage.Resources> 
  <Style TargetType="tabs:SfTabItem"> 
   <Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList> 
    <VisualStateGroup> 
     <VisualState x:Name="Normal" > 
      <VisualState.Setters> 
       <Setter Property="TextColor" Value="Red" /> 
       <Setter Property="FontSize" Value="12" /> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="Selected"> 
      <VisualState.Setters> 
       <Setter Property="TextColor" Value="#6200EE" /> 
       <Setter Property="FontSize" Value="16" /> 
      </VisualState.Setters> 
     </VisualState> 
    </VisualStateGroup> 
   </VisualStateGroupList> 
   </Setter> 
  </Style> 
 </ContentPage.Resources> 
 <ScrollView> 
  <VerticalStackLayout> 
   <tabs:SfTabView TabWidthMode="Default" HeightRequest="200"> <tabs:SfTabItem Header="Item 1"> 
    <Label Text="Item 1 Content" VerticalOptions="Center" HorizontalOptions="Center" /> 
   </tabs:SfTabItem>
   <tabs:SfTabItem Header="Item 2"> 
    <Label Text="Item 2 Content" VerticalOptions="Center" HorizontalOptions="Center" /> 
   </tabs:SfTabItem>
   <tabs:SfTabItem Header="Item 3" > 
    <Label Text="Item 3 Content" VerticalOptions="Center" HorizontalOptions="Center" /> 
   </tabs:SfTabItem> 
  </VerticalStackLayout> 
 </ScrollView> 
</ContentPage>

항목 2는 선택된 상태이므로 해당 사용자 지정 속성이 적용됩니다.



VSM을 사용하여 Syncfusion .NET MAUI 탭 보기 속성 구성

.NET MAUI 슬라이더

.NET MAUI Slider 에서 VSM을 사용하여 시각적 상태를 기반으로 슬라이더 트랙 속성을 수정할 수 있습니다. 해당 시각적 상태 값은 비활성화되고 활성화됩니다(기본값).

다음 코드 예제를 참조하십시오. 여기에서 슬라이더의 UI를 비활성화하기 위해 IsEnabled 속성 값을 false로 설정했습니다. 해당 스타일이 슬라이더에 적용됩니다.

<ContentPage.Resources>
 <Style TargetType="sliders:SfSlider">
  <Setter Property="Interval" Value="0.25" />
  <Setter Property="VisualStateManager.VisualStateGroups">
   <VisualStateGroupList>
    <VisualStateGroup>
     <VisualState x:Name="Default">
      <VisualState.Setters>
       <Setter Property="TrackStyle">
        <Setter.Value>
         <sliders:SliderTrackStyle ActiveSize="8"
                                   InactiveSize="6"
                                   ActiveFill="#EE3F3F"
                                   InactiveFill="#F7B1AE"/>
        </Setter.Value>
       </Setter>
      </VisualState.Setters>
     </VisualState>
     <VisualState x:Name="Disabled">
      <VisualState.Setters>
       <Setter Property="TrackStyle">
        <Setter.Value>
         <sliders:SliderTrackStyle ActiveSize="10"
                                   InactiveSize="8"
                                   ActiveFill="Gray"
                                   InactiveFill="LightGray" />
        </Setter.Value>
       </Setter>
      </VisualState.Setters>
     </VisualState>
    </VisualStateGroup>
   </VisualStateGroupList>
  </Setter>
 </Style>
</ContentPage.Resources>
<ContentPage.Content>
 <VerticalStackLayout>
   <Label Text="Enabled Slider" Padding="0,10"/>
   <sliders:SfSlider/>
   <Label Text="Disabled Slider" Padding="0,10"/>
   <sliders:SfSlider IsEnabled="False"/>
 </VerticalStackLayout>
</ContentPage.Content>

다음은 이에 대한 스크린샷입니다.



VSM을 사용하여 Syncfusion .NET MAUI 슬라이더 속성 구성

결론

읽어 주셔서 감사합니다! 이 블로그에서는 Visual State Manager의 사용과 이를 사용하여 현재 상태에 따라 컨트롤Syncfusion .NET MAUI의 속성을 구성하는 방법을 살펴보았습니다. 또한 컨트롤의 공통 및 고유 상태를 기반으로 속성을 변경하는 방법도 살펴보았습니다. 따라서 VSM을 사용하여 컨트롤을 쉽게 구성하고 아래 댓글 섹션에 피드백을 남겨주세요!

작동 중인 모든 컨트롤을 보려면 다운로드Essential Studio for .NET MAUI하십시오.

support forum, support portal 또는 feedback portal 을 통해 저희에게 연락하실 수도 있습니다. 기꺼이 도와드리겠습니다!

관련 블로그

Create Group Chat Profile View in .NET MAUI App

Replicating an Immersive UI in .NET MAUI

Learn Performing Animation in .NET MAUI: Part 1

Create a Shopping UI in .NET MAUI with SQLite [Webinar Show Notes]