Xamarin切换Tab前弹出确认弹窗的实现方案

开发者阿泽

2026-7-20

实现Xamarin Community Toolkit TabView切换前的未保存更改确认

我在MainPage中使用Xamarin Community Toolkit的TabView展示两个标签页，每个标签页加载对应的ContentView。需求是：当Tab1（HomeView）存在未保存的更改时，切换到Tab2（TimeView）前向用户显示确认框，用户确认放弃更改后才允许切换，否则停留在当前Tab。

现有代码

MainPage.xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             xmlns:pancakeview="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" xmlns:views="clr-namespace:TimeKeeper.Views"
             x:Class="TimeKeeper.MainPage"
             BackgroundColor="{StaticResource LightBgColor}"
             Title="Home"
             NavigationPage.HasNavigationBar="True"
             Shell.NavBarIsVisible="True"
             >
    <ContentPage.ToolbarItems>
       
    </ContentPage.ToolbarItems>
    <ContentPage.Resources>
        <ResourceDictionary>
            <ControlTemplate
                x:Key="TabItemTemplate">    
                <pancakeview:PancakeView HeightRequest="70" WidthRequest="70" CornerRadius="35" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="{TemplateBinding CurrentBadgeBackgroundColor}">
                    <StackLayout VerticalOptions="Center" Spacing="2">
                        <Image Source="{TemplateBinding CurrentIcon}" HeightRequest="24" HorizontalOptions="Center" xct:IconTintColorEffect.TintColor="{TemplateBinding CurrentTextColor}"/>
                        <Label Text="{TemplateBinding Text}" TextColor="{TemplateBinding CurrentTextColor}" FontSize="10" FontFamily="Medium" HorizontalOptions="Center"/>
                    </StackLayout>
                </pancakeview:PancakeView>
            </ControlTemplate>

            <Style
                x:Key="CustomTabStyle"
                TargetType="xct:TabView">
                <Setter
                    Property="IsTabTransitionEnabled"
                    Value="True" />
                <Setter
                    Property="TabStripHeight"
                    Value="{OnPlatform Android='90', iOS='100'}" />
                <Setter
                    Property="TabContentBackgroundColor"
                    Value="Transparent" />
                <Setter
                    Property="TabStripPlacement"
                    Value="Bottom" />
            </Style>


        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <Grid RowDefinitions="75,30,*" RowSpacing="0" >

            <xct:TabView Grid.Row="1" x:Name="MainTabView" Grid.RowSpan="2" Style="{StaticResource CustomTabStyle}" IsSwipeEnabled="False"  SelectionChanged="TabView_SelectionChanged">
                <xct:TabView.TabStripBackgroundView>
                    <Image Source="tabview" Margin="0,0" Aspect="Fill"/>
                </xct:TabView.TabStripBackgroundView>

                <xct:TabViewItem 
                    x:Name="MyTab1"   
                    TabTapped="Tab1_TabTapped"  
                    FontFamily="FontIcons"  
                    Text="HOME" 
                    TextColor="{StaticResource DarkBlue}"
                    TextColorSelected="{StaticResource White}"
                    ControlTemplate="{StaticResource TabItemTemplate}"
                    BadgeBackgroundColor="{StaticResource LightBgColor}"
                    BadgeBackgroundColorSelected="{StaticResource DarkBlue}"
                    Padding="{OnPlatform iOS='0,10,0,0'}"
                    Icon="home.png"
                    IconSelected="home.png">
                   <views:HomeView></views:HomeView>
                </xct:TabViewItem>

                <xct:TabViewItem 
                    x:Name="MyTab3"
                    Text="TIME" 
                    ControlTemplate="{StaticResource TabItemTemplate}"
                    TextColor="{StaticResource DarkBlue}"
                    TextColorSelected="{StaticResource White}"
                    BadgeBackgroundColor="{StaticResource LightBgColor}"
                    BadgeBackgroundColorSelected="{StaticResource DarkBlue}"
                    Padding="{OnPlatform iOS='0,10,0,0'}"
                    TabTapped="Tab3_TabTapped"
                    Icon="time.png"
                    IconSelected="timeselected.png"
                    >
                    <views:TimeView  x:Name="TimeViewContent"></views:TimeView>
                </xct:TabViewItem>
            </xct:TabView>

            <!--Header-->
            <pancakeview:PancakeView Grid.RowSpan="2" CornerRadius="0,0,30,30" BackgroundColor="{StaticResource Blue}" Padding="{OnPlatform iOS='0,40,0,0'}">

                <pancakeview:PancakeView.Shadow>
                    <pancakeview:DropShadow Color="#000000"/>
                </pancakeview:PancakeView.Shadow>

                <StackLayout VerticalOptions="Center">
                  <Label HorizontalOptions="Center" TextColor="{StaticResource White}">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="Welcome " FontFamily="Medium" FontSize="25"/>
                                <Span Text="Christopher" FontFamily="Bold" FontSize="25"/>
                                <Span Text="!" FontFamily="Bold" FontSize="25"/>
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <StackLayout Orientation="Horizontal" HorizontalOptions="Center" >
                        <Label Text="Not Christopher?" TextColor="{StaticResource White}" FontSize="14" FontFamily="Regular" />
                        <Label Text="click here" TextColor="{StaticResource White}" FontSize="14" FontFamily="Regular" TextDecorations="Underline" xct:TouchEffect.NativeAnimation="True">
                            <Label.GestureRecognizers>
                                <TapGestureRecognizer Tapped="Switch_Tapped"/>
                            </Label.GestureRecognizers>
                        </Label>
                    </StackLayout>
                </StackLayout>
            </pancakeview:PancakeView>
        </Grid>

    </ContentPage.Content>

</ContentPage>

MainPage.xaml.cs（尝试的代码）

1. TabTapped事件实现

private async void Tab3_TabTapped(object sender, Xamarin.CommunityToolkit.UI.Views.TabTappedEventArgs e)
{
    var isUsavedChanges = await SecureStorage.GetAsync("UnsavedChanges");
    if (isUsavedChanges == "true")
    {
        DisplayMessage displayMessage = new DisplayMessage()
        {
            Description = "You have some unsaved changes on the page, Do you want to discard it?",
            Title = "Warning"
        };
        await DisplayMessage(displayMessage);
        //return;
    }            
}

显示弹窗方法

private async Task DisplayMessage(DisplayMessage displayMessage)
{
    var customView = new ConfirmChanges();
    customView.BindingContext = this;
    await PopupNavigation.Instance.PushAsync(customView);
}

关闭弹窗命令

[RelayCommand]
private async void ClosePopup()
{
    await PopupNavigation.Instance.PopAsync();
}

放弃更改命令

[RelayCommand]
private async void DiscardEntries()
{
    await SecureStorage.SetAsync("UnsavedChanges", "false");
     // Create a new instance of the ContentView.
    var myContentView = new TimeView();
    // Set the Content property of the ContentPage to the ContentView instance.
    MyTab3.Content=myContentView;
    //MyTab1.IsSelected = false;
    //MyTab3.IsSelected = true;
}

2. SelectionChanged事件测试代码

private async void TabView_SelectionChanged(object sender, Xamarin.CommunityToolkit.UI.Views.TabSelectionChangedEventArgs e)
{
    var tabView = ((TabView)sender);
    if (tabView != null && tabView.SelectedIndex == 1)
    {
        MyTab2.IsSelected = false;                
        MyTab1.IsSelected = true;               
    }
}

问题分析

TabTapped事件触发时，TabView已经开始切换标签页，无法直接阻止默认行为，导致弹窗弹出的同时Tab已经切换完成。
SelectionChanged事件是标签切换完成后才触发，此时再试图切换回去体验不好，也无法做到切换前确认。

正确实现方案

步骤1：修改TabTapped事件，阻止默认切换

在Tab3_TabTapped事件中，先判断是否有未保存更改，如果有，设置e.Handled = true阻止默认的Tab切换行为，然后弹出确认框，根据用户选择决定是否手动切换Tab。

步骤2：修改命令逻辑，手动控制Tab切换

更新DiscardEntries命令，在放弃更改后手动选中目标Tab；关闭弹窗时不做Tab切换操作，保持当前Tab选中状态。

修改后的MainPage.xaml.cs关键代码

private async void Tab3_TabTapped(object sender, Xamarin.CommunityToolkit.UI.Views.TabTappedEventArgs e)
{
    var isUnsavedChanges = await SecureStorage.GetAsync("UnsavedChanges");
    if (isUnsavedChanges == "true")
    {
        // 阻止默认的Tab切换行为
        e.Handled = true;
        // 弹出确认弹窗
        await DisplayMessage(new DisplayMessage()
        {
            Description = "当前页面存在未保存的更改，是否要放弃并切换页面？",
            Title = "警告"
        });
    }
    // 没有未保存更改时，默认允许切换，无需额外操作
}

[RelayCommand]
private async void DiscardEntries()
{
    await SecureStorage.SetAsync("UnsavedChanges", "false");
    // 手动切换到Tab3
    MainTabView.SelectedIndex = 1;
    // 关闭弹窗
    await PopupNavigation.Instance.PopAsync();
}

[RelayCommand]
private async void ClosePopup()
{
    // 仅关闭弹窗，不切换Tab
    await PopupNavigation.Instance.PopAsync();
}

补充说明

确保ConfirmChanges弹窗中的“确认”按钮绑定DiscardEntries命令，“取消”按钮绑定ClosePopup命令。
如果HomeView中有修改操作，记得在修改时将SecureStorage中的UnsavedChanges设置为"true"，保存后设置为"false"。

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

Xamarin切换Tab前弹出确认弹窗的实现方案

现有代码 #

MainPage.xaml #

MainPage.xaml.cs（尝试的代码） #