Syncfusion TabControl and TabItems databinding - xaml

Question

I am using Syncfusion TabControl for WinRT. Works fine, but when I try to bind it to some data can't understand, how to do it properly. My code is like this:
<navigation:SfTabControl
DisplayMemberPath="FullName">
<navigation:SfTabItem Name="tabItemPosition" Content="{Binding Position}">
<navigation:SfTabItem.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</navigation:SfTabItem.ContentTemplate>
</navigation:SfTabItem>
</navigation:SfTabControl>
But it shows me only headers, but content doesn't appear. Any advises are welcome!

Answer 1

I suspect that you like to display the "FullName" at the header of TabItem and "Position" in the content of TabItem. To decorate both Header and Content, we have to use HeaderTemplate and ContentTemplate respectively.
Since we going to use DataTemplates, we do not need "DisplayMemberPath" anymore. Follow the below code snippet and it should work.
<navigation:SfTabControl TabStripPlacement="Left" Margin="0 60"
Grid.ColumnSpan="2" HorizontalAlignment="Stretch"
x:Name="ParticipantsList" >
<!--For Header-->
<navigation:SfTabControl.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding FullName}" Style="{StaticResource HeaderTextStyle}"
VerticalAlignment="Top"/>
</DataTemplate>
</navigation:SfTabControl.HeaderTemplate>
<!--For Content-->
<navigation:SfTabControl.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding Position}" Style="{StaticResource HeaderTextStyle}"
VerticalAlignment="Top"/>
</DataTemplate>
</navigation:SfTabControl.ContentTemplate>
</navigation:SfTabControl>

Answer 2

Try this:
Remove Content="{Binding Position}" from <navigation:SfTabItem and replace
<navigation:SfTabItem.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</navigation:SfTabItem.ContentTemplate>
with <TextBlock Text="{Binding Position}"/>. And assumed that "Position" variable is single valued varible (not an array) and it's available on your DataContext.

Answer 3

The code of the page is following:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:voteme"
DataContext="{Binding Participants, RelativeSource={RelativeSource Self}}"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:navigation="using:Syncfusion.UI.Xaml.Controls.Navigation"
xmlns:input="using:Syncfusion.UI.Xaml.Controls.Input"
x:Class="voteme.RateAll"
mc:Ignorable="d">
<Grid Style="{StaticResource LayoutRootStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid Background="#FF939D46">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Style="{StaticResource BackButtonLightStyle}" Margin="36"
VerticalAlignment="Top" Click="backButton_Click"/>
<StackPanel>
<TextBlock x:Name="pageTitle" Foreground="White" Grid.Column="1" Text="{StaticResource AppName}"
Style="{StaticResource PageHeaderTextStyle}" Margin="120 38" VerticalAlignment="Top"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Background="#FFEDEDEB" />
<navigation:SfTabControl TabStripPlacement="Left" Margin="0 60"
Grid.ColumnSpan="2" HorizontalAlignment="Stretch"
x:Name="ParticipantsList"
DisplayMemberPath="FullName">
<navigation:SfTabItem>
<TextBlock Text="{Binding Position}" Style="{StaticResource HeaderTextStyle}" VerticalAlignment="Top"/>
</navigation:SfTabItem>
</navigation:SfTabControl>
</Grid>
</Grid>
The class code (related to the TabContent and TabItem) is this:
public List<ParticipantRatesView> Participants = new List<ParticipantRatesView>();
foreach (var participant in _persons)
{
Participants.Add(
new ParticipantRatesView()
{
FullName = participant.FullName,
Position = participant.Position,
Email = participant.Email,
PersonId = participant.Id,
AverageRate = participant.TotalRate,
OfficeRate = ((Rates) _ratesAll.CurrentItem).OfficeRate,
WindowsRate = ((Rates) _ratesAll.CurrentItem).WindowsRate,
EmoRate = ((Rates) _ratesAll.CurrentItem).EmotionalRate,
CustRate = ((Rates) _ratesAll.CurrentItem).CustomerRate,
RateId = ((Rates) _ratesAll.CurrentItem).Id
});
}
ParticipantsList.ItemsSource = Participants;
This way is recommended by Syncfusion, but they didn't documented TabItem at all, and standard way is not working well.