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

时间:2018-07-17 09:58:20

标签: c# wpf xaml data-binding tabcontrol

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

  

在使用ItemsSource之前,Items集合必须为空。

用于TabItem结构的XAML

const data = ['Hey', 'there'];

const output = data.reduce((p, c, i, a) => p.concat(i < a.length -1 ? [c, '-'] : [c]), []);

console.log(output)

用于绑定数据的C#

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

我一直在寻找一种解决方案,但是我找不到解决方案。我只需要分别将这些数据从FileLoadData [0]和FileLoadData [1]绑定到两个TabItem。

2 个答案:

答案 0 :(得分:1)

我会采用其他策略:

将要显示在Tabitem的标题中的名称添加到模型中:

<appender name="audit" class="ch.qos.logback.classic.net.SyslogAppender">
    <syslogHost>10.0.139.91</syslogHost>
    <port>514</port>
    <facility>AUDIT</facility>
    <suffixPattern>%msg</suffixPattern>
</appender>

然后我将考虑以下新属性来更改Xaml:

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

编辑:项目模板是tabitem按钮的模板,内容模板是其内容的模板。这里有些参考:TabItem.ItemTemplate vs TabItem.ContentTemplate

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

如果您在后台代码中进行了设置,请记住还要设置ItemsSource->,删除这一行:<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>

答案 1 :(得分:0)

从XAML中删除以下<TabItem>元素:

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

您不能同时将单个项目添加到TabControl ,也不能使用ItemsSource。这是一种方法。