WCF RIA Service 6 (ComboBox Binding) by Silverlight 4

간단한 콤보박스에 바인딩하는 예제를 만들어 보았다. 일단 화면을 보자

WCF RIA 서비스를 이용해서 3개의 데이터를 조회한 후에 상품은 데이터 그리드에 바인딩하고, 오른쪽 각각의 콤보박스에 카테고리, 공급자를 바인딩을 해 놓았다. 그리고 그리드에서 선택된 데이터를 변경하면 콤보박스에 데이터가 변경되고, 콤보박스에서 데이터를 변경하면 그리드의 데이터가 변경되도록 만들어 놓았다.

바인딩의 기초적인 내용인데 처음에 만들려고 하면 좀 까다로운 부분이 있다. 예제를 참고해서 연습하면 바인딩 마스터를 할 수 있을 것이다.

ComboBoxSampleView.xaml

<UserControl x:Class="SL4_RIA_Sample.ComboBoxSampleView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400"
    xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.DomainServices"
    xmlns:my="clr-namespace:SL4_RIA_Sample.Web"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
   
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*" />
            <ColumnDefinition Width="0.5*" />
        </Grid.ColumnDefinitions>

        <!--상품 조회용 리아 컨트롤-->

        <riaControls:DomainDataSource AutoLoad="True" Height="0" LoadedData="productDomainDataSource_LoadedData" x:Name="productDomainDataSource" QueryName="GetProductsQuery" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <my:DomainService1 />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>

        <!--카테고리 조회용 리아컨트롤-->

        <riaControls:DomainDataSource AutoLoad="True" Height="0" LoadedData="categoryDomainDataSource_LoadedData" x:Name="categoryDomainDataSource" QueryName="GetCategoriesQuery" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <my:DomainService1 />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>

         <!--공급자 조회용 리아컨트롤-->

        <riaControls:DomainDataSource AutoLoad="True" Height="0" LoadedData="supplierDomainDataSource_LoadedData" x:Name="supplierDomainDataSource" QueryName="GetSuppliersQuery" Width="0">
            <riaControls:DomainDataSource.DomainContext>
                <my:DomainService1 />
            </riaControls:DomainDataSource.DomainContext>
        </riaControls:DomainDataSource>

        <!--그리드-->

        <sdk:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Data, ElementName=productDomainDataSource}" x:Name="productDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected">
            <sdk:DataGrid.Columns>
                <sdk:DataGridTextColumn x:Name="product_NameColumn" Binding="{Binding Product_Name}" Header="Product Name" Width="SizeToHeader" />
             <sdk:DataGridTextColumn x:Name="english_NameColumn" Binding="{Binding English_Name, Mode=TwoWay}" Header="English Name" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="category_IDColumn" Binding="{Binding Category_ID, Mode=TwoWay}" Header="Category ID" Width="SizeToHeader" />
             <sdk:DataGridTextColumn x:Name="product_IDColumn" Binding="{Binding Product_ID, Mode=OneWay}" Header="Product ID" IsReadOnly="True" Width="SizeToHeader" />
                <sdk:DataGridTextColumn x:Name="supplier_IDColumn" Binding="{Binding Supplier_ID, Mode=TwoWay}" Header="Supplier ID" Width="SizeToHeader" />
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>

 

        <StackPanel Grid.Column="1" Margin="4,0,0,0" >
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Product Name" Width="90"/>
                <TextBox Text="{Binding SelectedItem.Product_Name, ElementName=productDataGrid, Mode=TwoWay}" />
            </StackPanel>

            <!--카테고리 콤보박스-->

            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Category" Width="90" />
                <ComboBox ItemsSource="{Binding Data, ElementName=categoryDomainDataSource, Mode=OneWay}" DisplayMemberPath="Category_Name" SelectedValuePath="Category_ID" SelectedValue="{Binding SelectedItem.Category_ID, ElementName=productDataGrid, Mode=TwoWay}" />
            </StackPanel>

            <!--공급자 콤보박스-->
            <StackPanel Orientation="Horizontal">
             <TextBlock Text="Supplier" Width="90" />
             <ComboBox ItemsSource="{Binding Data, ElementName=supplierDomainDataSource, Mode=OneWay}" DisplayMemberPath="Company_Name" SelectedValuePath="Supplier_ID" SelectedValue="{Binding SelectedItem.Supplier_ID, ElementName=productDataGrid, Mode=TwoWay}" />
            </StackPanel>
        </StackPanel>
    </Grid>
</UserControl>

소스를 실행하여 분석해보면...
 어떻게 바인딩을 했는지 확인 할 수 있다. 궁금한 점이나 요청사항은 항상 리플로 남겨주면 매우 친절한 설명을 추가하도록 하겠다..^^

sl4_ria_sample_6회.zip