Syncfusion TabControl 和 TabItems 数据绑定答案

【问题标题】：Syncfusion TabControl and TabItems databindingSyncfusion TabControl 和 TabItems 数据绑定
【发布时间】：2013-03-02 21:57:42
【问题描述】：

我将 Syncfusion TabControl 用于 WinRT。工作正常，但是当我尝试将它绑定到一些无法理解的数据时，如何正确执行。我的代码是这样的：

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

但它只显示标题，但不显示内容。欢迎任何建议！

【问题讨论】：

标签： xaml windows-runtime tabcontrol syncfusion

【解决方案1】：

我怀疑你喜欢在 TabItem 的标题中显示“FullName”，在 TabItem 的内容中显示“Position”。要同时装饰 Header 和 Content，我们必须分别使用 HeaderTemplate 和 ContentTemplate。

由于我们要使用 DataTemplates，我们不再需要“DisplayMemberPath”。按照下面的代码 sn-p 它应该可以工作。

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

【讨论】：

非常感谢！这就是我需要的！

【解决方案2】：

试试这个：
从<navigation:SfTabItem 中删除Content="{Binding Position}" 并替换

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

<TextBlock Text="{Binding Position}"/>。并假设“Position”变量是单值变量（不是数组），并且在您的 DataContext 中可用。

【讨论】：

这必须工作，但我找不到如何设置 DataContext。当我在设计时为 Page 或 TabItem 设置它时，它不起作用（可能是因为我从 Windows Azure 移动服务异步获取数据）。所以，我直接使用 set ParticipantsList.ItemsSource = Participants;但是它接缝了这种情况下简单的绑定不适用于嵌套的 TabItems。我只能看到 pagename.ViewModelClassname 单词而不是真实数据。
你说什么“嵌套的 TabItems”？您可以发布您页面的完整代码吗？

【解决方案3】：

页面代码如下：

<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有关）是这样的：

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 推荐这种方式，但他们根本没有记录 TabItem，标准方式效果不佳。

【讨论】：