Syncfusion TabControl和TabItems数据绑定

时间:2013-03-02 21:57:42

标签: xaml windows-runtime tabcontrol syncfusion

我正在使用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>

但它只显示标题,但内容未显示。欢迎任何建议!

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

试试这个:
Content="{Binding Position}"移除<navigation:SfTabItem并替换

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

<TextBlock Text="{Binding Position}"/>。并假设“Position”变量是单值varible(不是数组),并且它可以在DataContext上使用。

答案 2 :(得分:0)

页面代码如下:

<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,标准方法也不能正常工作。