将 ObservableCollection 数据绑定到 Tab 中的文本框

Question

我开始编写一个应用程序，但我在 observablecollection 的数据绑定方面遇到了麻烦，因为我对 WPF 和绑定不是很熟悉。此外，对象绑定、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 绑定到文本框吗？

如果能给我一点提示，我将不胜感激。

提前致谢。还有大家好。

Answer 1

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

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

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

因此，这将显示您收藏的第一个元素的名称。

但是 Textbox 如何知道要使用的集合是什么？为此，您必须在根级别或 TextBox 级别设置 DataContext。这个根可以在您的文本框上方的任何位置。设置在这个根的 DataContext 将只在这个根的所有子节点中可见。

你的数据可能很复杂，比如 Country>States>City。例如，你可以在根级别将 DataContext 设置为 Country，然后一些子元素可以使用 States，而一些子元素可以使用 City 等。

所以，像这样设置 DataContext：

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

然后您可以显示第一个 Invoice 项目的 TotalPrice，例如：

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

你甚至可以像这样设置 TextBox2 的 DataContext ：

TextBox2.DataContext = InvoiceCollection[0]

然后数据绑定将如下所示：

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

你甚至可以像这样设置 TextBox2 的 DataContext ：

TextBox2.DataContext = InvoiceCollection

然后数据绑定将如下所示：

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

几个重要的链接：

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