在 AppShell 中为图标创建选项卡

Question

我正在尝试在我的 Xamarin Forms 5 应用程序中创建以下效果，我需要一些关于如何实现它的指导。

在我的弹出式页脚中，我想显示两个图标。其中之一是设置图标，当用户点击它时，我想将用户发送到一个标签页——见下文：

如何在我的 AppShell 页脚中定义标签并将它们绑定到该图标？

这是我的 AppShell:

<TabBar>
   <ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
</TabBar>

<FlyoutItem Title="Home">
    <FlyoutItem.Icon>
        <FontImageSource
            FontFamily="MISHRP"
            Glyph="{StaticResource HomeIcon}"
            Color="White" />
    </FlyoutItem.Icon>
    <Tab Title="Feed">
        <ShellContent Route="Feed" ContentTemplate="{DataTemplate home:Feed}"/>
    </Tab>
    <Tab Title="Products">
        <ShellContent Route="Products" ContentTemplate="{DataTemplate home:Products}"/>
    </Tab>
    <Tab Title="History">
        <ShellContent Route="History" ContentTemplate="{DataTemplate home:History}"/>
    </Tab>
</FlyoutItem>

<FlyoutItem Title="School">
    <FlyoutItem.Icon>
        <FontImageSource
            FontFamily="MISHRP"
            Glyph="{StaticResource SchoolIcon}"
            Color="White" />
    </FlyoutItem.Icon>
    <Tab Title="Courses">
        <ShellContent Route="Courses" ContentTemplate="{DataTemplate school:Courses}"/>
    </Tab>
</FlyoutItem>

<Shell.FlyoutFooterTemplate>
   <DataTemplate>
      <Grid RowDefinitions="120" ColumnDefinitions="150, 150">
         <Image
            Grid.Row="0"
            Grid.Column="0"
            HorizontalOptions="StartAndExpand"
            Margin="50,0,0,0">
               <Image.Source>
                  <FontImageSource
                     FontFamily="MISHRP"
                     Glyph="{StaticResource SettingsIcon}"
                     Color="White"/>
               </Image.Source>
         </Image>
         <Image
            Grid.Row="0"
            Grid.Column="1"
            HorizontalOptions="EndAndExpand"
            Margin="0,0,30,0">
               <Image.Source>
                  <FontImageSource
                     FontFamily="MISHRP"
                     Glyph="{StaticResource PowerIcon}"
                     Color="White"/>
               </Image.Source>
         </Image>
      </Grid>
   </DataTemplate>
</Shell.FlyoutFooterTemplate>

IntelliSense 不允许我在 <Grid> 中定义 <Tab>。我如何 link 这个图标到标签页？

Answer 1

我想这就是您要找的。首先使用Image.GestureRecognizers

要在“设置”中显示 FLyout，请使用 Shell.Current.FlyoutIsPresented = false;

如果需要，在设置中使用选项卡的简单方法是使用 TabbedPage

对于 Settings.xaml Shell.TabBarIsVisible="False"

中的选项卡

AppShell.xaml

<Shell.FlyoutFooterTemplate>
        <DataTemplate>
            <Grid RowDefinitions="30" ColumnDefinitions="150, 150">
                <Image
        Grid.Row="0"
        Grid.Column="0"
                Source="Settings.png"
                       HorizontalOptions="StartAndExpand"
        Margin="50,0,0,0" 
                    >
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer
            Tapped="TapGestureRecognizer_Tapped"
            NumberOfTapsRequired="1" />
                    </Image.GestureRecognizers>
                </Image>
                <Image
            Grid.Row="0"
        Grid.Column="1"
                 Source="Power.png"
        HorizontalOptions="EndAndExpand"
        Margin="0,0,30,0">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer
            Tapped="TapGestureRecognizer_Tapped_1"
            NumberOfTapsRequired="1" />
                    </Image.GestureRecognizers>
                </Image>
            </Grid>
        </DataTemplate>
        </Shell.FlyoutFooterTemplate>

AppShell.xaml.cs

private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
         Routing.RegisterRoute(nameof(Settings), typeof(Settings));
    
        await Shell.Current.GoToAsync("Settings");
     
        Shell.Current.FlyoutIsPresented = false;
     
    }

Answer 2

给图片添加点击事件。

<Image
       Grid.Row="0"
       Grid.Column="1"
       HorizontalOptions="EndAndExpand"
       Margin="0,0,30,0">
       <Image.Source>
                  <FontImageSource
                     FontFamily="MISHRP"
                     Glyph="{StaticResource PowerIcon}"
                     Color="White"/>
       </Image.Source>
       <Image.GestureRecognizers>
           <TapGestureRecognizer
                Tapped="OnImageNameTapped"
                NumberOfTapsRequired="1" />
       </Image.GestureRecognizers>
</Image>

然后在 xaml.cs 中，在使用三个标签创建标签页后

void OnImageNameTapped(object sender, EventArgs args)
    {
        try
         {
            await Navigation.PushAsync(new TabbedPage1());  
            // or await Application.Current.MainPage.Navigation.PushAsync(new TabbedPage1());
         }
        catch (Exception ex)
         {
           throw ex;
         }
    }

在 AppShell 中为图标创建选项卡

Creating tabs for an icon in AppShell

xamarin

xamarin.forms