在 Maui 中自绘组件5：状态与视觉效果

2023-03-14 约 379 字预计阅读 1 分钟次阅读

在这篇文章中，将为 MagicButton 设置不同状态的视觉效果。

先决条件

资源字典

在 Resources/Styles 中新建资源字典文件，并定义正常、点击等不同状态的视觉效果样式。

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:components="clr-namespace:CustomButton.Components"
             x:Class="CustomButton.Resources.Styles.MagicButtonStyles">

    <Style TargetType="components:MagicButton">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Blue"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Clicked">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="DarkBlue"></Setter>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</ResourceDictionary>

将 MagicButtonStyles 添加到 Resources/Styles/Styles.xaml 中。

<?xml version="1.0" encoding="UTF-8" ?>
<?xaml-comp compile="true" ?>
<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="MagicButtonStyles.xaml"></ResourceDictionary>
    </ResourceDictionary.MergedDictionaries>

    <!--......-->

</ResourceDictionary>

状态管理

更改 MagicButton 中的代码，在 OnStartInteraction 和 OnEndInteraction 方法中，通过 VisualStateManager 在按钮被按下时，将状态设为 Clicked，在按钮被松开时，将状态设为 Normal。

private void OnStartInteraction(object sender, TouchEventArgs e)
{
    VisualStateManager.GoToState(this, "Clicked");
}

private void OnEndInteraction(object sender, TouchEventArgs e)
{
    VisualStateManager.GoToState(this, "Normal");
}

效果展示

运行项目，点击按钮并松开，可以看到按钮会根据不同状态展示不同样式。

源码获取

扫描下方二维码，关注公众号捕获异常，回复 maui 获取源码。

关注微信公众号“捕获异常”，获取最新文章推送，提升你的技能。

目录