How to add content to TabViewItem dynamically

Apptacular Apps 386 Reputation points
2020-06-23T12:57:05.043+00:00

I'm trying to add content to a TabViewItem dynamically but don't know which option to use to do this when calling the TabViewItem itself. The code I tried isn't working for me for some reason.

        public MainPage()
        {
            this.InitializeComponent();

            TabView tabView = MyTabs;

            var tabFlower = new TabViewItem { "Flower" };
            tabView.Items.Add(tabFlower );


            // Tab content
            var txtDetails= new TextBlock();
            txtDetails.Text = "Lorem Ipsum";
            tabFlower.Add(txtDetails);
        }
Universal Windows Platform (UWP)
0 comments No comments
{count} votes

2 answers

Sort by: Most helpful
  1. Daniele 1,996 Reputation points
    2020-06-23T16:00:04.59+00:00
    • If you are using Microsoft.Toolkit.Uwp.UI.Controls.TabView use the following snippet TabView tabView = MyTabs; var tabFlower = new TabViewItem {Header = "Flower"};
      tabView.Items.Add(tabFlower); // Tab content
      var txtDetails = new TextBlock();
      txtDetails.Text = "Lorem Ipsum";
      tabFlower.Content = txtDetails;
    • If you are using Microsoft.UI.Xaml.Controls.TabView use the following snippet TabView tabView = MyTabs; var tabFlower = new TabViewItem {Header = "Flower"};
      tabView.TabItems.Add(tabFlower); // Tab content
      var txtDetails = new TextBlock();
      txtDetails.Text = "Lorem Ipsum";
      tabFlower.Content = txtDetails;

  2. Peter Fleischer (former MVP) 19,321 Reputation points
    2020-06-23T19:36:41.293+00:00

    Hi, try following demo with Microsoft.Toolkit.Uwp.UI.Controls.TabView:

    <Page  
        x:Class="App1.Page05"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        xmlns:local="using:App05"  
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
        xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"  
        mc:Ignorable="d"  
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">  
      <Page.DataContext>  
        <local:ViewModel/>  
      </Page.DataContext>  
      <Grid>  
        <controls:TabView ItemsSource="{Binding View}"/>  
      </Grid>  
    </Page>  
    

    ----------------------------------------------------------

    using Microsoft.Toolkit.Uwp.UI.Controls;  
    using System;  
    using System.Collections.ObjectModel;  
    using System.Windows.Input;  
    using Windows.UI.Xaml.Controls;  
      
    namespace App05  
    {  
      public class ViewModel  
      {  
        public ViewModel() => InsertNewTabItem();  
      
        public ObservableCollection<TabViewItem> View { get; } = new ObservableCollection<TabViewItem>();  
      
        private int index = 1;  
        private void InsertNewTabItem()  
        {  
          var ti = new TabViewItem() { Header = $"Tab {index++}" };  
          View.Add(ti);  
          // Tab content Panel  
          StackPanel stp = new StackPanel() { Height = 100 };  
          ti.Content = stp;  
          // panel text content  
          var txtDetails = new TextBlock();  
          txtDetails.Text = $"This is text in Tabitem '{ti.Header}'";  
          stp.Children.Add(txtDetails);  
          // panel button content  
          var btn = new Button() { Content = "Add new Tab" };  
          btn.Command = new RelayCommand((state) => InsertNewTabItem());  
          stp.Children.Add(btn);  
        }  
      }  
      
      public class RelayCommand : ICommand  
      {  
        private readonly Predicate<object> _canExecute;  
        private readonly Action<object> _execute;  
        public event EventHandler CanExecuteChanged;  
        public RelayCommand(Action<object> execute) : this(execute, null) { }  
        public RelayCommand(Action<object> execute, Predicate<object> canExecute) { _execute = execute; _canExecute = canExecute; }  
        public bool CanExecute(object parameter) => (_canExecute == null) ? true : _canExecute(parameter);  
        public void Execute(object parameter) => _execute(parameter);  
        public void RaiseCanExecuteChanged() => CanExecuteChanged?.Invoke(this, EventArgs.Empty);  
      }  
    }  
    

    10583-23-06-2020-21-38-36.gif

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.