Compartir a través de

Código fuente L2DBForm.xaml

Esta página contiene y describe el archivo de origen XAML para el enlace de datos de WPF mediante el ejemplo LINQ to XML.

Estructura general de la interfaz de usuario

Como es habitual para un proyecto de WPF, este archivo contiene un elemento primario, un Window elemento XML asociado a la clase L2XDBFrom derivada en el LinqToXmlDataBinding espacio de nombres.

El área de cliente se encuentra dentro de un StackPanel al que se le ha dado un fondo azul claro. Este panel contiene cuatro DockPanel secciones de interfaz de usuario separadas por Separator barras. Aquí se describe el propósito de estas secciones.

Cada sección contiene una etiqueta que la identifica. En las dos primeras secciones, esta etiqueta gira 90 grados mediante el uso de un LayoutTransform. El resto de la sección contiene elementos de interfaz de usuario adecuados para el propósito de esa sección, por ejemplo, bloques de texto, cuadros de texto y botones. A veces se usa un elemento secundario StackPanel para alinear estos controles secundarios.

Sección de recursos de ventana

La etiqueta de apertura <Window.Resources> de la línea 9 indica el inicio de la sección de recursos de ventana. Termina con la etiqueta final en la línea 35.

La <ObjectDataProvider> etiqueta, que abarca las líneas de 11 a 25, declara un ObjectDataProvider, llamado LoadedBooks, que usa un XElement como origen. Se XElement inicializa mediante el análisis de un documento XML incrustado (un elemento CDATA). Observe que se conserva el espacio en blanco al declarar el documento XML incrustado y también cuando se analiza. El espacio en blanco se conserva porque el TextBlock control, que se usa para mostrar el XML sin formato, no tiene capacidades de formato XML especiales.

Por último, se define un DataTemplate nombre BookTemplate en las líneas 28 a 34. Esta plantilla se usa para mostrar las entradas en la sección Book List UI (Iu de lista de libros). Usa el enlace de datos y las propiedades dinámicas LINQ to XML para recuperar el identificador de libro y el nombre del libro a través de las siguientes asignaciones:

Text="{Binding Path=Attribute[id].Value}"Text="{Binding Path=Value}"

Código de enlace de datos

Además del DataTemplate elemento , el enlace de datos se usa en varios otros lugares de este archivo.

En la etiqueta <StackPanel> de apertura en la línea 38, la propiedad DataContext de este panel se define como el proveedor de datos LoadedBooks.

DataContext="{Binding Source={StaticResource LoadedBooks}}

Establecer el contexto de datos permite (en la línea 46) que el TextBlock llamado tbRawXml muestre el XML sin formato al enlazar con la propiedad Xml de este proveedor de datos:

Text="{Binding Path=Xml}"

En la sección de Interfaz de usuario ListBox, en las líneas 58 a 62, se establece la plantilla de sus elementos de visualización para la definida en la sección de recursos de ventana:

ItemTemplate ="{StaticResource BookTemplate}"

A continuación, en las líneas 59 a 62, los valores reales de los libros se enlazan a dicho cuadro de lista.

<ListBox.ItemsSource>
    <Binding Path="Elements[{http://www.mybooks.com}book]"/>
</ListBox.ItemsSource>

La tercera sección de la interfaz de usuario, Editar libro seleccionado, enlaza primero el DataContext elemento primario StackPanel al elemento seleccionado actualmente en la sección Book List UI (línea 82):

DataContext="{Binding ElementName=lbBooks, Path=SelectedItem}"

A continuación, usa el enlace de datos bidireccional, de modo que los valores actuales de los elementos de libro se muestran y se actualizan desde los dos cuadros de texto de este panel. El enlace de datos a propiedades dinámicas es similar al enlace de datos usado en la BookTemplate plantilla de datos:

Text="{Binding Path=Attribute[id].Value}"...Text="{Binding Path=Value}"

La última sección de la interfaz de usuario, Agregar nuevo libro, no usa el enlace de datos en su código XAML. En su lugar, el enlace de datos está en su código de control de eventos en el archivo L2DBForm.xaml.cs.

Ejemplo

Descripción

Nota:

Se recomienda copiar el código siguiente en un editor de código, como el editor de código fuente de C# en Visual Studio, para que los números de línea sean más fáciles de realizar el seguimiento.

Código

<Window x:Class="LinqToXmlDataBinding.L2XDBForm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:xlinq="clr-namespace:System.Xml.Linq;assembly=System.Xml.Linq"
    xmlns:local="clr-namespace:LinqToXmlDataBinding"
    Title="WPF Data Binding using LINQ-to-XML" Height="665" Width="500" ResizeMode="NoResize">

    <Window.Resources>
        <!-- Books provider and inline data -->
        <ObjectDataProvider x:Key="LoadedBooks" ObjectType="{x:Type xlinq:XElement}" MethodName="Parse">
            <ObjectDataProvider.MethodParameters>
                <system:String xml:space="preserve">
<![CDATA[
<books xmlns="http://www.mybooks.com">
  <book id="0">book zero</book>
  <book id="1">book one</book>
  <book id="2">book two</book>
  <book id="3">book three</book>
</books>
]]>
                </system:String>
                <xlinq:LoadOptions>PreserveWhitespace</xlinq:LoadOptions>
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>

        <!-- Template for use in Books List listbox. -->
        <DataTemplate x:Key="BookTemplate">
            <StackPanel Orientation="Horizontal">
                <TextBlock Margin="3" Text="{Binding Path=Attribute[id].Value}"/>
                <TextBlock Margin="3" Text="-"/>
                <TextBlock Margin="3" Text="{Binding Path=Value}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

    <!-- Main visual content container -->
    <StackPanel Background="lightblue" DataContext="{Binding Source={StaticResource LoadedBooks}}">
        <!-- Raw XML display section -->
        <DockPanel Margin="5">
            <Label  Background="Gray" FontSize="12" BorderBrush="Black" BorderThickness="1" FontWeight="Bold">XML
            <Label.LayoutTransform>
                <RotateTransform Angle="90"/>
            </Label.LayoutTransform>
            </Label>
            <TextBlock Name="tbRawXml" Height="200" Background="LightGray" Text="{Binding Path=Xml}" TextTrimming="CharacterEllipsis" />
        </DockPanel>

        <Separator Height="4" Margin="5" />

        <!-- List box to display all books section -->
        <DockPanel Margin="5">
            <Label  Background="Gray" FontSize="12" BorderBrush="Black" BorderThickness="1" FontWeight="Bold">Book List
                <Label.LayoutTransform>
                    <RotateTransform Angle="90"/>
                </Label.LayoutTransform>
            </Label>
            <ListBox Name="lbBooks" Height="200" Width="415" ItemTemplate ="{StaticResource BookTemplate}">
                <ListBox.ItemsSource>
                    <Binding Path="Elements[{http://www.mybooks.com}book]"/>
                </ListBox.ItemsSource>
            </ListBox>
            <Button Margin="5" DockPanel.Dock="Right" Height="30" Width ="130" Content="Remove Selected Book" Click="OnRemoveBook">
            <Button.LayoutTransform>
                <RotateTransform Angle="90"/>
            </Button.LayoutTransform>
            </Button>
        </DockPanel>

        <Separator Height="4" Margin="5" />

        <!-- Edit current selection section -->
        <DockPanel Margin="5">
            <TextBlock Margin="5" Height="30" Width="65" DockPanel.Dock="Right" Background="LightGray" TextWrapping="Wrap" TextAlignment="Center">
                    Changes are live!
                <TextBlock.LayoutTransform>
                    <RotateTransform Angle="90"/>
                </TextBlock.LayoutTransform>
            </TextBlock>
            <StackPanel>
                <Label Width="450" Background="Gray" FontSize="12" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" FontWeight="Bold">Edit Selected Book</Label>
                <StackPanel Margin="1" DataContext="{Binding ElementName=lbBooks, Path=SelectedItem}">
                    <StackPanel Orientation="Horizontal">
                        <Label Width="40">ID:</Label>
                        <TextBox Name="editAttributeTextBox" Width="410" Text="{Binding Path=Attribute[id].Value}">
                            <TextBox.ToolTip>
                                <TextBlock FontWeight="Bold" TextAlignment="Center">
                                    <Label>Edit the selected book ID and see it changed.</Label>
                                </TextBlock>
                            </TextBox.ToolTip>
                        </TextBox>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Label Width="40">Value:</Label>
                        <TextBox Name="editValueTextBox" Width="410" Text="{Binding Path=Value}" Height="25">
                            <TextBox.ToolTip>
                                <TextBlock FontWeight="Bold" TextAlignment="Center">
                                    <Label>Edit the selected book Value and see it changed.</Label>
                                </TextBlock>
                            </TextBox.ToolTip>
                        </TextBox>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </DockPanel>

        <Separator Height="4" Margin="5" />

        <!-- Add new book section -->
        <DockPanel Margin="5">
            <Button Margin="5" Height="30" DockPanel.Dock="Right" Click ="OnAddBook">Add Book
                <Button.LayoutTransform>
                    <RotateTransform Angle="90"/>
                </Button.LayoutTransform>
            </Button>
            <StackPanel>
                <Label Width="450" Background="Gray" FontSize="12" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" FontWeight="Bold">Add New Book</Label>
                <StackPanel Margin="1">
                    <StackPanel Orientation="Horizontal">
                        <Label Width="40">ID:</Label>
                        <TextBox Name="tbAddID" Width="410">
                            <TextBox.ToolTip>
                                <TextBlock FontWeight="Bold" TextAlignment="Center">
                                    <Label>Enter a book ID and Value pair, then click Add Book.</Label>
                                </TextBlock>
                            </TextBox.ToolTip>
                        </TextBox>
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Label Width="40">Value:</Label>
                        <TextBox Name="tbAddValue" Width="410" Height="25">
                            <TextBox.ToolTip>
                                <TextBlock FontWeight="UltraBold" TextAlignment="Center">
                                    <Label>Enter a book ID and Value pair, then click Add Book.</Label>
                                </TextBlock>
                            </TextBox.ToolTip>
                        </TextBox>
                    </StackPanel>
                </StackPanel>
            </StackPanel>
        </DockPanel>
    </StackPanel>
</Window>

Comentarios

Para obtener el código fuente de C# para los controladores de eventos asociados a los elementos de la interfaz de usuario de WPF, vea L2DBForm.xaml.cs código fuente.

Consulte también