Syncfusion TabControl 및 TabItems 데이터 바인딩

Question

WinFlow에 Syncfusion TabControl을 사용하고 있습니다. 잘 작동하지만 일부 데이터를 바인딩하려고하면 올바르게 이해할 수 없습니다. 내 코드는 다음과 같습니다.

<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> 

그러나 헤더 만 표시되지만 내용은 표시되지 않습니다. 어떤 조언도 환영합니다!

Answer 1

TabItem의 헤더에 "FullName"을, TabItem의 내용에 "Position"을 표시하고 싶다고 생각합니다. Header와 Content를 모두 꾸미려면 HeaderTemplate과 ContentTemplate을 각각 사용해야합니다.

DataTemplates를 사용할 것이므로 "DisplayMemberPath"가 더 이상 필요하지 않습니다. 아래의 코드를 따라하면 작동합니다.

<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

이 시도 :
이 <navigation:SfTabItem에서 Content="{Binding Position}"를 제거하고 <TextBlock Text="{Binding Position}"/>와

<navigation:SfTabItem.ContentTemplate> 
     <DataTemplate> 
      <TextBlock Text="{Binding}"/> 
     </DataTemplate> 
    </navigation:SfTabItem.ContentTemplate> 

를 교체합니다. 그리고 "Position"변수는 단일 값의 가변 변수 (배열이 아닌)이며 DataContext에서 사용할 수 있다고 가정합니다.

Answer 3

페이지의 코드는 다음입니다 :

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; 

이 방법은 Syncfusion 추천 :

<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>  

합니다 (TabContent 및 TabItem의 관련) 클래스 코드는 이것이다 ,하지만 그들은 TabItem을 전혀 문서화하지 않았고 표준 방식이 제대로 작동하지 않습니다.