如何在Xamarin中切换到另一个选项卡之前显示确认弹出

我正在使用Xamarin社区工具包TabView来显示我的MainPage上的选项卡，我有两个TabViewItem，并在TabViewItem中加载ContentView。我想显示一个确认框，如果用户有任何未保存的更改存在于Tab1之前，去Tab2。

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.我尝试Tab_Tapped事件

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;
}

TabView_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;               
    }
}

好吧，那就试试这样做，如果不符合你的要求，告诉我。

private async void TabView_SelectionChanging(object sender, XamForms.Controls.TabSelectionChangingEventArgs e)
{
    if (e.NewIndex == 1) // Check if the user is switching to Tab2 or alter it accordingly if you want to do it in dynamic way 
    {
        var tab1Content = myTabView.Children[0].Content; // This will get the content of Tab1

        if (tab1Content is YourTab1ContentPage tab1Page) // Replace YourTab1ContentPage with the actual type of your Tab1 content page
        {
            if (tab1Page.HasUnsavedChanges) // Check if unsaved changes exist on Tab1, you need to build your own logic or have a global boolean in your VM so that you can even access it here like YOURVM. HasUnsavedChanges

            //var isUsavedChanges = await SecureStorage.GetAsync("UnsavedChanges");
            //if (isUsavedChanges == "true")

            {
                bool userResponse = await DisplayAlert("Unsaved Changes", "You have unsaved changes on Tab1. Do you want to continue?", "Yes", "No");

                if (!userResponse)
                {
                    e.Cancel = true; // Cancel the tab switch if the user chooses not to continue
                }
            }
        }
    }
}

对于动态选项卡开关检查，请按以下方式执行：

private void TabbedPage_SelectedIndexChanged(object sender, EventArgs e)
{
    var selectedTab = myTabbedPage.CurrentPage; // Get the currently selected TabPage

    if (selectedTab == tab1Page) // Replace tab1Page with your Tab1 ContentPage instance
    {
        // Tab1 is selected
        // Use the above code block logic here
    }
    else if (selectedTab == tab2Page) // Replace tab2Page with your Tab2 ContentPage instance
    {
        // Tab2 is selected
        // Use the above code block logic here
    }
    // Add conditions for other tabs if needed
}

如何在Xamarin中切换到另一个选项卡之前显示确认弹出

1条答案

相关问题

热门标签

最新问答