wpf 帮助将数据绑定到 TabControl 中的控件

Question

所以我有一个带有两个 TabItem 的 TabControl，每个 TabItem 上都有相同的控件（8 个 TextBlocks），并且将在与另一个 TabItem 上的对应项相同的绑定下显示数据。我的 xaml 和 cs 代码在下面，但是当我尝试执行它时出现此错误。

Items collection must be empty before using ItemsSource.

XAML 用于 TabItem 结构

<TabControl Name="tbcIndividualStats" HorizontalAlignment="Left" Height="652" VerticalAlignment="Top" Width="1338" ItemsSouce="{Binding tabcontrolitems}">
  <!--Template for all tabs (idea is to have them dynamically created eventually)-->
  <!--Content template-->
  <TabControl.ContentTemplate>
    <DataTemplate>
      <Grid>
        <!--Border just holds the stuff-->
        <Border BorderBrush="#FF53535B" BorderThickness="3" HorizontalAlignment="Left" Height="452" VerticalAlignment="Top" Width="520" Margin="10,135,0,0">
          <StackPanel Margin="0,0,-1,0">
            <TextBlock Name="txtVenue" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding Venue}" />
            <TextBlock Name="txtTopSpeed" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TopSpeed}" />
            <TextBlock Name="txtDistRun" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding DistRun}" />
            <TextBlock Name="txtTimeLow" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeLow}" />
            <TextBlock Name="txtTimeMed" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeMed}" />
            <TextBlock Name="txtTimeHigh" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeHigh}" />
            <TextBlock Name="txtTimeSprint" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeSprint}" />
            <TextBlock Name="txtSprintDist" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding SprintDist}" />
          </StackPanel>
        </Border>
      </Grid>
    </DataTemplate>
  </TabControl.ContentTemplate>

  <!--Item Template-->
  <TabControl.ItemTemplate>
    <DataTemplate>
      <Grid>
        <!--Border just holds the stuff-->
        <Border BorderBrush="#FF53535B" BorderThickness="3" HorizontalAlignment="Left" Height="452" VerticalAlignment="Top" Width="520" Margin="10,135,0,0">
          <StackPanel Margin="0,0,-1,0">
            <TextBlock Name="txtVenue" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding Venue}" />
            <TextBlock Name="txtTopSpeed" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TopSpeed}" />
            <TextBlock Name="txtDistRun" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding DistRun}" />
            <TextBlock Name="txtTimeLow" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeLow}" />
            <TextBlock Name="txtTimeMed" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeMed}" />
            <TextBlock Name="txtTimeHigh" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeHigh}" />
            <TextBlock Name="txtTimeSprint" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeSprint}" />
            <TextBlock Name="txtSprintDist" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding SprintDist}" />
          </StackPanel>
        </Border>
      </Grid>
    </DataTemplate>
  </TabControl.ItemTemplate>
  <TabItem Header="PlayerName" Background="Transparent" />
  <TabItem Header="PlayerName2" Background="Transparent" />
</TabControl>

用于绑定数据的 C#

public class TabItemContent
{
    public string Venue { get; set; }
    public string TopSpeed { get; set; }
    public string DistRun { get; set; }
    public string TimeLow { get; set; }
    public string TimeMed { get; set; }
    public string TimeHigh { get; set; }
    public string TimeSprint { get; set; }
    public string DistSprint { get; set; }
}

public void foo()
{
//All one line of code
//FileLoadData is a List of another class where all my data is stored
var tabitemcontents = new List<TabItemContent> { new TabItemContent { Venue = FileLoadData[0].Venue, TopSpeed = FileLoadData[0].TopSpeed.ToString(), DistRun = FileLoadData[0].TotalDistance.ToString(), TimeLow = FileLoadData[0].TimeLow.ToString(),
        TimeMed = FileLoadData[0].TimeMed.ToString(), TimeHigh = FileLoadData[0].TimeHigh.ToString(), TimeSprint = FileLoadData[0].TimeSprint.ToString(), DistSprint = "null"},
        new TabItemContent { Venue = FileLoadData[1].Venue, TopSpeed = FileLoadData[1].TopSpeed.ToString(), DistRun = FileLoadData[1].TotalDistance.ToString(), TimeLow = FileLoadData[1].TimeLow.ToString(),
        TimeMed = FileLoadData[1].TimeMed.ToString(), TimeHigh = FileLoadData[1].TimeHigh.ToString(), TimeSprint = FileLoadData[1].TimeSprint.ToString(), DistSprint = "null"}};

//Error here, supposed to add to the TabItems
tbcIndividualStats.ItemsSource = tabitemcontents;
}

多年来我一直在寻找一种解决方案，但一直找不到。我只需要将来自 FileLoadData[0] 和 FileLoadData[1] 的数据分别绑定到两个 TabItems。

Answer 1

从 XAML 中删除这些 <TabItem> 元素：

<TabItem Header="PlayerName" Background="Transparent" />
<TabItem Header="PlayerName2" Background="Transparent" />

您不能同时将单个项目添加到 TabControl 和使用 ItemsSource。这是一种方式或另一种方式。

Answer 2

我会采取不同的策略：

添加到您的模型，您想要在 Tabitem 的 Header 中显示的名称：

public class TabItemContent
{
    public string PlayerName {get; set;}  // New Property for the Tabitem Header
    public string Venue { get; set; }
    public string TopSpeed { get; set; }
    public string DistRun { get; set; }
    public string TimeLow { get; set; }
    public string TimeMed { get; set; }
    public string TimeHigh { get; set; }
    public string TimeSprint { get; set; }
    public string DistSprint { get; set; }
}

然后我会根据这个新属性更改 Xaml：

<TabControl Name="tbcIndividualStats" HorizontalAlignment="Left" Height="652" VerticalAlignment="Top" Width="1338">
  <!--Template for all tabs (idea is to have them dynamically created eventually)-->
  <!--Content template-->
  <TabControl.ContentTemplate>
    <DataTemplate>
      <Grid>
        <!--Border just holds the stuff-->
        <Border BorderBrush="#FF53535B" BorderThickness="3" HorizontalAlignment="Left" Height="452" VerticalAlignment="Top" Width="520" Margin="10,135,0,0">
          <StackPanel Margin="0,0,-1,0">
            <TextBlock Name="txtVenue" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding Venue}" />
            <TextBlock Name="txtTopSpeed" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TopSpeed}" />
            <TextBlock Name="txtDistRun" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding DistRun}" />
            <TextBlock Name="txtTimeLow" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeLow}" />
            <TextBlock Name="txtTimeMed" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeMed}" />
            <TextBlock Name="txtTimeHigh" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeHigh}" />
            <TextBlock Name="txtTimeSprint" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding TimeSprint}" />
            <TextBlock Name="txtSprintDist" Margin="10,7" FontSize="30" Foreground="White" Text="{Binding SprintDist}" />
          </StackPanel>
        </Border>
      </Grid>
    </DataTemplate>
  </TabControl.ContentTemplate>

  <!--Item Template-->
  <TabControl.ItemTemplate>
    <DataTemplate>
        <Border>
            <Textblock = Text="{Binding PlayerName}"/>
        </Border>
    </DataTemplate>
  </TabControl.ItemTemplate>
</TabControl>

编辑：项目模板是tabitem按钮的模板，内容模板是它的内容。这里有一些参考：TabItem.ItemTemplate vs TabItem.ContentTemplate

我还删除了 TabControl 中定义的两个 TabItem。

还请记住设置 ItemsSource -> 如果您在代码隐藏中设置它，删除这一行：ItemsSouce="{Binding tabcontrolitems}".

wpf 帮助将数据绑定到 TabControl 中的控件

wpf help binding data to controls in TabControl

c#

data-binding

wpf

xaml

tabcontrol

XAML 用于 TabItem 结构

用于绑定数据的 C#