[Testing] Feature Matrix UITest Cases for VisualStateManager

eng/pipelines/common/ui-tests.yml

@@ -39,7 +39,7 @@ parameters:
     - 'SoftInput,Stepper,Switch,SwipeView'
     - 'Shell'
     - 'TabbedPage,TableView,TimePicker,TitleView,ToolbarItem'
-    - 'ViewBaseTests,Window'
+    - 'ViewBaseTests,VisualStateManager,Window'
     - 'WebView'
 
   projects:

src/Controls/tests/TestCases.HostApp/CoreViews/CorePageView.cs

@@ -120,6 +120,7 @@ public override string ToString()
 			new GalleryPageFactory(() => new IndicatorViewControlPage(), "IndicatorView Feature Matrix"),
 			new GalleryPageFactory(() => new GridControlPage(), "Grid Feature Matrix"),
 			new GalleryPageFactory(() => new LayoutFeaturePage(), "ScrollView With LayoutOptions Feature Matrix"),
+			new GalleryPageFactory(() => new VisualStateManagerFeaturePage(), "VisualStateManager Feature Matrix"),
 			new GalleryPageFactory(() => new ShellFeaturePage(), "Shell Feature Matrix"),
 			new GalleryPageFactory(() => new BrushesControlPage(), "Brushes Feature Matrix"),
 			new GalleryPageFactory(() => new BindableLayoutControlPage(), "BindableLayout Feature Matrix")

src/Controls/tests/TestCases.HostApp/FeatureMatrix/VisualStateManager/VSMButton/VisualStateManagerButtonPage.xaml

@@ -0,0 +1,124 @@
+<?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="Maui.Controls.Sample.VisualStateManagerButtonPage"
+             Title="VisualStateManagerButtonPage">
+        <ContentPage.Resources>
+                <!-- Button VSM demo -->
+                <Style TargetType="Button"
+                       x:Key="VsmButtonStyle">
+                        <Setter Property="Padding"
+                                Value="14,10"/>
+                        <Setter Property="BackgroundColor"
+                                Value="#4A4A4A"/>
+                        <Setter Property="TextColor"
+                                Value="White"/>
+                        <Setter Property="CornerRadius"
+                                Value="8"/>
+                        <Setter Property="VisualStateManager.VisualStateGroups">
+                                <VisualStateGroupList>
+                                        <VisualStateGroup x:Name="CommonStates">
+                                                <VisualState x:Name="Normal">
+                                                        <VisualState.Setters>
+                                                                <Setter Property="BackgroundColor"
+                                                                        Value="Blue"/>
+                                                                <Setter Property="TextColor"
+                                                                        Value="White"/>
+                                                                <Setter Property="Opacity"
+                                                                        Value="1"/>
+                                                                <Setter Property="TranslationY"
+                                                                        Value="0"/>
+                                                                <Setter Property="Scale"
+                                                                        Value="1.0"/>
+                                                        </VisualState.Setters>
+                                                </VisualState>
+                                                <VisualState x:Name="Pressed">
+                                                        <VisualState.Setters>
+                                                                <Setter Property="BackgroundColor"
+                                                                        Value="Red"/>
+                                                                <Setter Property="TextColor"
+                                                                        Value="White"/>
+                                                                <Setter Property="Scale"
+                                                                        Value="1.5"/>
+                                                                <Setter Property="TranslationY"
+                                                                        Value="1.4"/>
+                                                        </VisualState.Setters>
+                                                </VisualState>
+                                                <VisualState x:Name="PointerOver">
+                                                        <VisualState.Setters>
+                                                                <Setter Property="BackgroundColor"
+                                                                        Value="#FFE1770C"/>
+                                                                <Setter Property="TextColor"
+                                                                        Value="Black"/>
+                                                                <Setter Property="Scale"
+                                                                        Value="1.3"/>
+                                                        </VisualState.Setters>
+                                                </VisualState>
+                                                <VisualState x:Name="Disabled">
+                                                        <VisualState.Setters>
+                                                                <Setter Property="BackgroundColor"
+                                                                        Value="#FFB4B3B3"/>
+                                                                <Setter Property="TextColor"
+                                                                        Value="#FF65676D"/>
+                                                                <Setter Property="Opacity"
+                                                                        Value="0.6"/>
+                                                                <Setter Property="Scale"
+                                                                        Value="1.0"/>
+                                                        </VisualState.Setters>
+                                                </VisualState>
+                                                <VisualState x:Name="Focused">
+                                                        <VisualState.Setters>
+                                                                <Setter Property="Scale"
+                                                                        Value="1.5"/>
+                                                                <Setter Property="BackgroundColor"
+                                                                        Value="Green"/>
+                                                                <Setter Property="TextColor"
+                                                                        Value="White"/>
+                                                        </VisualState.Setters>
+                                                </VisualState>
+                                        </VisualStateGroup>
+                                </VisualStateGroupList>
+                        </Setter>
+                </Style>
+        </ContentPage.Resources>
+
+        <VerticalStackLayout Padding="20"
+                             Spacing="16">
+                <Label Text="VisualStateManager Feature Matrix"
+                       FontSize="20"/>
+
+                <VerticalStackLayout Padding="12"
+                                     Spacing="8">
+                        <Label Text="Button States (Normal / Pressed / PointerOver / Disabled)"
+                               FontAttributes="Bold"/>
+                        <Button x:Name="DemoButton"
+                                AutomationId="DemoButton"
+                                Text="Press me"
+                                Style="{StaticResource VsmButtonStyle}"
+                                Pressed="OnDemoButtonPressed"
+                                Released="OnDemoButtonReleased"
+                                Focused="OnButtonFocused">
+                                <Button.GestureRecognizers>
+                                        <PointerGestureRecognizer PointerEntered="OnDemoButtonPointerEntered"
+                                                                  PointerExited="OnDemoButtonPointerExited"/>
+                                </Button.GestureRecognizers>
+                        </Button>
+
+                        <Label x:Name="StateLabel"
+                               AutomationId="ButtonStateLabel"
+                               Text="State: Normal"
+                               FontSize="14"
+                               TextColor="#111827"/>
+                        <HorizontalStackLayout Spacing="10">
+                                <Button x:Name="ButtonDisableButton"
+                                        Text="Disable"
+                                        AutomationId="ButtonDisable"
+                                        Clicked="OnToggleButtonDisabled"/>
+                                <Button Text="Reset"
+                                        AutomationId="ButtonReset"
+                                        Clicked="OnResetButtonState"/>
+                        </HorizontalStackLayout>
+                </VerticalStackLayout>
+        </VerticalStackLayout>
+</ContentPage>
+

src/Controls/tests/TestCases.HostApp/FeatureMatrix/VisualStateManager/VSMButton/VisualStateManagerButtonPage.xaml.cs

@@ -0,0 +1,83 @@
+namespace Maui.Controls.Sample;
+
+public partial class VisualStateManagerButtonPage : ContentPage
+{
+	public VisualStateManagerButtonPage()
+	{
+		InitializeComponent();
+		VisualStateManager.GoToState(DemoButton, "Normal");
+	}
+
+	void OnDemoButtonPressed(object sender, EventArgs e)
+	{
+		if (!DemoButton.IsEnabled)
+			return;
+		VisualStateManager.GoToState(DemoButton, "Pressed");
+		StateLabel.Text = "State: Pressed";
+		DemoButton.Text = "Pressed";
+	}
+
+	void OnDemoButtonReleased(object sender, EventArgs e)
+	{
+		if (!DemoButton.IsEnabled)
+			return;
+		VisualStateManager.GoToState(DemoButton, "Normal");
+		StateLabel.Text = "State: Normal/Released";
+		DemoButton.Text = "Normal/Released";
+	}
+
+	void OnToggleButtonDisabled(object sender, EventArgs e)
+	{
+		DemoButton.IsEnabled = !DemoButton.IsEnabled;
+		ButtonDisableButton.Text = DemoButton.IsEnabled ? "Disable" : "Enable";
+		if (!DemoButton.IsEnabled)
+		{
+			VisualStateManager.GoToState(DemoButton, "Disabled");
+			StateLabel.Text = "State: Disabled";
+			DemoButton.Text = "Disabled";
+		}
+		else
+		{
+			VisualStateManager.GoToState(DemoButton, "Normal");
+			StateLabel.Text = "State: Normal";
+			DemoButton.Text = "Normal";
+		}
+	}
+
+	void OnResetButtonState(object sender, EventArgs e)
+	{
+		DemoButton.IsEnabled = true;
+		VisualStateManager.GoToState(DemoButton, "Normal");
+		ButtonDisableButton.Text = "Disable";
+		StateLabel.Text = "State: Normal";
+		DemoButton.Text = "Press Me";
+	}
+
+	void OnDemoButtonPointerEntered(object sender, PointerEventArgs e)
+	{
+		if (!DemoButton.IsEnabled)
+			return;
+		VisualStateManager.GoToState(DemoButton, "PointerOver");
+		StateLabel.Text = "State: PointerOver Enter";
+		DemoButton.Text = "PointerOver Enter";
+	}
+
+	void OnDemoButtonPointerExited(object sender, PointerEventArgs e)
+	{
+		if (!DemoButton.IsEnabled)
+			return;
+		VisualStateManager.GoToState(DemoButton, "Normal");
+		StateLabel.Text = "State: PointerOver Exit";
+		DemoButton.Text = "PointerOver Exit";
+	}
+
+	void OnButtonFocused(object sender, FocusEventArgs e)
+	{
+		if (!DemoButton.IsEnabled)
+			return;
+		VisualStateManager.GoToState(DemoButton, "Focused");
+		StateLabel.Text = "State: Focused";
+		DemoButton.Text = "Focused";
+	}
+}
+

src/Controls/tests/TestCases.HostApp/FeatureMatrix/VisualStateManager/VSMCheckBox/VisualStateManagerCheckBoxPage.xaml

@@ -0,0 +1,62 @@
+<?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="Maui.Controls.Sample.VisualStateManagerCheckBoxPage"
+             Title="VisualStateManagerCheckBoxPage">
+    <ContentPage.Resources>
+        <Style TargetType="CheckBox" x:Key="VsmCheckBoxStyle">
+            <Setter Property="Color" Value="#374151" />
+            <Setter Property="VisualStateManager.VisualStateGroups">
+                <VisualStateGroupList>
+                    <VisualStateGroup x:Name="CommonStates">
+                        <VisualState x:Name="Normal">
+                            <VisualState.Setters>
+                                <Setter Property="Opacity" Value="1" />
+                                <Setter Property="Scale" Value="1.0" />
+                                <Setter Property="Color" Value="#FF1F64D4" />
+                            </VisualState.Setters>
+                        </VisualState>
+                        <VisualState x:Name="Disabled">
+                            <VisualState.Setters>
+                                <Setter Property="Opacity" Value="0.6" />
+                                <Setter Property="Scale" Value="1.0" />
+                                <Setter Property="Color" Value="#FF9CA3AF" />
+                            </VisualState.Setters>
+                        </VisualState>
+                    </VisualStateGroup>
+                    <VisualStateGroup x:Name="CheckStates">
+                        <VisualState x:Name="Checked">
+                            <VisualState.Setters>
+                                <Setter Property="Color" Value="#FF25DF2E" />
+                                <Setter Property="Scale" Value="1.5" />
+                            </VisualState.Setters>
+                        </VisualState>
+                        <VisualState x:Name="Unchecked">
+                            <VisualState.Setters>
+                                <Setter Property="Color" Value="#FFC9150B" />
+                                <Setter Property="Scale" Value="1.25" />
+                            </VisualState.Setters>
+                        </VisualState>
+                    </VisualStateGroup>
+                </VisualStateGroupList>
+            </Setter>
+        </Style>
+    </ContentPage.Resources>
+
+        <VerticalStackLayout Padding="20" Spacing="16">
+            <Label Text="VisualStateManager Feature Matrix" FontSize="20" />
+
+            <VerticalStackLayout Padding="12" Spacing="8">
+                <Label Text="CheckBox States (Checked / Unchecked / Disabled)" FontAttributes="Bold" />
+                <HorizontalStackLayout Spacing="10" VerticalOptions="Center">
+                    <CheckBox x:Name="VSMCheckBox" AutomationId="VSMCheckBox" Style="{StaticResource VsmCheckBoxStyle}" CheckedChanged="OnCheckBoxCheckedChanged" />
+                    <Label x:Name="CheckBoxState" AutomationId="CheckBoxState" Text="State: Unchecked" VerticalOptions="Center" />
+                </HorizontalStackLayout>
+                <HorizontalStackLayout Spacing="10">
+                    <Button x:Name="CheckBoxDisableButton" Text="Disable" AutomationId="CheckBoxDisable" Clicked="OnToggleCheckBoxDisabled" />
+                    <Button Text="Reset" AutomationId="CheckBoxReset" Clicked="OnResetCheckBox" />
+                </HorizontalStackLayout>
+            </VerticalStackLayout>
+        </VerticalStackLayout>
+</ContentPage>
+

src/Controls/tests/TestCases.HostApp/FeatureMatrix/VisualStateManager/VSMCheckBox/VisualStateManagerCheckBoxPage.xaml.cs

@@ -0,0 +1,51 @@
+namespace Maui.Controls.Sample;
+
+public partial class VisualStateManagerCheckBoxPage : ContentPage
+{
+	public VisualStateManagerCheckBoxPage()
+	{
+		InitializeComponent();
+		VisualStateManager.GoToState(VSMCheckBox, "Normal");
+		CheckBoxState.Text = "State: Normal";
+	}
+
+	void OnCheckBoxCheckedChanged(object sender, CheckedChangedEventArgs e)
+	{
+		if (!VSMCheckBox.IsEnabled)
+		{
+			CheckBoxState.Text = "State: Disabled";
+			return;
+		}
+
+		var state = e.Value ? "Checked" : "Unchecked";
+		VisualStateManager.GoToState(VSMCheckBox, state);
+		CheckBoxState.Text = $"State: {state}";
+	}
+
+	void OnToggleCheckBoxDisabled(object sender, EventArgs e)
+	{
+		VSMCheckBox.IsEnabled = !VSMCheckBox.IsEnabled;
+		CheckBoxDisableButton.Text = VSMCheckBox.IsEnabled ? "Disable" : "Enable";
+		if (!VSMCheckBox.IsEnabled)
+		{
+			VisualStateManager.GoToState(VSMCheckBox, "Disabled");
+			CheckBoxState.Text = "State: Disabled";
+		}
+		else
+		{
+			var state = VSMCheckBox.IsChecked ? "Checked" : "Unchecked";
+			VisualStateManager.GoToState(VSMCheckBox, state);
+			CheckBoxState.Text = $"State: {state}";
+		}
+	}
+
+	void OnResetCheckBox(object sender, EventArgs e)
+	{
+		VSMCheckBox.IsEnabled = true;
+		VSMCheckBox.IsChecked = false;
+		CheckBoxDisableButton.Text = "Disable";
+		VisualStateManager.GoToState(VSMCheckBox, "Normal");
+		CheckBoxState.Text = "State: Normal";
+	}
+}
+

src/Controls/tests/TestCases.HostApp/FeatureMatrix/VisualStateManager/VSMCollectionViewPage/VSMCollectionViewViewModel.cs

@@ -0,0 +1,28 @@
+using System.Collections.ObjectModel;
+
+namespace Maui.Controls.Sample;
+
+public class VSMCollectionViewItem
+{
+	public string Name { get; set; } = string.Empty;
+}
+
+public class VSMCollectionViewViewModel
+{
+	public ObservableCollection<VSMCollectionViewItem> Items { get; }
+
+	public VSMCollectionViewViewModel()
+	{
+		Items = new ObservableCollection<VSMCollectionViewItem>
+		{
+			new VSMCollectionViewItem { Name = "Banana" },
+			new VSMCollectionViewItem { Name = "Cherry" },
+			new VSMCollectionViewItem { Name = "Date" },
+			new VSMCollectionViewItem { Name = "Elderberry" },
+			new VSMCollectionViewItem { Name = "Fig" },
+			new VSMCollectionViewItem { Name = "Grape" },
+			new VSMCollectionViewItem { Name = "Honeydew" }
+		};
+	}
+}
+