Codice sorgente L2DBForm.xaml

Articolo
12/18/2024

Questa pagina contiene e descrive il file di origine XAML per il data binding WPF usando l'esempio LINQ to XML.

Struttura complessiva dell'interfaccia utente

Come in genere per un progetto WPF, questo file contiene un elemento padre, un elemento XML Window associato alla classe derivata L2XDBFrom nello spazio dei nomi LinqToXmlDataBinding.

L'area cliente è contenuta all'interno di un elemento StackPanel a cui viene assegnato uno sfondo blu chiaro. Questo pannello contiene quattro sezioni dell'interfaccia utente DockPanel separate da barre di Separator. Lo scopo di queste sezioni è descritto qui.

Ogni sezione contiene un'etichetta che la identifica. Nelle prime due sezioni, questa etichetta viene ruotata di 90 gradi tramite l'uso di un LayoutTransform. Il resto della sezione contiene elementi dell'interfaccia utente appropriati allo scopo di tale sezione, ad esempio blocchi di testo, caselle di testo e pulsanti. In alcuni casi viene usato un elemento figlio StackPanel per allineare questi controlli figlio.

Sezione risorsa finestra

Il tag di apertura <Window.Resources> in riga 9 indica l'inizio della sezione risorsa finestra. Termina con il tag di chiusura alla riga 35.

Il tag <ObjectDataProvider>, che estende le righe da 11 a 25, dichiara un ObjectDataProvider, denominato LoadedBooks, che usa un XElement come origine. Il XElement viene inizializzato analizzando un documento XML incorporato (un elemento CDATA). Si noti che lo spazio vuoto viene mantenuto quando si dichiara il documento XML incorporato e anche quando viene analizzato. Lo spazio vuoto viene mantenuto perché il controllo TextBlock, utilizzato per visualizzare il codice XML non elaborato, non dispone di funzionalità di formattazione XML speciali.

Infine, un DataTemplate denominato BookTemplate viene definito nelle righe da 28 a 34. Questo modello viene usato per visualizzare le voci nella sezione Elenco Libri interfaccia utente. Usa il data binding e le proprietà dinamiche di LINQ to XML per recuperare l'ID libro e il titolo del libro tramite le assegnazioni seguenti.

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

Codice di 'data binding'

Oltre all'elemento DataTemplate, il data binding viene usato in diverse altre posizioni in questo file.

Nel tag <StackPanel> di apertura nella riga 38, la proprietà DataContext di questo pannello viene impostata sul provider di dati LoadedBooks.

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

L'impostazione del contesto dati rende possibile, alla riga 46, consentire al TextBlock denominato tbRawXml di visualizzare il codice XML non elaborato collegandosi alla proprietà Xml del provider di dati.

Text="{Binding Path=Xml}"

Il ListBox nella sezione interfaccia utente Elenco libri, nelle righe da 58 a 62, imposta il modello per gli elementi visualizzati corrispondenti sul BookTemplate definito nella sezione finestra delle risorse:

ItemTemplate ="{StaticResource BookTemplate}"

Quindi, nelle righe da 59 a 62, i valori effettivi dei libri sono associati a questa casella di riepilogo:

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

La terza sezione dell'interfaccia utente, Modifica libro selezionato, associa prima la DataContext del StackPanel padre all'elemento attualmente selezionato dalla sezione dell'interfaccia utente Elenco libri (riga 82):

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

Usa quindi il data binding bidirezionale, in modo che i valori correnti degli elementi del libro vengano visualizzati nelle due caselle di testo in questo pannello e aggiornati da esse. L'associazione dati alle proprietà dinamiche è simile a quella utilizzata nel modello di dati BookTemplate.

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

L'ultima sezione dell'interfaccia utente, Aggiungi Nuovo Libro, non usa l'associazione dati nel codice XAML. Il data binding si trova invece nel codice di gestione degli eventi nel file L2DBForm.xaml.cs.

Esempio

Descrizione

Nota

È consigliabile copiare il codice seguente in un editor di codice, ad esempio l'editor di codice sorgente C# in Visual Studio, in modo che i numeri di riga siano più facili da tenere traccia.

Codice

<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>

Commenti

Per il codice sorgente C# per i gestori eventi associati agli elementi dell'interfaccia utente WPF, vedere L2DBForm.xaml.cs codice sorgente.

Condividi tramite