shell design result in android and ios are different?

SoniaDevRootSoniaDevRoot Member ✭✭
edited March 29 in Xamarin.Forms

I'm trying out shell for xamarin4, it works just fine but the view is totally different from Ios and Android: here is tyhe code:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:ShelltestApp"
        FlyoutBehavior="Disabled"
       Route="home"
       RouteScheme="app"
       x:Class="ShelltestApp.ShellContainer">
    <Shell.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="Element">
                <!--does not affect -->
                <Setter Property="Shell.ShellTabBarUnselectedColor" Value="Green" />
                <!--does not affect -->
                <Setter Property="Shell.ShellTitleColor" Value="Red" />
                <!--For the header-->
                <Setter Property="Shell.ShellBackgroundColor" Value="Yellow" />
                <!--For the bottom tab-->
                <Setter Property="Shell.ShellTabBarBackgroundColor" Value="SandyBrown" />
            </Style>
        </ResourceDictionary>
    </Shell.Resources>
    <ShellItem Route="tabs"
               Style="{StaticResource BaseStyle}"
               Title="Bottom Tab Sample">
        <ShellSection Route="homeTab" Icon="Home.png">
            <ShellContent Route="homeContent" x:Name="home">
                <local:Home/>
            </ShellContent>
        </ShellSection>
        <ShellSection Route="details" Icon="category.png">
            <ShellContent Route="detailTicket" x:Name="details">
                <local:Category/>
            </ShellContent>
        </ShellSection>
        <ShellSection Route="Cart" Icon="ticket.png">
            <ShellContent Route="TicketsList" x:Name="tickets">
                <local:CartWithTickets/>
            </ShellContent>
        </ShellSection>
        <ShellSection Route="Profile" Icon="account.png">
            <ShellContent Route="ContentProfile" x:Name="profile">
                <local:AccountPage/>
            </ShellContent>
        </ShellSection>
    </ShellItem>
</Shell>

and here is the android result:

and here is the ios result:

does anyone test this one, or should I report this as a bug ?

Answers

  • yelinzhyelinzh Member, Xamarin Team Xamurai

    IOS and Android share the code , but each of them has respective UI Layer. The different views between two images above may come from platform rather than Shell.

    Refer to https://docs.microsoft.com/en-us/xamarin/cross-platform/app-fundamentals/building-cross-platform-applications/

  • SoniaDevRootSoniaDevRoot Member ✭✭

    @yelinzh I understand this, but shouldn't a property do the same thing in android and ios? for example if I give "Shell.ShellTabBarUnselectedColor" the value green, it should be taken on consideration in android and ios, but it's not. because for exemple in frame if I gave the backgroudColor the value green it's the same in android and ios.

  • SoniaDevRootSoniaDevRoot Member ✭✭

    ok here what i could do to make the them a little bit similar this is the code

    this is the result android:

    and this is the result ios

    my only concern now is that Im trying to have the header background and the footer background color different , it's possible in android using this

    but unfortunately it doesn't work with the ios.

Sign In or Register to comment.