The Visible State Supervisor (VSM) helps builders to specify a management’s look primarily based on its visible state. You may need anticipated VSM assist within the .NET MAUI platform, as I did.
On this weblog, let’s discover what the VSM is and how one can configure Syncfusion .NET MAUI controls utilizing it with a few examples.
What’s the Visible State Supervisor?
When updating a management’s property primarily based on its state, historically, we search for direct properties to set values in varied states. In any other case, we’d look forward to the management’s state to alter earlier than updating it within the code behind.
You may simply do that with the assist of the Visible State Supervisor. It permits you to add code to your XAML file that can change the visible look of a management’s view if the management is in any of the widespread states: regular, disabled, or centered.
For instance, take into account an Entry management. Right here, we’re going to change the background coloration to pink when the management is disabled.
<Entry FontSize=”18”>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Title=”CommonStates”>
<VisualState x:Title=”Disabled”>
<VisualState.Setters>
<Setter Property=”BackgroundColor” Worth=”Purple” />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Entry>
VSM assist in Syncfusion .NET MAUI controls with customized states
Relevant Syncfusion .NET MAUI controls are suitable with VSM. Some controls have been constructed with customized states that, too, can be utilized for configuration.
Let’s see examples for the Syncfusion .NET MAUI Tab View and Slider controls.
.NET MAUI Tab View
You may change the properties of the .NET MAUI Tab View management utilizing the VSM primarily based on the visible states set within the code. The visible states for which now we have personalized the properties are chosen (customized), regular, and disabled. The chosen state is a customized state added along with the widespread states.
Seek advice from the next code instance.
<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;meeting=Syncfusion.Maui.TabView"
x:Class="VSMMAUI.MainPage">
<ContentPage.Sources>
<Model TargetType="tabs:SfTabItem">
<Setter Property="VisualStateManager.VisualStateGroups"> <VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Title="Regular" >
<VisualState.Setters>
<Setter Property="TextColor" Worth="Purple" />
<Setter Property="FontSize" Worth="12" />
</VisualState.Setters>
</VisualState>
<VisualState x:Title="Chosen">
<VisualState.Setters>
<Setter Property="TextColor" Worth="#6200EE" />
<Setter Property="FontSize" Worth="16" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Model>
</ContentPage.Sources>
<ScrollView>
<VerticalStackLayout>
<tabs:SfTabView TabWidthMode="Default" HeightRequest="200"> <tabs:SfTabItem Header="Merchandise 1">
<Label Textual content="Merchandise 1 Content material" VerticalOptions="Middle" HorizontalOptions="Middle" />
</tabs:SfTabItem>
<tabs:SfTabItem Header="Merchandise 2">
<Label Textual content="Merchandise 2 Content material" VerticalOptions="Middle" HorizontalOptions="Middle" />
</tabs:SfTabItem>
<tabs:SfTabItem Header="Merchandise 3" >
<Label Textual content="Merchandise 3 Content material" VerticalOptions="Middle" HorizontalOptions="Middle" />
</tabs:SfTabItem>
</VerticalStackLayout>
</ScrollView>
</ContentPage>
Since Merchandise 2 is within the chosen state, the corresponding customization property is utilized to it.
.NET MAUI Slider
Within the .NET MAUI Slider, we are able to modify the slider observe properties primarily based on the visible states utilizing the VSM. The corresponding visible state values are disabled and enabled (default).
Seek advice from the next code instance. In it, now we have set false as the worth to the IsEnabled property to disable the slider’s UI. The corresponding fashion is utilized to the slider.
<ContentPage.Sources>
<Model TargetType="sliders:SfSlider">
<Setter Property="Interval" Worth="0.25" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Title="Default">
<VisualState.Setters>
<Setter Property="TrackStyle">
<Setter.Worth>
<sliders:SliderTrackStyle ActiveSize="8"
InactiveSize="6"
ActiveFill="#EE3F3F"
InactiveFill="#F7B1AE"/>
</Setter.Worth>
</Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Title="Disabled">
<VisualState.Setters>
<Setter Property="TrackStyle">
<Setter.Worth>
<sliders:SliderTrackStyle ActiveSize="10"
InactiveSize="8"
ActiveFill="Grey"
InactiveFill="LightGray" />
</Setter.Worth>
</Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Model>
</ContentPage.Sources>
<ContentPage.Content material>
<VerticalStackLayout>
<Label Textual content="Enabled Slider" Padding="0,10"/>
<sliders:SfSlider/>
<Label Textual content="Disabled Slider" Padding="0,10"/>
<sliders:SfSlider IsEnabled="False"/>
</VerticalStackLayout>
</ContentPage.Content material>
Following is the screenshot for this.
Conclusion
Thanks for studying! On this weblog, we noticed using the Visible State Supervisor and how one can configure the properties of Syncfusion .NET MAUI controls primarily based on their present states utilizing it. We additionally noticed how one can alter the properties primarily based on the management’s widespread and distinctive states. So, attempt utilizing VSM to configure controls simply, and depart your suggestions within the feedback part under!
Obtain Important Studio for .NET MAUI to see all its controls in motion.
You too can contact us by our assist discussion board, assist portal, or suggestions portal. We’re all the time joyful to help you!
