Databinding of ObservableCollection to TextBoxes in Tab - sql

Question

I started writing an application and I am facing trouble with the databinding of an observablecollection, because I am not very familiar with WPF an Binding. Further the different method of binding like object binding, xaml binding are confusing me.
The idea is to retrieve data from a SQL statement and add them to a observablecollection. Afterwards textboxes/comboboxes which are located in a tab in the mainwindows should be updated with this data.
I have a SQL Class which is retrieving the data from a sqlserver and populating the observablecollection. The following code is working at the moment:
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
My XAML is looking like this at the moment:
<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>
Unfortunately I have no idea how to bind the first value in my observablecollection to textbox2. I tried and read a lot but this was more confusing then helping out.
Do I need a separate Class to bind the observablecollection to the textboxes?
I would appreciate it if could give a me small hint.
Thanks in advance. And also Hello everybody.

Answer 1

<TextBox x:Name="textBox2" Text="{Binding [2].Name}" />
This binding path will show Name property of 3rd element of your ObservableCollection.
<TextBox x:Name="textBox2" Text="{Binding [0].Name}" />
So, this will show Name of first element of your collection.
But how Textbox will know what is the collection to use ? For that you have to set DataContext either at root level, or at your TextBox level. This root can be anywhere above your TextBox. DataContext set at this root will be visible within all children of this root only.
Your data can be complex like Country>States>City.For example, you can set DataContext to Country at root level, and some child elements can then use States, while some can use City etc.
So, set DataContext like this :
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
Then you can show TotalPrice of first Invoice item like :
<TextBox x:Name="textBox2" Text="{Binding [0].TotalPrice}" />
You can even set DataContext of TextBox2 like :
TextBox2.DataContext = InvoiceCollection[0]
then databinding will look like :
<TextBox x:Name="textBox2" Text="{Binding TotalPrice}" />
You can even set DataContext of TextBox2 like :
TextBox2.DataContext = InvoiceCollection
then databinding will look like :
<TextBox x:Name="textBox2" Text="{Binding [0].TotalPrice}" />
Few important links :
DataBinding in 7 part series
Property path syntax