CODEWITHSUNDEEP
xamlxamarin.forms
Stefano APP
Stefano APP

Reputation: 35

Tabview is not displayed at the bottom

I am trying to create a TabView but although I try to insert it at the bottom, it continues to be displayed at the top

 <xct:TabView TabStripPlacement="Bottom" IsSwipeEnabled="False" BackgroundColor="White">
            <xct:TabViewItem 
                    x:Name="Home"
                    Text="Home"
                    TextColorSelected="Black"
                    TextColor="Gray"
                    Icon="IC003.png">
            </xct:TabViewItem>
    
            <xct:TabViewItem 
                    x:Name="Diario"
                    Text="Diario"
                    TextColorSelected="Black"
                    TextColor="Gray"
                    Icon="Smile.png">
            </xct:TabViewItem>
        </xct:TabView>

Upvotes: 0

Views: 204

Answers (2)

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10978

TabStripPlacement is used to set the tab at bottom or top. https://learn.microsoft.com/zh-cn/xamarin/community-toolkit/views/tabview

We could put the tabview inside the layout like StackLayout, Grid and so on. But without layous, it still works. We just need to give some contents of the items.

 <xct:TabView
        BackgroundColor="White"
        IsSwipeEnabled="False"
        TabStripHeight="60"
        TabStripPlacement="Bottom">
        <xct:TabViewItem
            x:Name="Home"
            Icon="IC003.png"
            Text="Home"
            TextColor="Gray"
            TextColorSelected="Black">
            <StackLayout BackgroundColor="Gray">
                <Label
                    HorizontalOptions="Center"
                    Text="TabContent1"
                    VerticalOptions="Center" />
            </StackLayout>
        </xct:TabViewItem>

        <xct:TabViewItem
            x:Name="Diario"
            Icon="Smile.png"
            Text="Diario"
            TextColor="Gray"
            TextColorSelected="Black">
            <StackLayout>
                <Label
                    HorizontalOptions="Center"
                    Text="TabContent2"
                    VerticalOptions="Center" />
            </StackLayout>
        </xct:TabViewItem>
    </xct:TabView>

enter image description here

Upvotes: 0

Jack
Jack

Reputation: 66

Try to wrap it inside a Grid like this:

<Grid RowDefinitions="*, Auto">
    <!-- insert stuff here -->
    <xct:TabView Grid.Row="2" TabStripPlacement="Bottom" IsSwipeEnabled="False" BackgroundColor="White">
</Grid>

I think that the TabStripPlacement does not mean that it will be placed on the bottom of the outer element.

Upvotes: 1

Related Questions