L2DBForm.xaml 소스 코드

이 페이지에서는 LINQ to XML 예제를 사용한 WPF 데이터 바인딩의 XAML 원본 파일을 제공하며 이 파일에 대해 설명합니다.

전체적인 UI 구조

WPF 프로젝트에서 일반적인 것처럼 이 파일에는 부모 요소가 하나 포함되어 있습니다. 이 부모 요소는 LinqToXmlDataBinding 네임스페이스의 파생된 클래스 L2XDBFrom과 연결된 Window XML 요소입니다.

클라이언트 영역은 연한 파란색 배경이 제공되는 StackPanel에 포함되어 있습니다. 이 패널에는 DockPanel 표시줄로 구분된 Separator UI 섹션이 4개 포함되어 있습니다. 이러한 섹션의 용도는 여기에 설명되어 있습니다.

각 섹션에는 해당 섹션을 식별하는 레이블이 포함되어 있습니다. 처음 두 섹션에서 이 레이블은 LayoutTransform을 사용하여 90도 회전됩니다. 섹션의 나머지 부분에는 해당 섹션의 목적에 적합한 텍스트 블록, 텍스트 상자, 단추 등의 UI 요소가 포함되어 있습니다. 때때로 자식 StackPanel 이 이러한 자식 컨트롤을 정렬하는 데 사용됩니다.

창 리소스 섹션

9번째 줄의 여는 <Window.Resources> 태그는 창 리소스 섹션의 시작을 나타냅니다. 창 리소스 섹션은 35번째 줄의 닫는 태그에서 끝납니다.

11-25번째 줄에 있는 <ObjectDataProvider> 태그는 ObjectDataProvider를 소스로 사용하는 LoadedBooks라는 XElement 를 선언합니다. XElement는 포함된 XML 문서(CDATA 요소)의 구문을 분석하여 초기화됩니다. 포함된 XML 문서를 선언하는 경우와 이 문서의 구문을 분석하는 경우에도 공백이 유지됩니다. 공백은 원시 XML을 표시하는 데 사용되는 TextBlock 컨트롤에 유지되기 때문에 특별한 XML 서식 지정 기능이 없습니다.

마지막으로 DataTemplate 이라는 BookTemplate 이 28-34번째 줄에 정의되어 있습니다. 이 템플릿은 Book List UI 섹션에 항목을 표시하는 데 사용됩니다. 이 템플릿에서는 데이터 바인딩과 LINQ to XML 동적 속성을 사용하여 다음 할당을 통해 책 ID와 책 이름을 검색합니다.

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

데이터 바인딩 코드

DataTemplate 요소 외에도 데이터 바인딩이 이 파일의 여러 위치에서 사용됩니다.

38번째 줄의 여는 <StackPanel> 태그에서 이 패널의 DataContext 속성은 LoadedBooks 데이터 공급자로 설정됩니다.

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

데이터 컨텍스트를 설정하면(46번째 줄) tbRawXml이라는 TextBlock이 이 데이터 공급자의 Xml 속성에 바인딩하여 원시 XML을 표시할 수 있습니다.

Text="{Binding Path=Xml}"

58-62번째 줄의 ListBox Book List UI 섹션에 있는 는 표시 항목에 대한 템플릿을 창 리소스 섹션에 정의된 BookTemplate 으로 설정합니다.

ItemTemplate ="{StaticResource BookTemplate}"

그런 다음 59-62번째 줄에서 책의 실제 값이 이 목록 상자에 바인딩됩니다.

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

세 번째 UI 섹션인 Edit Selected Book은 먼저 부모 DataContextStackPanelBook List UI 섹션(82번째 줄)에서 현재 선택된 항목에 바인딩합니다.

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

그런 다음, 양방향 데이터 바인딩을 사용하여 책 요소의 현재 값이 이 패널의 두 텍스트 상자에 표시되고 업데이트됩니다. 동적 속성에 대한 데이터 바인딩은 BookTemplate 데이터 템플릿에서 사용되는 데이터 바인딩과 유사합니다.

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

최신 UI 섹션인 Add New Book에서는 XAML 코드에 데이터 바인딩을 사용하지 않습니다. 대신, 데이터 바인딩은 L2DBForm.xaml.cs 파일의 이벤트 처리 코드에 있습니다.

예제

Description

참고

줄 번호를 추적하기 쉽도록 아래의 코드를 Visual Studio의 C# 소스 코드 편집기와 같은 코드 편집기에 복사하는 것이 좋습니다.

코드

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

주석

WPF UI 요소와 연결된 이벤트 처리기의 C# 소스 코드는 L2DBForm.xaml.cs 소스 코드를 참조하세요.

참고 항목