以下示例显示了如何根据用户的登录状态控制页面的可见性或导航.

Here is an example showing how you can control the visibility or navigation to your pages based on the login status of the user.

默认情况下，Shell始终始终最初显示在 AppShell.xaml 中定义的第一个元素，在这种情况下，它将显示为 Login.xaml 页面.

By default Shell will always displays initially the first element defined in AppShell.xaml, in this case it will be Login.xaml page.

在下面的示例中，"Page3"最初会显示，因为默认情况下( Isvisible = true )，而"Page2"仅当可绑定属性 IsLogged 为 true 时，它才可见.

In the below example "Page3" will be visible initially because by default (Isvisible=true), while "Page2" it will only be visible when the bindable property IsLogged is true.

• 当用户在 IsLogged_PropertyChanged()事件中登录/注销时，您可以处理任何逻辑.

• You can handle any logic when user Log in/Log out in the IsLogged_PropertyChanged() event.

如果您想要多个/特定或基于页面的角色，则始终可以创建/定义/设计您的角色，在绑定中使用它们，引发并使用其属性更改事件来执行操作.

If you want several/specific or page based roles you can always create/define/design yours, use them in bindings, raise and use their property changed event to execute actions.

AppShell.xaml

<Shell Shell.FlyoutBehavior="Disabled"..>
   <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab>
            <ShellContent Title="Login" Route="Login">
                <local:Login />
            </ShellContent>

            <ShellContent Title="Page2" Route="Page2"
                ContentTemplate="{DataTemplate local:Page2}"
                IsVisible="{Binding IsLogged}"/>

            <ShellContent Title="Page3" Route="Page3"
                ContentTemplate="{DataTemplate local:Page3}"/>
        </Tab>
    </FlyoutItem>

AppShell.xaml.cs

public bool IsLogged
{
    get => (bool)GetValue(IsLoggedProperty);
    set => SetValue(IsLoggedProperty, value);
}

public static readonly BindableProperty IsLoggedProperty =
    BindableProperty.Create("IsLogged", typeof(bool), typeof(AppShell), false, propertyChanged: IsLogged_PropertyChanged);

private static void IsLogged_PropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
//handle log in/log out event
    if ((bool) newValue)
       //user just logged in logic
    else
      //user just logged out logic
}

Login.xaml

<StackLayout>
    <Label
        FontSize="45"
        HorizontalOptions="FillAndExpand"
        Text="Login Page" />
    <Button Clicked="Button_Clicked" Text="Log In" />
</StackLayout>

Login.xaml.cs

private async void Button_Clicked(object sender, System.EventArgs e)
{
    IsVisible = false;                          //hide login page
    //Trigger the binding to show pages previously hidden
    (Shell.Current as AppShell).IsLogged = true;
    await Shell.Current.GoToAsync("//Page2");   //navigate to main page (next after log)
                                               //Enable the flyout: hamburger button
    Shell.Current.FlyoutBehavior = FlyoutBehavior.Flyout;  
}

---

与标签页相同

在此示例中，符号"底部选项卡对于上部选项卡"B"将不可见.属于底部标签字母"直到用户登录为止，其余的底部"标签将在最初显示.

---

Same thing with Tabs

In this example "Symbols" bottom tab won't be visible the same for upper tab "B" that belongs to bottom tab "Letters" until the user log-in, the remaining bottoms tabs will be visible initially.

AppShell.xaml

<TabBar>
    <ShellContent Title="Login" Route="Login">
        <local:Login />
    </ShellContent>

    <Tab Title="Letters">
        <ShellContent
            Title="A"
            ContentTemplate="{DataTemplate local:Page1}"
            Route="Page1" />

        <ShellContent
            Title="B"
            ContentTemplate="{DataTemplate local:Page2}"
            IsVisible="{Binding IsLogged}"
            Route="Page2" />

        <ShellContent
            Title="C"
            ContentTemplate="{DataTemplate local:Page3}"
            Route="Page3" />
    </Tab>

    <Tab Title="Digits">
        <ShellContent
            Title="100"
            ContentTemplate="{DataTemplate local:Page4}"
            Route="Page4" />
    </Tab>

    <Tab Title="Symbols" IsVisible="{Binding IsLogged}">
        <ShellContent
            Title="!"
            ContentTemplate="{DataTemplate local:Page5}"
            Route="Page5" />
    </Tab>
</TabBar>