Bagikan melalui


Kode sumber L2DBForm.xaml

Halaman ini berisi dan menjelaskan file sumber XAML untuk pengikatan data WPF menggunakan contoh LINQ ke XML.

Struktur antarmuka pengguna keseluruhan

Seperti biasa untuk proyek WPF, file ini berisi satu elemen induk, Window elemen XML yang terkait dengan kelas L2XDBFrom turunan di LinqToXmlDataBinding namespace layanan.

Area klien terkandung dalam StackPanel yang diberi latar belakang biru muda. Panel ini berisi empat DockPanel bagian UI yang dipisahkan oleh Separator bilah. Tujuan dari bagian-bagian ini dijelaskan di sini.

Setiap bagian berisi label yang mengidentifikasinya. Di dua bagian pertama, label ini diputar 90 derajat melalui penggunaan LayoutTransform. Bagian lainnya berisi elemen UI yang sesuai dengan tujuan bagian tersebut, misalnya, blok teks, kotak teks, dan tombol. Terkadang anak StackPanel digunakan untuk menyelaraskan kontrol anak ini.

Bagian sumber daya jendela

Tag pembuka <Window.Resources> pada baris 9 menunjukkan awal bagian sumber daya jendela. Ini berakhir dengan tag penutup pada baris 35.

Tag <ObjectDataProvider> , yang mencakup baris 11 hingga 25, mendeklarasikan ObjectDataProvider, bernama LoadedBooks, yang menggunakan XElement sebagai sumber. diinisialisasi XElement dengan mengurai dokumen XML yang disematkan ( CDATA elemen). Perhatikan bahwa spasi kosong dipertahankan saat mendeklarasikan dokumen XML yang disematkan dan juga ketika diurai. Ruang kosong dipertahankan TextBlock karena kontrol, yang digunakan untuk menampilkan XML mentah, tidak memiliki kemampuan pemformatan XML khusus.

Terakhir, nama DataTemplateBookTemplate didefinisikan pada baris 28 hingga 34. Templat ini digunakan untuk menampilkan entri di bagian UI Daftar Buku. Ini menggunakan pengikatan data dan LINQ ke properti dinamis XML untuk mengambil ID buku dan nama buku melalui tugas berikut:

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

Kode pengikatan data

Selain DataTemplate elemen , pengikatan data digunakan di sejumlah tempat lain dalam file ini.

Dalam tag pembuka <StackPanel> pada baris 38, DataContext properti panel ini diatur ke LoadedBooks penyedia data.

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

Mengatur konteks data memungkinkan (pada baris 46) bagi yang TextBlock bernama tbRawXml untuk menampilkan XML mentah dengan mengikat properti penyedia Xml data ini:

Text="{Binding Path=Xml}"

ListBox Di bagian UI Daftar Buku, pada baris 58 hingga 62, mengatur templat untuk item tampilannya ke BookTemplate yang ditentukan di bagian sumber daya jendela:

ItemTemplate ="{StaticResource BookTemplate}"

Kemudian, pada baris 59 hingga 62, nilai aktual buku terikat ke kotak daftar ini:

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

Bagian UI ketiga, Edit Buku yang Dipilih, pertama-tama mengikat DataContext induk StackPanel ke item yang saat ini dipilih dari bagian UI Daftar Buku (baris 82):

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

Kemudian menggunakan pengikatan data dua arah, sehingga nilai elemen buku saat ini ditampilkan, dan diperbarui dari, dua kotak teks di panel ini. Pengikatan data ke properti dinamis mirip dengan pengikatan data yang BookTemplate digunakan dalam templat data:

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

Bagian UI terakhir, Tambahkan Buku Baru, tidak menggunakan pengikatan data dalam kode XAML-nya. Sebaliknya, pengikatan data ada dalam kode penanganan peristiwanya dalam file L2DBForm.xaml.cs.

Contoh

Deskripsi

Catatan

Kami menyarankan agar Anda menyalin kode berikut di bawah ini ke editor kode, seperti editor kode sumber C# di Visual Studio, sehingga nomor baris akan lebih mudah dilacak.

Kode

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

Komentar

Untuk kode sumber C# untuk penanganan aktivitas yang terkait dengan elemen UI WPF, lihat kode sumber L2DBForm.xaml.cs.

Baca juga