Xamarin Forms, Android, Segmented Control запутались после перехода на другую страницу панели вкладок, а затем снова вернули ее на страницу вкладок

Я искал ту же проблему, с которой столкнулся, но не смог ее найти.

В моем приложении 5 страниц: 1- страница оболочки с панелью вкладок с 5 вкладками, и я перемещаюсь между вкладками, используя <ShellContent ContentTemplate="{DataTemplate local:PageName}/> . 2- Первая вкладка. 3- Вторая вкладка с сегментированным управлением с 3 дочерними элементами (вариант 1, вариант 2, вариант 3). 4- Третья вкладка. 5- Четвертая вкладка. 6- Пятая вкладка.

Когда я вхожу (вторая вкладка) и выбираю (вариант 2) или (вариант 3), он работает и выглядит нормально, но проблема, когда я вхожу (первая вкладка) или (третья вкладка), затем снова вхожу (вторая вкладка) и выбираю ( вариант 1) или (вариант 2) или (вариант 3), сегментированный элемент управления выглядит беспорядочно, теряет свой формат и помещает текст в начале вместо центра, как на снимке экрана ниже.

Это происходит только тогда, когда я запускаю решение на любом эмуляторе Android с любой версией Android, iOS отлично работает с тем же Xaml.

это Xaml для страницы оболочки:

<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" xmlns:local="clr-namespace:myApp"
   mc:Ignorable="d"
   x:Class="myApp.AppShell">
<Shell.Resources>
    <Style x:Key="BaseStyle"
           TargetType="Element">
        <Setter Property="Shell.BackgroundColor"
                Value="#f4f3f3" />
        <Setter Property="Shell.ForegroundColor"
                Value="#000000" />
        <Setter Property="Shell.UnselectedColor"
                Value="#808080" />
        <Setter Property="Shell.TabBarBackgroundColor"
                Value="#f4f3f3" />
        <Setter Property="Shell.TabBarTitleColor"
                Value="#000000" />
        <Setter Property="Shell.TabBarUnselectedColor"
                Value="#808080" />
    </Style>
    <Style TargetType="ShellItem"
           BasedOn="{StaticResource BaseStyle}" />

    <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
</Shell.Resources>

<TabBar x:Name="MyTabBar" >
    <Tab Title="first" 
         >
        <ShellContent ContentTemplate="{DataTemplate local:firstPage}" />
    </Tab>
    <Tab Title="second"
         >
        <ShellContent ContentTemplate="{DataTemplate local:secondPage}" Title="second" />
    </Tab>
    <Tab Title="third"
         >
        <ShellContent ContentTemplate="{DataTemplate local:thirdPage}" Title="third" />
    </Tab>
    <Tab Title="forth"
         >
        <ShellContent ContentTemplate="{DataTemplate local:forthPage}" Title="forth" />

    </Tab>
    <Tab Title="fifth"
          >
        <ShellContent ContentTemplate="{DataTemplate local:fifthPage}" Title="fifth" />
    </Tab>
</TabBar>

here is Xaml for the second page:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:controls="clr-namespace:Plugin.Segmented.Control;assembly=Plugin.Segmented"
         x:Class="myApp.secondPage"
         >
<ContentPage.Content>
    <ScrollView>
        <StackLayout Margin="20">
            <Grid BackgroundColor="White" RowSpacing="15" >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <controls:SegmentedControl Grid.Row="0" Grid.ColumnSpan="4" x:Name="NewAdSegmentedControl" 
                    TintColor="Black" SelectedTextColor="White" SelectedSegment="0" >
                    <controls:SegmentedControl.Children>
                        <controls:SegmentedControlOption x:Name="firstOption"  Text="1st option" />
                        <controls:SegmentedControlOption x:Name="secondOption" Text="2nd option" />
                        <controls:SegmentedControlOption x:Name="thirdOption" Text="3rd option" />
                    </controls:SegmentedControl.Children>
                </controls:SegmentedControl>
            </Grid>
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

here is Xaml for third page:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="myApp.thirdPage">
<ContentPage.Content>
    <Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text=""/>
</ContentPage.Content>

here is a gif representing the problem.

введите здесь описание изображения

Пожалуйста помогите...


person MamSash    schedule 11.02.2020    source источник
comment
У нас нет control:SegmentedControlOption, могли бы предоставить?   -  person Wendy Zang - MSFT    schedule 12.02.2020
comment
Венди, спасибо за ответ, я использую Plugin.SegmentedControl.Netstandard.   -  person MamSash    schedule 13.02.2020
comment
По словам вас, xaml, я тестировал самостоятельно, не смог воспроизвести. Мне нужно больше информации с кодом.   -  person Wendy Zang - MSFT    schedule 18.02.2020
comment
Я добавил gif-фото для своей проблемы, пожалуйста, посмотрите его и скажите, какой код вам нужен, и я предоставлю.   -  person MamSash    schedule 19.02.2020
comment
Укажите код второй и третьей вкладки. Или простой пример, который мог бы воспроизвести ошибку для меня.   -  person Wendy Zang - MSFT    schedule 21.02.2020
comment
Я предоставил код всех страниц там   -  person MamSash    schedule 22.02.2020


Ответы (1)


Основываясь на моем тесте, я предполагаю, что это может быть связано с размером границы текста. Меняю положение в сетке, офигенно работает.

 <controls:SegmentedControl
                    x:Name="NewAdSegmentedControl"
                    Grid.Row="0"
                    Grid.Column="3"
                    Grid.ColumnSpan="4"
                    SelectedSegment="0"
                    SelectedTextColor="White"
                    TintColor="Black">
                    <controls:SegmentedControl.Children>
                        <controls:SegmentedControlOption x:Name="firstOption" Text="1st option" />
                        <controls:SegmentedControlOption x:Name="secondOption" Text="2nd option" />
                        <controls:SegmentedControlOption x:Name="thirdOption" Text="3rd option" />
                    </controls:SegmentedControl.Children>
                </controls:SegmentedControl>

введите здесь описание изображения

person Wendy Zang - MSFT    schedule 03.03.2020
comment
Спасибо Венди за вашу помощь, я попробую и посмотрю на результат. - person MamSash; 07.03.2020