Grial-UI-Kit-Support icon indicating copy to clipboard operation
Grial-UI-Kit-Support copied to clipboard

TabControl - Create in code??

Open ianvink opened this issue 6 years ago • 3 comments

Since the TabControl can not have TabItems added dynamically, how can I create a TabControl in code with an unknown number of TabItems then added to the page?

My goal: The page opens, goes to a services, gets data then creates a TabControl with TabItems and then the Page shows it.

ianvink avatar Sep 06 '18 21:09 ianvink

Hi @ianvink

The following example illustrates it.

Consider the following page:

<ContentPage ...>
    <ContentPage.Resources>
        <ResourceDictionary MergedWith="local:TabControliOSResources" />
    </ContentPage.Resources>
	
    <Grid x:Name="Stack">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Button Grid.Row="1" Text="Add Using Code" Clicked="AddTabControlHandler"/>            
    </Grid>
</ContentPage>

The handler responsible of creating the TabControl and adding it:

void AddTabControlHandler(object sender, System.EventArgs e)
{
    var control = new TabControl{
        StyleClass = new []{ "iOSTabControlStyle" },
        TabStripPlacement=TabStripPlacement.Bottom
    };
    control.Tabs.Add(new TabItem { 
        Text = "Tab 1",
        Content = new Label 
        { 
            Text="Tab 1 Content" 
        }
    });
    control.Tabs.Add(new TabItem
    {
        Text = "Tab 2",
        Content = new Label
        {
            Text = "Tab 2 Content"
        }
    });
    control.Tabs.Add(new TabItem
    {
        Text = "Tab 3",
        Content = new Label
        {
            Text = "Tab 3 Content"
        }
    });

    Stack.Children.Add(control);
}

It will display something like this:

image

Hope it helps.

LeoHere avatar Sep 07 '18 12:09 LeoHere

@ianvink in #478 you have a sample of doing this using bindings too.

LeoHere avatar Sep 07 '18 15:09 LeoHere

@LeoHere If I'm adding tabs to the Tab Control as shown above, how do I set a Tab Template and Content Template to these newly added tabs?

khadeeja-alif avatar Sep 15 '18 12:09 khadeeja-alif