MAUI新生4.2-样式外观：控件状态样式VisualState

（当前版本V7.0.94，VisualState有bug）

控件状态指控件当前处于什么使用状态，如禁用、聚焦、鼠标悬停等等，当控件进入到某种状态时，可以通过【附加属性】【VisualStateManager.VisualStateGroups】设置特定的样式。VisualStateManager.VisualStateGroups的使用结构，套了几层集合，有些复杂，如下图所示：

 

 

一、MAUI为可视化控件提供了丰富的内置状态，大多数时候，我们主要通过内置状态来管理控件的状态样式，但如果无法满足开发需求，也可以自定义状态。内置状态包括：

所有派生自VisualElemnet的视觉控件：Normal、Disabled、Focused、PointerOver

Button和ImageButton特有：Pressed

CheckBox特有：IsChecked

RadioButton特有：Checked、Unchecked

Switch特有：On、Off

CollectionView特有：Selected

CarouselView特有：DefaultItem、CurrentItem、PreviousItem、NextItem

 

 

二、在控件中定义和使用控件状态样式 

<ContentPage
    ......>
    <VerticalStackLayout Padding="10">
        <Entry x:Name="entry1" Placeholder="请输入">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <!--正常状态，这个状态必须要有，如果使用默认，可以不设置Setters-->
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Lime" />
                        </VisualState.Setters>
                    </VisualState>
                    <!--聚焦状态-->
                    <VisualState x:Name="Focused">
                        <VisualState.Setters>
                            <Setter Property="FontSize" Value="36" />
                            <Setter Property="BackgroundColor" Value="Lime" />
                        </VisualState.Setters>
                    </VisualState>
                    <!--禁用状态-->
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Pink" />
                        </VisualState.Setters>
                    </VisualState>
                    <!--鼠标悬停状态-->
                    <VisualState x:Name="PointerOver">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="LightBlue" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Entry>
        <Button Text="禁用/启用输入框" Clicked="Button_Clicked"/>
    </VerticalStackLayout>
</ContentPage>

 

  

 

三、在样式中定义和使用控件状态样式 

<!--定义隐式样式，自动应用于Entry类型控件-->
<Style TargetType="Entry">
    <Setter Property="FontSize" Value="18" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Lime" />
                    </VisualState.Setters>
                </VisualState>
                ......
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

 

 

 

四、在一个控件状态中，影响其它控件的样式 

<StackLayout>
    <Entry x:Name="entry" Placeholder="请输入" />
    <Button Text="点击">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <!--Nomal状态必须要有，如果使用默认样式，则不用设置Setters-->
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="Scale"
                                Value="0.8" />
                        <!--设置当前页面entry的Text属性-->
                        <Setter TargetName="entry"
                                Property="Entry.Text"
                                Value="Paris" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Button>
</StackLayout>    

 

 

 

 

五、自定义控件状态及其样式

1、XAML中定义和使用状态样式 

<StackLayout x:Name="stackLayout" Padding="10">
        <VisualStateManager.VisualStateGroups>
            <!--自定义状态组，状态组名称为ValidityStates-->
            <VisualStateGroup Name="ValidityStates">
                <!--自定义状态Valid，状态名称类型为字符串-->
                <VisualState Name="Valid">
                    <VisualState.Setters>
                        <!--设置当前页面其它控件的样式-->
                        <Setter TargetName="label"
                                    Property="Label.TextColor"
                                    Value="Transparent" />
                        <Setter TargetName="entry"
                                    Property="Entry.BackgroundColor"
                                    Value="Lime" />
                    </VisualState.Setters>
                </VisualState>
                <!--自定义状态Invalid-->
                <VisualState Name="Invalid">
                    <!--设置当前页面其它控件的样式-->
                    <VisualState.Setters>
                        <Setter TargetName="entry"
                                    Property="Entry.BackgroundColor"
                                    Value="Pink" />
                        <Setter TargetName="button"
                                    Property="Button.IsEnabled"
                                    Value="False" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Entry x:Name="entry"
               Placeholder="555-555-5555"
               TextChanged="OnTextChanged" />
        <Label x:Name="label"
               Text="电话号码格式为555-555-5555, 且不能以0或1开头" />
        <Button x:Name="button"
                Text="Submit"
                FontSize="18"/>
    </StackLayout>

 

 

2、还需要在后台代码中，通过VisualStateManager.GoToState( 宿主控件，状态值)，定义改变控件状态的逻辑

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        //初始化后，调用GoToState函数，设置状态
        GoToState(false);
    }

    //OnTextChanged事件处理程序，使用正则对输入值进行判断。如果符合正则规则，则调用GoToState函数并传入true，反之传入false
    void OnTextChanged(object sender, TextChangedEventArgs args)
    {
        bool isValid = Regex.IsMatch(args.NewTextValue, @"^[2-9]\d{2}-\d{3}-\d{4}$");
        GoToState(isValid);
    }

    //通过GoToState函数设置状态
    //根据传入的参数值，如为true，则状态为Valid；如为false，则为Invalid
    void GoToState(bool isValid)
    {
        string visualState = isValid ? "Valid" : "Invalid";
        //VisualStateManager.GoToState方法，设置控件状态，参数①为控件对象，参数②为状态的字符串值
        VisualStateManager.GoToState(stackLayout, visualState);
    }
}

 

3、使用后台代码来自定义控件状态，还是比较麻烦。通过结合触发器，可以直接在XAML中定义触发状态改变的逻辑，使用更加简单方便。详见《MAUI新生5.3-样式外观：触发器Trigger》