在Tab中将ObservableCollection数据绑定到TextBoxes

时间:2015-10-03 13:14:13

标签: sql wpf vb.net xaml data-binding

我开始编写一个应用程序,我在使用observablecollection的数据绑定时遇到了麻烦,因为我对WPF和Binding不是很熟悉。此外,不同的绑定方法如对象绑定,xaml绑定让我感到困惑。

这个想法是从SQL语句中检索数据并将它们添加到observablecollection中。然后,应使用此数据更新位于主窗口选项卡中的文本框/组合框。

我有一个SQL类,它从sqlserver检索数据并填充observablecollection。以下代码目前正在运行:

    Imports System.Data.Sql
    Imports System.Data.SqlClient
    Imports System.Data
    Imports System.Collections.ObjectModel
    Imports System.Xml
    Imports System.Xml.Linq
    Public Class SQLQueries    
    Public Sub GetPersonData(ByVal HRID_TextBox_OnB As String)
            Dim con As New SqlConnection(My.Settings.AppConnString.ToString) 'connectionstring is retrieved from app settings
            Dim cmd As New SqlCommand(QPersonDataQuery & "and person.personnelnumber = @DBG_HRID", con)        
            cmd.Parameters.AddWithValue("@DBG_HRID", HRID_TextBox_OnB)        
            Dim PersonData As New ObservableCollection(Of String)                PersonData.Clear()
            Try
                con.Open()
                Dim reader As SqlDataReader = cmd.ExecuteReader()
                If (reader.HasRows) Then
                    While (reader.Read())
                        For i = 0 To reader.FieldCount - 1
                            PersonData.Add(i)
                        Next i
                    End While
                End If
            Catch ex As Exception
                MessageBox.Show("Better call Saul!!" & vbCrLf & vbCrLf + ex.Message)
            Finally
                If con.State <> ConnectionState.Closed Then con.Close()
            End Try
            con.Dispose()
         End Sub
End Class

我的XAML目前看起来像这样:

        <Window x:Class="MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"


            Title="FAT Client Primary Access" Height="609" Width="811" Background="White">
            <Grid>
                <Menu IsMainMenu="True" Height="28" VerticalAlignment="Top" Background="White">
                    <MenuItem Header="_File">
                        <MenuItem Header="_Close" Click="CloseApp_Click"/>
                    </MenuItem>
                    <MenuItem Header="_Database">
                        <MenuItem Header="_Check Connection" Click="CheckConnection_Click"/>
                        <MenuItem Header="_Change Connection String" Click="ChangeConnection_Click"/>
                    </MenuItem>

                </Menu>
                <TabControl Height="544" HorizontalAlignment="Left" Margin="0,26,0,0" Name="TabControl1" VerticalAlignment="Top" Width="789" Background="White">
                    <TabItem Header="Onboarding" Name="TabItem1" Background="White">
                        <Grid Background="White" Width="797" Height="524">
                            <Label Content="HRID" Height="27" HorizontalAlignment="Left" Margin="32,24,0,0" Name="Label1" VerticalAlignment="Top" />
                            <TextBox Height="23" HorizontalAlignment="Left" Margin="74,24,0,0" Name="TextBox1" VerticalAlignment="Top" Width="83" />
                            <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="182,23,0,0" Name="Button1" VerticalAlignment="Top" Width="75" />
                            <TextBox Height="26" HorizontalAlignment="Left" Margin="158,104,0,0" Name="TextBox2" VerticalAlignment="Top" Width="124" />
                        </Grid>
                    </TabItem>
                    <TabItem Header="other Trigger" Name="TabItem2" Background="White">
                        <Grid Background="White" />
                    </TabItem>
                </TabControl>
            </Grid>
        </Window>

不幸的是我不知道如何将我的observablecollection中的第一个值绑定到textbox2。我尝试过阅读了很多,但这更令人困惑,然后帮忙。

我是否需要一个单独的类来将observablecollection绑定到文本框?

如果能给我一些小提示,我将不胜感激。

提前致谢。大家也好。

1 个答案:

答案 0 :(得分:0)

var time = Math.floor((world.getTime() % 24000) / 10);
npc.say(time);
if (time == 1195) {
  npc.say("I need some rest");
  //npc.navigateTo(-724,60,782,1.0);
  npc.setHome(-724,60,782);
  npc.setAnimation(2);
}
else if (time == 2385) {
  npc.setAnimation(0);
  //npc.navigateTo(-734,68,769,1.0);
  npc.setHome(-734,68,769);
  npc.say("Time to tend the crops");
  while (time != 1194){
      npc.say(time);
      var randum = Math.floor((Math.random() * 7) + 1);
      if (randum == 1) {
          setTimeout(function() {
              npc.say("1");
              npc.setHome(-734,67,768);
          },5000); 
      }
  }
}

此绑定路径将显示ObservableCollection的第3个元素的Name属性。

<TextBox x:Name="textBox2" Text="{Binding [2].Name}" />

因此,这将显示您的集合的第一个元素的名称。

但Textbox如何知道要使用的集合是什么?为此,您必须在根级别或TextBox级别设置DataContext。此根可以位于TextBox上方的任何位置。在此根目录中设置的DataContext将仅在此根目录的所有子项中可见。

您的数据可能很复杂,例如Country&gt; States&gt; City。例如,您可以在根级别将DataContext设置为Country,然后某些子元素可以使用States,而有些子元素可以使用City等。

所以,像这样设置DataContext:

<TextBox x:Name="textBox2" Text="{Binding [0].Name}" />

然后您可以显示第一个发票项目的TotalPrice,如:

Imports System.Collections.ObjectModel
Class MainWindow
    Public Property InvoiceCollection As New ObservableCollection(Of Invoice) 
    Public Sub New()  
        ' This call is required by the designer.
        InitializeComponent()  
        ' Fill your InvoiceCollection.
        ...
        ...        
        Me.DataContext = InvoiceCollection
    End Sub     
End Class

您甚至可以将TextBox2的DataContext设置为:

<TextBox x:Name="textBox2" Text="{Binding [0].TotalPrice}" />

然后数据绑定看起来像:

TextBox2.DataContext = InvoiceCollection[0]

您甚至可以将TextBox2的DataContext设置为:

<TextBox x:Name="textBox2" Text="{Binding TotalPrice}" />

然后数据绑定看起来像:

TextBox2.DataContext = InvoiceCollection

很少有重要的链接:

  1. DataBinding in 7 part series
  2. Property path syntax