MAUI中修改AppShell.xaml：设置默认Tab与Tab点击动画

一、设置启动时默认选中第三个Tab #

有两种简单的实现方式：

方式1：通过XAML直接指定 #

给目标Tab添加x:Name，然后在Shell标签中设置CurrentItem引用该Tab：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="DemoParent.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:DemoParent.Views"
    Shell.FlyoutBehavior="Disabled"
    Title="DemoParent"
    CurrentItem="{x:Reference ZTab}"> <!-- 指定默认选中的Tab -->

    <TabBar>
        <Tab Icon="icon_X.png">
            <ShellContent ContentTemplate="{DataTemplate views:X}" />
        </Tab>
        <Tab Icon="icon_Y.png">
            <ShellContent ContentTemplate="{DataTemplate views:Y}" />
        </Tab> 
        <Tab 
            x:Name="ZTab" <!-- 给第三个Tab命名 -->
            Icon="icon_Z.png" >
            <ShellContent ContentTemplate="{DataTemplate views:Z}" />
        </Tab>
        <Tab Icon="icon_W.png">
            <ShellContent ContentTemplate="{DataTemplate views:W}" />
        </Tab> 
        <Tab Icon="icon_r.png">
            <ShellContent ContentTemplate="{DataTemplate views:R}" />
        </Tab>
    </TabBar>
</Shell>

方式2：通过后台代码设置 #

在AppShell.xaml.cs的构造函数中，直接指定CurrentItem为第三个Tab（索引从0开始，第三个对应索引2）：

public AppShell()
{
    InitializeComponent();
    // 确保TabBar有足够的项，避免索引越界
    if (TabBar.Items.Count > 2)
    {
        CurrentItem = TabBar.Items[2];
    }
}

二、为Tab添加点击/触摸动画 #

MAUI默认Tab没有内置点击动画，需要通过自定义TabBarItemTemplate结合视觉状态或行为来实现。以下是两种常用方案：

方案1：使用VisualState实现点击反馈动画 #

通过自定义Tab项的模板，利用VisualState的Pressed状态添加缩放动画：

<Shell
    x:Class="DemoParent.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:DemoParent.Views"
    Shell.FlyoutBehavior="Disabled"
    Title="DemoParent">

    <Shell.Resources>
        <!-- 自定义Tab项模板 -->
        <DataTemplate x:Key="AnimatedTabItemTemplate">
            <Grid Padding="10" HorizontalOptions="Center" VerticalOptions="Center">
                <Image 
                    Source="{Binding Icon}"
                    x:Name="TabIcon"
                    WidthRequest="24"
                    HeightRequest="24" />
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <!-- 选中状态的样式 -->
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="Scale" Value="1.2" />
                                <Setter TargetName="TabIcon" Property="Opacity" Value="1" />
                            </VisualState.Setters>
                        </VisualState>
                        <!-- 点击时的动画 -->
                        <VisualState x:Name="Pressed">
                            <VisualState.Storyboard>
                                <Storyboard>
                                    <!-- 先缩小再放大，模拟点击反馈 -->
                                    <ScaleToAnimation 
                                        TargetName="TabIcon"
                                        Scale="0.9"
                                        Duration="100"
                                        Easing="SinOut" />
                                    <ScaleToAnimation 
                                        TargetName="TabIcon"
                                        Scale="1.1"
                                        Duration="100"
                                        BeginTime="0:0:0.1"
                                        Easing="SinIn" />
                                    <ScaleToAnimation 
                                        TargetName="TabIcon"
                                        Scale="1"
                                        Duration="100"
                                        BeginTime="0:0:0.2"
                                        Easing="Linear" />
                                </Storyboard>
                            </VisualState.Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
            </Grid>
        </DataTemplate>
    </Shell.Resources>

    <!-- 应用自定义模板到TabBar -->
    <TabBar ItemTemplate="{StaticResource AnimatedTabItemTemplate}">
        <!-- 你的Tab内容保持不变 -->
        <Tab Icon="icon_X.png">
            <ShellContent ContentTemplate="{DataTemplate views:X}" />
        </Tab>
        <Tab Icon="icon_Y.png">
            <ShellContent ContentTemplate="{DataTemplate views:Y}" />
        </Tab> 
        <Tab Icon="icon_Z.png" >
            <ShellContent ContentTemplate="{DataTemplate views:Z}" />
        </Tab>
        <Tab Icon="icon_W.png">
            <ShellContent ContentTemplate="{DataTemplate views:W}" />
        </Tab> 
        <Tab Icon="icon_r.png">
            <ShellContent ContentTemplate="{DataTemplate views:R}" />
        </Tab>
    </TabBar>
</Shell>

方案2：使用自定义Behavior实现动画 #

创建一个可复用的点击动画行为，然后应用到Tab项上：

1. 先定义Behavior类：

using Microsoft.Maui.Controls;
using System.Threading.Tasks;

namespace DemoParent.Behaviors
{
    public class TapScaleAnimationBehavior : Behavior<View>
    {
        protected override void OnAttachedTo(View bindable)
        {
            base.OnAttachedTo(bindable);
            var tapGesture = new TapGestureRecognizer();
            tapGesture.Tapped += OnTapped;
            bindable.GestureRecognizers.Add(tapGesture);
        }

        private async void OnTapped(object sender, EventArgs e)
        {
            if (sender is View view)
            {
                // 执行缩放动画
                await view.ScaleTo(0.9, 100);
                await view.ScaleTo(1.1, 100);
                await view.ScaleTo(1, 100);
            }
        }

        protected override void OnDetachingFrom(View bindable)
        {
            base.OnDetachingFrom(bindable);
            var tapGesture = bindable.GestureRecognizers.FirstOrDefault(g => g is TapGestureRecognizer) as TapGestureRecognizer;
            if (tapGesture != null)
            {
                tapGesture.Tapped -= OnTapped;
                bindable.GestureRecognizers.Remove(tapGesture);
            }
        }
    }
}

2. 在XAML中引用并应用该Behavior：

<Shell
    x:Class="DemoParent.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:DemoParent.Views"
    xmlns:behaviors="clr-namespace:DemoParent.Behaviors"
    Shell.FlyoutBehavior="Disabled"
    Title="DemoParent">

    <Shell.Resources>
        <DataTemplate x:Key="AnimatedTabItemTemplate">
            <Grid Padding="10" HorizontalOptions="Center" VerticalOptions="Center">
                <Image 
                    Source="{Binding Icon}"
                    WidthRequest="24"
                    HeightRequest="24" />
                <!-- 添加点击动画行为 -->
                <Grid.Behaviors>
                    <behaviors:TapScaleAnimationBehavior />
                </Grid.Behaviors>
            </Grid>
        </DataTemplate>
    </Shell.Resources>

    <TabBar ItemTemplate="{StaticResource AnimatedTabItemTemplate}">
        <!-- 你的Tab内容不变 -->
    </TabBar>
</Shell>

内容的提问来源于stack exchange，提问作者Christopher