L2DBForm.xaml ソース コードL2DBForm.xaml Source Code

このトピックでは、「 WPF Data Binding Using LINQ to XML Example」の XAML ソース ファイル L2DBForm.xaml の内容と説明を示します。This topic contains and describes the XAML source file for the WPF Data Binding Using LINQ to XML Example, L2DBForm.xaml.

UI の全体的な構造Overall UI Structure

WPF プロジェクトで一般に見られるように、このファイルには親要素として Window XML 要素が含まれており、この要素に L2XDBFrom 名前空間の派生クラス LinqToXmlDataBinding が関連付けられています。As is typical for a WPF project, this file contains one parent element, a Window XML element associated with the derived class L2XDBFrom in the LinqToXmlDataBinding namespace.

クライアント領域は、背景が薄い青になっている StackPanel に含まれています。The client area is contained within a StackPanel that is given a light blue background. このパネルは、 DockPanel バーで区切られた 4 つの Separator UI セクションで構成されています。This panel contains four DockPanel UI sections separated by Separator bars. これらのセクションの目的については、 前のトピック の「 解説」で説明されています。The purpose of these sections is described in the Remarks in the previous topic.

各セクションには、それぞれを識別するラベルが含まれています。Each section contains a label that identifies it. 最初の 2 つのセクションでは、 LayoutTransformを使用してこのラベルを 90°回転させています。In the first two sections, this label is rotated 90 degrees through the use of a LayoutTransform. セクションの残りの部分には、そのセクションの目的に適したテキスト ブロック、テキスト ボックス、ボタンなどの UI 要素が含まれています。The remainder of the section contains UI elements appropriate to the purpose of that section: text blocks, text boxes, buttons, and so on. これらの子コントロールの配置には、子 StackPanel が使用されている場合があります。Sometimes a child StackPanel is used to align these child controls.

ウィンドウ リソース セクションWindow Resource Section

9 行目の <Window.Resources> 開始タグは、ウィンドウ リソース セクションの開始を示します。The opening <Window.Resources> tag on line 9 indicates the start of the window resource section. このセクションは、35 行目の終了タグで終了します。It ends with the closing tag on line 35.

11 ~ 25 行目にわたる <ObjectDataProvider> タグでは、 ObjectDataProviderをソースとして使用する LoadedBooksという名前の XElement が宣言されています。The <ObjectDataProvider> tag, which spans lines 11 through 25, declares a ObjectDataProvider, named LoadedBooks, that uses an XElement as the source. この XElement は、組み込み XML ドキュメント ( CDATA 要素) を解析することで初期化されます。This XElement is initialized by parsing an embedded XML document (a CDATA element). 組み込み XML ドキュメントの宣言時および解析時に、空白が保持されることに注意してください。Notice that white space is preserved when declaring the embedded XML document and also when it is parsed. これは、生の XML の表示に使用されている TextBlock コントロールに、XML の書式を設定する機能がないためです。This was done because the TextBlock control, which is used to display the raw XML, has no special XML formatting capabilities.

最後に、28 ~ 34 行目で DataTemplate という名前の BookTemplate が定義されています。Lastly, a DataTemplate named BookTemplate is defined on lines 28 through 34. このテンプレートは、[Book List] UI セクションにエントリを表示するために使用されます。This template will be used to display the entries in the Book List UI section. ここでは、データ バインドおよび LINQ to XML の動的プロパティを使用し、次の代入を通じて書籍の ID と名前を取得します。It uses data binding and LINQ to XML dynamic properties to retrieve the book ID and book name through the following assignments:

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

データ バインド コードData Binding Code

このファイルでは、 DataTemplate 要素に加えて、データ バインドが各所で使用されています。In addition to the DataTemplate element, data binding is used in a number of other places in this file.

38 行目の <StackPanel> 開始タグでは、このパネルの DataContext プロパティが LoadedBooks データ プロバイダーに設定されています。In the opening <StackPanel> tag on line 38, the DataContext property of this panel is set to the LoadedBooks data provider.

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

これにより、このデータ プロバイダーの TextBlock プロパティにバインドして、 tbRawXml という名前の Xml に生の XML を表示できるようになります (46 行目)。This makes it possible (on line 46) for the TextBlock named tbRawXml to display the raw XML by binding to this data provider's Xml property:

Text="{Binding Path=Xml}"   

58 ~ 62 行目では、 ListBox [Book List] UI セクションの が、その表示項目のテンプレートをウィンドウ リソース セクションで定義された BookTemplate に設定しています。The ListBox 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:

ItemTemplate ="{StaticResource BookTemplate}"   

59 ~ 62 行目では、書籍の実際の値がこのリスト ボックスにバインドされています。Then, on lines 59 through 62, the actual values of the books are bound to this list box:

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

3 番目の UI セクション [Edit Selected Book]では、まず親 DataContextStackPanel が、 [Book List] UI セクション (82 行目) で現在選択されている項目にバインドされています。The third UI section, Edit Selected Book, first binds the DataContext of the parent StackPanel to the currently selected item in from the Book List UI section (line 82):

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

次に、双方向データ バインドを使用して、書籍要素の現在の値がこのパネルの 2 つのテキスト ボックスに表示され、そこで更新されるようにしています。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. 動的プロパティへのデータ バインドは、 BookTemplate データ テンプレートで使用されているデータ バインドと似ています。Data binding to dynamic properties is similar to that used in the BookTemplate data template:

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

最後の UI セクション [Add New Book] では、XAML コード内でデータ バインドが使用されていません。代わりに、データ バインドに類似したコードが L2DBForm.xaml.cs ファイルのイベント処理コードに記述されています。The last UI section, Add New Book, does not use data binding in its XAML code; instead, such code can be found in its event handling code in the file L2DBForm.xaml.cs.

Example

説明Description

注意

行番号を追跡しやすいように、次のコードを Visual Studio の C# ソース コード エディターなどのコード エディターにコピーすることをお勧めします。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

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

コメントComments

WPF UI 要素に関連付けられているイベント ハンドラーの C# ソース コードについては、「L2DBForm.xaml.cs ソース コード」を参照してください。For the C# source code for the event handlers associated with the WPF UI elements, see L2DBForm.xaml.cs Source Code.

関連項目See Also

チュートリアル: LinqToXmlDataBinding の例 Walkthrough: LinqToXmlDataBinding Example
L2DBForm.xaml.cs ソース コードL2DBForm.xaml.cs Source Code