--- title: L2DBForm.xaml source code ms.date: 10/22/2019 ms.topic: sample --- # L2DBForm.xaml source code This page contains and describes the XAML source file for the [WPF data binding using LINQ to XML example](linq-to-xml-data-binding-sample.md). ## Overall UI structure As is typical for a WPF project, this file contains one parent element, a XML element that's associated with the derived class `L2XDBFrom` in the `LinqToXmlDataBinding` namespace. The client area is contained within a that's given a light blue background. This panel contains four UI sections separated by bars. The purpose of these sections is described [here](linq-to-xml-data-binding-sample.md#overview). Each section contains a label that identifies it. In the first two sections, this label is rotated 90 degrees through the use of a . The rest of the section contains UI elements appropriate to the purpose of that section, for example, text blocks, text boxes, and buttons. Sometimes a child is used to align these child controls. ## Window resource section The opening `` tag on line 9 indicates the start of the window resource section. It ends with the closing tag on line 35. The `` tag, which spans lines 11 through 25, declares a , named `LoadedBooks`, that uses an as the source. The is initialized by parsing an embedded XML document (a `CDATA` element). Notice that white space is preserved when declaring the embedded XML document and also when it's parsed. White space is preserved because the control, which is used to display the raw XML, has no special XML formatting capabilities. Lastly, a named `BookTemplate` is defined on lines 28 through 34. This template is used to display the entries in the **Book List** UI section. It uses data binding and LINQ to XML dynamic properties to retrieve the book ID and book name through the following assignments: ```xaml Text="{Binding Path=Attribute[id].Value}"Text="{Binding Path=Value}" ``` ## Data binding code In addition to the element, data binding is used in a number of other places in this file. In the opening `` tag on line 38, the property of this panel is set to the `LoadedBooks` data provider. ```xaml DataContext="{Binding Source={StaticResource LoadedBooks}} ``` Setting the data context makes it possible (on line 46) for the named `tbRawXml` to display the raw XML by binding to this data provider's `Xml` property: ```xaml Text="{Binding Path=Xml}" ``` The in the **Book List** UI section, on lines 58 through 62, sets the template for its display items to the `BookTemplate` defined in the window resource section: ```xaml ItemTemplate ="{StaticResource BookTemplate}" ``` Then, on lines 59 through 62, the actual values of the books are bound to this list box: ```xaml ``` The third UI section, **Edit Selected Book**, first binds the of the parent to the currently selected item in from the **Book List** UI section (line 82): ```xaml DataContext="{Binding ElementName=lbBooks, Path=SelectedItem}" ``` It then uses two-way data binding, so that the current values of the book elements are displayed to, and updated from, the two text boxes in this panel. Data binding to dynamic properties is similar to the data binding used in the `BookTemplate` data template: ```xaml Text="{Binding Path=Attribute[id].Value}"...Text="{Binding Path=Value}" ``` The last UI section, **Add New Book**, doesn't use data binding in its XAML code. Instead, data binding is in its event handling code in the file *L2DBForm.xaml.cs*. ## Example ### Description > [!NOTE] > We recommend that you copy the following code below into a code editor, such as the C# source code editor in Visual Studio, so that line numbers will be easier to track. ### Code ```xml book zero book one book two book three ]]> PreserveWhitespace Changes are live! ``` ### Comments For the C# source code for the event handlers associated with the WPF UI elements, see [L2DBForm.xaml.cs source code](l2dbform-xaml-cs-source-code.md). ## See also - [Walkthrough: LinqToXmlDataBinding example](linq-to-xml-data-binding-sample.md) - [L2DBForm.xaml.cs source code](l2dbform-xaml-cs-source-code.md)