.Net Maui Visual State Manager And Dynamic Styles Complete Guide

Example: Interactive Button Using VSM and Dynamic Styles in .NET MAUI

Objective:

Create a button that changes its style based on user interaction using the Visual State Manager (VSM) and Dynamic Styles. Specifically, we'll change the background color of the button when it is pressed, and make the text italic when the button is disabled.

Step-by-Step Guide:

1. Create a New .NET MAUI Project

   • Open Visual Studio 2022.
   • Create a new project by selecting “New Project” > “.NET Multi-platform App UI (.NET MAUI) App”.
   • Name your project and choose the appropriate settings.

2. Define Static and Dynamic Resources

   • Open App.xaml and define some static colors and a dynamic style for the button.

   <?xml version="1.0" encoding="utf-8" ?>
   <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="MauiVisualStateManager.App">
       <Application.Resources>
           <ResourceDictionary>
               <!-- Static Colors -->
               <Color x:Key="ButtonNormalColor">#FF007FFF</Color>
               <Color x:Key="ButtonPressedColor">#FF004D6B</Color>
               <Color x:Key="ButtonTextDisabledColor">#FFFFFFFF</Color>
   
               <!-- Dynamic Style for Button -->
               <Style TargetType="Button" x:Key="StyledButton">
                   <Setter Property="TextColor" Value="#FFFFFFFF"/>
                   <Setter Property="BackgroundColor" Value="{StaticResource ButtonNormalColor}"/>
                   <Setter Property="FontAttributes" Value="None"/>
                   <Setter Property="VisualStateManager.VisualStateGroups">
                       <VisualStateGroupList>
                           <!-- Normal State -->
                           <VisualStateGroup x:Name="CommonStates">
                               <VisualState x:Name="Normal">
                                   <VisualState.Setters>
                                       <Setter Property="TextColor" Value="#FFFFFFFF"/>
                                       <Setter Property="BackgroundColor" Value="{StaticResource ButtonNormalColor}"/>
                                   </VisualState.Setters>
                               </VisualState>
   
                               <!-- Pressed State -->
                               <VisualState x:Name="Pressed">
                                   <VisualState.Setters>
                                       <Setter Property="BackgroundColor" Value="{StaticResource ButtonPressedColor}"/>
                                   </VisualState.Setters>
                               </VisualState>
   
                               <!-- Disabled State -->
                               <VisualState x:Name="Disabled">
                                   <VisualState.Setters>
                                       <Setter Property="BackgroundColor" Value="{StaticResource ButtonTextDisabledColor}"/>
                                       <Setter Property="FontAttributes" Value="Italic"/>
                                   </VisualState.Setters>
                               </VisualState>
                           </VisualStateGroup>
                       </VisualStateGroupList>
                   </Setter>
               </Style>
           </ResourceDictionary>
       </Application.Resources>
   </Application>
   

3. Add Button with Dynamic Style in MainPage.xaml

   • Open MainPage.xaml and add a button with the dynamic style defined in App.xaml.

   <?xml version="1.0" encoding="utf-8" ?>
   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                x:Class="MauiVisualStateManager.MainPage"
                Title="Visual State Manager Example">
   
       <StackLayout Padding="20" HorizontalOptions="Center"
                    VerticalOptions="Center">
           <!-- Styled Button -->
           <Button Text="Click Me"
                   Style="{StaticResource StyledButton}"
                   Clicked="OnButtonClicked"/>
   
           <!-- Toggle Button to Enable/Disable Button -->
           <Button Text="Toggle Enabled"
                   Command="{Binding ToggleEnabledCommand}"/>
       </StackLayout>
   </ContentPage>
   

4. Add ViewModel for Managing Command

   • Create a new class named MainViewModel.cs in the project and write a command to toggle the button's enabled state.

   using System.Windows.Input;
   using CommunityToolkit.Mvvm.ComponentModel;
   using CommunityToolkit.Mvvm.Input;
   
   namespace MauiVisualStateManager;
   
   [QueryProperty(nameof(ButtonText), "ButtonText")]
   public partial class MainViewModel : ObservableObject
   {
       private bool _isButtonEnabled = true;
       public bool IsButtonEnabled
       {
           get => _isButtonEnabled;
           set
           {
               if (_isButtonEnabled != value)
               {
                   _isButtonEnabled = value;
                   OnPropertyChanged();
               }
           }
       }
   
       [ObservableProperty]
       string buttonText = "Click Me";
   
       [RelayCommand]
       void ToggleEnabled()
       {
           IsButtonEnabled = !IsButtonEnabled;
       }
   }
   

5. Configure MainPage.xaml.cs to Use ViewModel

   • Open MainPage.xaml.cs and configure it to use the MainViewModel.

   using Microsoft.Maui.Controls;
   
   namespace MauiVisualStateManager;
   
   public partial class MainPage : ContentPage
   {
       readonly MainViewModel _viewModel;
   
       public MainPage(MainViewModel viewModel)
       {
           InitializeComponent();
           BindingContext = _viewModel = viewModel;
       }
   
       void OnButtonClicked(object sender, EventArgs e)
       {
           _viewModel.ButtonText = $"Clicked at {DateTime.Now.ToShortTimeString()}";
           ToggleEnabledCommand.Execute(null);
       }
   
       public ICommand ToggleEnabledCommand => _viewModel.ToggleEnabledCommand;
   }
   

6. Register ViewModel in App.xaml.cs

   • Open App.xaml.cs and register the MainViewModel.

   using Application = Microsoft.Maui.Controls.Application;
   
   namespace MauiVisualStateManager;
   
   public partial class App : Application
   {
       public App()
       {
           InitializeComponent();
   
           // Inject ViewModel into MainPage
           var mainPage = new MainPage(new MainViewModel());
           MainPage = mainPage;
       }
   }
   

7. Run the Application

   • Build and run the application in either Android emulator, iOS simulator, or the Windows machine.
   • You should see a button labeled “Click Me”.
   • Pressing the Button: Press the button, and you'll notice the background color changes to a darker blue.
   • Disabling the Button: The other button toggles the enabled state. When the first button is disabled, its font becomes italic and the text color changes to white.

Explanation:

• Static Resources: These include colors (ButtonNormalColor, ButtonPressedColor, ButtonTextDisabledColor) defined once and can be reused throughout the app.

• Dynamic Style: A button style is defined that includes setters and visual states.

  • Normal State: Sets the default properties for the button.
  • Pressed State: Changes the BackgroundColor when the button is pressed.
  • Disabled State: Changes both BackgroundColor and makes the FontAttributes italic when the button is disabled.

• Interaction Logic:

  • The MainViewModel contains a command (ToggleEnabledCommand) that toggles the IsButtonEnabled property, which is bound to the button's IsEnabled property in MainPage.xaml.
  • When the primary button is clicked, it updates the button text and calls the toggle command.