Can we add content Above tabbed page in xamarin forms?

I want to add some label and image above tabbed page in xamarin forms, so when i slide to another tabbed page the content above tabbed page will remain the same here is the design
can i achieve this because i cant find any reference to do that ?

Tagged:

Answers

  • CharwakaCharwaka INMember ✭✭✭✭✭
    edited January 2018

    @TheodorusGumilang said:
    I want to add some label and image above tabbed page in xamarin forms, so when i slide to another tabbed page the content above tabbed page will remain the same here is the design
    can i achieve this because i cant find any reference to do that ?

    Yes we can, have a grid as your parent layout add two rows

    first row will have stack panel with your Header ,second row can have your Tabbed Page.

  • TheodorusGumilangTheodorusGumilang USMember ✭✭
    edited January 2018

    @Charwaka so you said we can make the tabbed page inside grid layout ?

    <Grid>
    
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0" />
                            <RowDefinition Height="100" />
    
    
    
                        </Grid.RowDefinitions>
             <StackLayout Grid.Row="0">
       //Stack Content
             </StackLayout>
    
    <TabbedPage>
    //Tabbed Page Content
    </TabbedPage>
    
    <Grid> 
    

    Like this ? ok i will try it ouy

  • @Charwaka here is my full code and it doesnt work any suggestion here ?

    <?xml version="1.0" encoding="utf-8" ?>

    <ContentPage.Content>

            <Grid.RowDefinitions>
                <RowDefinition Height="300" />
                <RowDefinition Height="300" />
    
    
    
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
    
                <ColumnDefinition Width="100" />
    
    
            </Grid.ColumnDefinitions>
            <StackLayout Grid.Column="0" Grid.Row="0">
                <Label Text="StackLayout"/>
    
            </StackLayout>
    
            <TabbedPage Grid.Column="0" Grid.Row="1" >
    
                <pages:VCatalogPage/>
                <pages:MyVoucherPage/>
    
            </TabbedPage>
    
        </Grid>
    </ContentPage.Content>
    

  • ChaseFlorellChaseFlorell CAInsider, University mod

    Yeah that won't work. A TabbedPage is a Page, not a View.
    You can try to roll your own tabs with a grid and use a TapGestureRecognizer to swap out content.

    this is all just pseudo code, it could be riddled with mistakes

    <Page>
    
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="100" /> <!-- header -->
                <RowDefinition Height="30" /> <!-- menu -->
                <RowDefinition Height="Auto" /> <!-- body -->
            <Grid.RowDefinitions>
    
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" /> <!-- tab 1 -->
                <ColumnDefinition Width="1*" /> <!-- tab 2 -->
                <ColumnDefinition Width="1*" /> <!-- tab 3 -->
            </Grid.ColumnDefinitions>
    
            <ContentView Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3">
                <foo:MyHeader />
            <ContentView>
    
            <foo:MyPageTab Text="Tab 1" Grid.Column="0" Grid.Row="1" Tapped="OnTabOneTapped" />
            <foo:MyPageTab Text="Tab 2" Grid.Column="0" Grid.Row="1" Tapped="OnTabTwoTapped" />
            <foo:MyPageTab Text="Tab 3" Grid.Column="0" Grid.Row="1" Tapped="OnTabThreeTapped"/>
    
            <xam:CarouselView x:Name="TabViewContent" Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3" ItemsSource="{Binding TabPages}">
                <xam:CarouselView.ItemTemplate>
                    <DataTemplate>
                        <ContentView Content="{Binding TabViewContent}">
                    </DataTemplate>
                </xam:CarouselView.ItemTemplate>
            </xam:CarouselView>
    
        </Grid>
    </Page>
    
    // ViewModel
    public class MyPageModel 
    {
        public class MyPageModel()
        {
            TabViewContent = new ObservableCollection<ContentView>
            {
                new TabItemOneContentView(),
                new TabItemTwoContentView(),
                new TabItemThreeContentView()
            }
        }
    
        public ObservableCollection<ContentView> TabViewContent { get; }
    }
    
    
    // code behind
    public partial class MyPage 
    {
        public MyPage()
        {
            InitializeComponent();
            BindingContext = new MyPageModel();
        }
    
        public void OnTabOneTapped(object sender, EventArgs args)
        {
            InnerTabBody.Position=1;
        }
    
        public void OnTabTwoTapped(object sender, EventArgs args)
        {
            InnerTabBody.Position=2;
        }
    
        public void OnTabThreeTapped(object sender, EventArgs args)
        {
            InnerTabBody.Position=3;
        }
    }
    
  • CharwakaCharwaka INMember ✭✭✭✭✭

    Hi @TheodorusGumilang

    as of now its not **possible ** until you write some really good renders

    but you can check this as an alternative for what you want to achieve

    https://xamarinhelp.com/carousel-view-page-indicators/

  • @ChaseFlorell corect me if im wrong but xam is defined with this right xmlns:xam="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView" ? and i should install the nuget first, but how should i define foo ? is that namespace for the tabbed page or some nuget ?

  • ChaseFlorellChaseFlorell CAInsider, University mod

    @TheodorusGumilang said:
    @ChaseFlorell corect me if im wrong but xam is defined with this right xmlns:xam="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView" ? and i should install the nuget first, but how should i define foo ? is that namespace for the tabbed page or some nuget ?

    I called it foo just because. It indicates that you'd have your own reusable custom views within your own project.

  • Hi, Its works for me Syncfusion.Xamarin.SfTabView

  • ChrisColeTechChrisColeTech USMember ✭✭✭
    edited April 2018

    @Charwaka said:
    Hi @TheodorusGumilang

    as of now its not **possible ** until you write some really good renders

    but you can check this as an alternative for what you want to achieve

    https://xamarinhelp.com/carousel-view-page-indicators/

    Yes, to do this I had to write a custom renderer.. that was 2 years ago.

    Today we use Telerik controls, and they have a 'tabbed' control. you'd just plug it in like any other view on the page.

    Its not for everyone though ($$)

    good luck

  • IRONicMANIRONicMAN Member ✭✭

    @JoseEveraldoAraujo How do you do that? The content in each SfTabView.Items never resizes properly if I have content before my SfTabView.

  • NMackayNMackay GBInsider, University mod

    @IRONicMAN said:
    @JoseEveraldoAraujo How do you do that? The content in each SfTabView.Items never resizes properly if I have content before my SfTabView.

    Sounds like a bug, The Telerik one supports early binding scenarios.

  • IRONicMANIRONicMAN Member ✭✭

    @NMackay said:

    @IRONicMAN said:
    @JoseEveraldoAraujo How do you do that? The content in each SfTabView.Items never resizes properly if I have content before my SfTabView.

    Sounds like a bug, The Telerik one supports early binding scenarios.

    I'll report this to Syncfusion and see what they think about it. Not the first time I have problems with their SfTabView control.

  • sfTabView within StackLayout

Sign In or Register to comment.