Bagikan melalui

Kode sumber L2DBForm.xaml

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

Struktur antarmuka pengguna keseluruhan

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

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

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 dengan kode StackPanel digunakan untuk menyelaraskan kontrol bawahan.

Bagian sumber daya jendela

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

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

Terakhir, DataTemplate bernama BookTemplate didefinisikan pada baris 28 hingga 34. Templat ini digunakan untuk menampilkan entri-entri di bagian Daftar Buku UI. 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 elemen DataTemplate, pengikatan data digunakan di sejumlah tempat lain dalam file ini.

Pada tag <StackPanel> pembuka di baris 38, properti DataContext dari panel ini diatur ke penyedia data LoadedBooks.

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

Mengatur konteks data pada baris 46 memungkinkan TextBlock yang bernama tbRawXml untuk menampilkan XML mentah dengan cara mengikat ke properti Xml dari penyedia data ini.

Text="{Binding Path=Xml}"

di bagian Daftar Buku , pada baris 58 hingga 62, mengatur templat untuk item tampilannya ke 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, EditBuku Terpilih, pertama-tama mengikat DataContext dari StackPanel induk 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 ditampilkan dan diperbarui dari dua kotak teks di panel ini. Pengikatan data ke properti dinamis mirip dengan pengikatan data yang digunakan dalam templat data BookTemplate:

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

Nota

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 WPF UI, lihat L2DBForm.xaml.cs kode sumber.

Lihat juga

  • Last updated on