Simple Example of TabView

[SimplyLiz]

Is your feature request related to a problem? Please describe. It isn't exactly a feature request, but i stumbled upon your awesome library and i'm trying to implement it.

Describe the solution you'd like A simple example how to create a tabbedpage from scratch in a new project. And where i can find the necessary static resources like StaticResource BottomTabStyle

Describe alternatives you've considered I'm trying to piece together how to use your library reading stackoverflow posts and the wiki but so far i had no success :(

Additional context Add any other context or screenshots about the feature request here.

In the wiki article https://github.com/roubachof/Sharpnado.Presentation.Forms/wiki/Pure-Xamarin.Forms-tabs

there is outdated code, you get an error message that tabs can't be created this way. In this blog article https://www.sharpnado.com/scrollable-tabs-and-circle-button-in-tabs/

It's noted that there had been a breaking change: The TabItem needs now to be inside the Tabs property of the TabHostView:

On this example here: https://github.com/roubachof/Sharpnado.Presentation.Forms/wiki/Pure-Xamarin.Forms-tabs#styling

You're using a lot of static resources that are unknown to me too :(

Also all the examples are using static resources that i can't find anywhere :( How do i add them to my project?

The Sample app is great, but it's so sophisticated, (using translatable resources and so much more) that it's really difficult for a newb to find out how to create a simple page with tabs.

Thanks for your hard work and for providing such a fantastic library!

[SimplyLiz]

What i found out:

The fewmodel needs to derive from "Bindable" and the function SelectedViewModelIndex gets invoked when clicking on the tabs.

So far i got this:

Resources:

            <Style x:Key="TabStyle"
                   TargetType="tabs:UnderlinedTabItem">
                <Setter Property="SelectedTabColor"
                        Value="White" />
                <Setter Property="LabelSize"
                        Value="14" />
                <Setter Property="BackgroundColor"
                        Value="Gray" />
                <Setter Property="UnselectedLabelColor"
                        Value="White" />
            </Style>

xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage 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:tabs="clr-namespace:Sharpnado.Presentation.Forms.CustomViews.Tabs;assembly=Sharpnado.Presentation.Forms"
             mc:Ignorable="d"
             x:Class="Kochbuch.Views.test">
    <ContentPage.Content>

        <Grid Padding="10"
              ColumnSpacing="0"
              RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="200" />
                <RowDefinition Height="40" />
                <RowDefinition Height="30" />
                <RowDefinition Height="30" />
                <RowDefinition Height="50" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <!-- first 4 rows then... -->

            <tabs:TabHostView x:Name="TabHost"
                              Grid.Row="2"
                              BackgroundColor="White"
                              SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}"
                              ShadowType="Top"
                              TabType="Fixed">
                <tabs:TabHostView.Tabs>

                    <tabs:UnderlinedTabItem Style="{StaticResource TabStyle}"
                                            Label="hallo" />
                    <tabs:UnderlinedTabItem Style="{StaticResource TabStyle}"
                                            Label="servus" />

                </tabs:TabHostView.Tabs>
            </tabs:TabHostView>

            <ScrollView Grid.Row="5">
                <tabs:ViewSwitcher x:Name="Switcher"
                                   Animate="True"
                                   SelectedIndex="{Binding SelectedViewModelIndex, Mode=TwoWay}">

                    <!--Do something to show tabs here-->
                </tabs:ViewSwitcher>
            </ScrollView>
        </Grid>
    </ContentPage.Content>
</ContentPage>

viewmodel:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Text;

using Sharpnado.Presentation.Forms;
using Sharpnado.Presentation.Forms.Commands;
using Sharpnado.Presentation.Forms.ViewModels;

namespace Kochbuch.ViewModels
{
    public class TabViewModel : Bindable
    {
        private int _selectedViewModelIndex = 0;
        public event PropertyChangedEventHandler PropertyChanged;

        public int SelectedViewModelIndex
        {
            get => _selectedViewModelIndex;
            set => SetAndRaise(ref _selectedViewModelIndex, value);
        }

        protected virtual void RaisePropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

What i really can't figure out... how do i display a View (Contentpage) in the tab? I'll keep digging...

[SimplyLiz]

Ok, it seems to work when i bind the namespace the view is in

             xmlns:views="clr-namespace:Kochbuch.Views;assembly=Kochbuch"

and the view must be a ContentView

It seems that only views with a parameterless default constructor can be used? is there a workaround? i would need to pass an object to the view

[roubachof]

Hi man,

All the questions you are asking (apart from the bad doc I just fixed, ty for this :) is about basic Xamarin.Forms features and architecture. I can only advise you to learn about those basics just like you are beginning to do... It's a frustrating but rewarding road. Unfortunately I cannot be your tutor on that road :) Have a nice trip !