I’m learning MAUI and XAML on MS Learn. Unable to get sample code to work. When I click the button and hold down the mouse button, the scale goes from 1.0 to 0.8. When I release the mouse button the scale should return to 1.0 but doesn’t. Below is the XAML code and the C# code from the code-behind file:
XAML Code:
<?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="ControlGallery.Views.XAML.ButtonVisualStatePageXAML"
Title="Button Visual State">
<!-- Original code from ms-learn website does not work -->
<VerticalStackLayout>
<Label Text="Button Visual State Using XAML"
FontSize="40"
FontAttributes="Bold"
HorizontalOptions="Center" />
<Button Text="Click me!"
HorizontalOptions="Center">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
</VerticalStackLayout>
<!-- A.I. first suggestion did not work -->
<!--<VerticalStackLayout>
<Label Text="Button Visual State Using XAML"
FontSize="40"
FontAttributes="Bold"
HorizontalOptions="Center" />
<Button Text="Click me!"
HorizontalOptions="Center">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
</VerticalStackLayout>-->
<!-- A.I. second suggestion did not work -->
<!--<VerticalStackLayout>
<Label Text="Button Visual State Using XAML"
FontSize="40"
FontAttributes="Bold"
HorizontalOptions="Center" />
<Button Text="Click me!"
HorizontalOptions="Center">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale"
Value="0.8" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Property="Scale"
Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
</VerticalStackLayout>-->
</ContentPage>
C# Code-behind:
namespace ControlGallery.Views.XAML;
public partial class ButtonVisualStatePageXAML : ContentPage
{
public ButtonVisualStatePageXAML()
{
InitializeComponent();
}
}
I’m using Visual Studio 2022 Community edition. This error occurs in both Windows and Android.
I asked A.I. but both suggestions did not work. I restarted Visual Studio, cleaned and rebuilt the solution. I searched StackOverflow with MAUI VisualState. 19 articles appeared. Some referred to Xamarin and were ignored. Anyway no article addressed my issue. VisualState code fails on both Windows and Android. Not building for Apple.
It’s because the default Button Style(TargetType=”Button”) setters: <VisualState x:Name="Normal" />
in ResourcesStylesStyles.xaml has a higher priority than in the local XAML you defined. So you just need to comment out below in <Setter Property="VisualStateManager.VisualStateGroups">/<Style TargetType="Button"/>
<VisualState x:Name="Normal" />
After that, when releasing the mouse button, the scale should return to 1.0(Normal State).
2