Оболочка Xamarin.Forms генерирует страницу с верхним касанием в коде позади

Question

спасибо за вашу помощь заранее. Я работаю над приложением Forms Shell уже несколько дней. Мой пользовательский интерфейс управляется данными во многих аспектах, и я пытаюсь выполнить sh страницу, которая показывает несколько вкладок на тобе в зависимости от имеющейся модели.

Другими словами, я пытаюсь выполнить sh тот же макет, что и в демонстрационном приложении Shells:

<FlyoutItem Route="animals"
            Title="Animals"
            FlyoutDisplayOptions="AsSingleItem">
    <Tab Title="Domestic"
         Route="domestic"
         Icon="paw.png">
        <ShellContent Route="cats"
                      Style="{StaticResource DomesticShell}"
                      Title="Cats"
                      Icon="cat.png"
                      ContentTemplate="{DataTemplate views:CatsPage}" />
        <ShellContent Route="dogs"
                      Style="{StaticResource DomesticShell}"
                      Title="Dogs"
                      Icon="dog.png"
                      ContentTemplate="{DataTemplate views:DogsPage}" />
    </Tab>
</FlyoutItem>

Но начиная с существующей ссылки в FlyoutMenu. Как и уровень на вкладке «Domesti c» выше, который, когда Navigatet создает эти две или более страницы с верхним касанием оболочки.

Я знаю, что мог бы использовать TappedPage в качестве ShellContent, но TappedPages получат стиль немного по-другому, мне было интересно, смогу ли я выполнить sh это с "нативными" функциями оболочки.

Я уже пробовал что-то вроде:

ShellSection tab1 = new ShellSection
{
Title = "Tab1"
};
tab1.Items.Add(new ShellContent() { Title = "Test1", Content = new ContentPage() { Title = "Test1" } });
tab1.Items.Add(new ShellContent() { Title = "Test2", Content = new ContentPage() { Title = "Test2" } });
var current = AppShell.Current.CurrentItem;
current.Items.Add(tab1);

, но это также добавляет еще одну запись в нижней части панель вкладок и всплывающее меню, а также то, что мне не нужно.

Чтобы быть более понятным, я попытаюсь объяснить это с помощью скриншотов макетов.

Предположим, у нас есть следующее всплывающее меню, где Domesti c запись.

Эта запись Domesti c ведет на страницу, на которой viewmodel предоставляет набор данных, которые должны отображаться на вкладках.

Как вы видите, на этих страницах есть ссылка в виде заголовка, которая открывает всплывающее окно для изменения выбранного элемента и должна обновлять / изменять отображаемые данные. к экзамену Чтобы иметь три вкладки.

Надеюсь, теперь все понятно.

РЕДАКТИРОВАТЬ:

Комментарии до сих пор принес мне еще один шаг вперед. С помощью следующего кода я выполняю sh, чтобы получить нужные верхние вкладки.

        var current = AppShell.Current.CurrentItem;
        var currentSection = current.CurrentItem;

        //currentSection.Items.Clear();
        currentSection.Items.Add(new CatsPage() { Title = "Tab1"} ); ;
        currentSection.Items.Add(new ShellContent() { Title = "Tab2", Content = new CatsPage() });

Но это все еще не идеально - на добавленных страницах нижняя панель вкладок скрыта, есть ли какое-нибудь решение для этого?

У кого-нибудь есть совет?

Answer 1

Вы хотите сказать, что хотите получить ту же структуру, что и в демонстрационном приложении Shell, за кодами?

Если да, вы можете попробовать это:

в AppShell.xaml.cs:

public AppShell()
    {
        InitializeComponent();
        FlyoutItem shellItem = new FlyoutItem() { Title = "Tab1" };
        Tab tab = new Tab();
        tab.Items.Add(new ShellContent() { Title = "Test1", Content = new Page1()});
        tab.Items.Add(new ShellContent() { Title = "Test2", Content = new Page2()});
        shellItem.Items.Add(tab);
        this.Items.Add(shellItem);
    }

AppShell.xaml ：

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:d="http://xamarin.com/schemas/2014/forms/design"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   xmlns:local="clr-namespace:ShellDemo.Views"
   Title="ShellDemo"
   x:Class="ShellDemo.AppShell">

</Shell>

page1.xaml:

<ContentPage ...>
    <Shell.TitleView>
      <Button Text="change" Clicked="Button_Clicked"></Button>
    </Shell.TitleView>
     ...
</ContentPage>

в page1.xaml.cs:

private void Button_Clicked(object sender, EventArgs e)
    {
        Tab tab = new Tab();
        tab.Items.Add(new ShellContent() { Title = "Test3", Content = new ContentPage() { Title = "Test3" } });
        tab.Items.Add(new ShellContent() { Title = "Test4", Content = new ContentPage() { Title = "Test4" } });
        AppShell.Current.CurrentItem.Items.Clear();
        AppShell.Current.CurrentItem.Items.Add(tab);
    }

Update1 :

из приведенных выше эскизов, хотите ли вы изменить содержимое TabbedPage после нажатия на ссылку в titleview ()?

эффект c похож на ниже (вы должны добавить оболочку titileview на каждой странице, здесь используйте вместо ссылки кнопки):

Update 2 you Нужно только изменить содержимое вкладки:

 private void Button_Clicked(object sender, EventArgs e)
    {
        Tab tab = (Tab)AppShell.Current.CurrentItem.CurrentItem;
        tab.Items.Clear();
        tab.Items.Add(new ShellContent() { Title = "Test3", Content = new ContentPage() { Title = "Test3" } });
        tab.Items.Add(new ShellContent() { Title = "Test4", Content = new ContentPage() { Title = "Test4" } });

    }

Обновление 2 :

Я загружаю ваш проект и проверяю его. На самом деле нижняя вкладка не скрывается, Вы можете нажать на нижнюю вкладку и увидеть, что она существует, но у нее нет цвета фона, поэтому вы просто присваиваете ей Style, определенный в Shell.Resources при добавлении ShellContent

 var current = AppShell.Current.CurrentItem;
 var currentSection = current.CurrentItem;
 currentSection.Items.Add(new ShellContent() { Title = "Test3", Content = new CatsPage(),Style = (Style)AppShell.Current.Resources["BearsShell"] }); ;
 currentSection.Items.Add(new ShellContent() { Title = "Test4", Content = new CatsPage(), Style = (Style)AppShell.Current.Resources["BearsShell"] });