TabbedPage несколько раз рендерится в формах Xamarin с помощью оболочки - PullRequest
Новая
       29

TabbedPage несколько раз рендерится в формах Xamarin с помощью оболочки

0 голосов
/ 13 февраля 2020 
I have a problem using TabbedPages in my Xamarin Forms Mobile App (Shell)

When I navigate to a TabbedPage containing 3 tabs, the 3 tabs are crunched up and repeating themselves all down the page.

To replicate it I:

1) Created a standard Xamarin Forms Shell app in Visual Studio 2019 Version 16.4.5

2) Upgraded to Xamarin Forms 4.4.0.991640

3) Added a TabbedPage and changed the navigation of the About button to navigate to the TabbedPage instead.

Вот фотография того, как это выглядит на моем android телефоне 

If I remember correctly it also happened when I deployed to my iPhone.

Обновление из-за комментария Джейсона

Весь код автоматически сгенерированный Microsoft, мое единственное взаимодействие заключалось в добавлении пустой TabbedPage и изменении строки кода в AppShell.xaml

(Примечание. Хотя это не относится к этой конкретной демонстрации, у меня также возникала та же проблема при навигации из ListView в ContentPage в моем приложении Xamarin Forms)

Добавлен TabbedPage1.xaml 

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage 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"
    x:Class="App1.Views.TabbedPage1">
    <!--Pages can be added as references or inline-->      
    <ContentPage Title="Tab 1" />
    <ContentPage Title="Tab 2" />
    <ContentPage Title="Tab 3" />
</TabbedPage>

Добавлен TabbedPage1.xaml.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace App1.Views
    {
        [XamlCompilation(XamlCompilationOptions.Compile)]
        public partial class TabbedPage1 : TabbedPage
        {
            public TabbedPage1()
            {
                InitializeComponent();
            }
        }
    }

Изменен AppShell.xaml

все, что я сделал, это изменил строку

с DataTemplate local: AboutPage

на DataTemplate local: TabbedPage1 

<?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:App1.Views"
    Title="App1"
    x:Class="App1.AppShell">

<!-- 
Styles and Resources 
-->
<Shell.Resources>
    <ResourceDictionary>
        <Color x:Key="NavigationPrimary">#2196F3</Color>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
            <Setter Property="Shell.ForegroundColor" Value="White" />
            <Setter Property="Shell.TitleColor" Value="White" />
            <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
            <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
            <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
            <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
            <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
            <Setter Property="Shell.TabBarTitleColor" Value="White"/>
        </Style>
        <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
    </ResourceDictionary>
</Shell.Resources>

<!-- Your Pages -->
<TabBar>
    <Tab Title="Browse" Icon="tab_feed.png">
        <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
    </Tab>
    <Tab Title="About" Icon="tab_about.png">
        <ShellContent ContentTemplate="{DataTemplate local:TabbedPage1}" />
    </Tab>
</TabBar>

<!-- Optional Templates 
// These may be provided inline as below or as separate classes.

// This header appears at the top of the Flyout.
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<Grid>ContentHere</Grid>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>

// ItemTemplate is for ShellItems as displayed in a Flyout
<Shell.ItemTemplate>
<DataTemplate>
<ContentView>
Bindable Properties: Title, Icon
</ContentView>
</DataTemplate>
</Shell.ItemTemplate>

// MenuItemTemplate is for MenuItems as displayed in a Flyout
<Shell.MenuItemTemplate>
<DataTemplate>
<ContentView>
Bindable Properties: Text, Icon
</ContentView>
</DataTemplate>
</Shell.MenuItemTemplate>

-->

</Shell>
...