Part6. Using User Controls to Implement Master/Detail Scenarios

ü  Sample Code

1.     ListBox 컨트롤의 SelectionChanged 이벤트를 이용한 DetailView Dialog를 구현

-       DetailView를 위해 DetailView명으로 UserControl(Silverlight 사용자 정의 컨트롤)을 추가합니다.

-       UI 화면 만들고, 닫기 버튼 이벤트를 작성합니다.

Code

DetailView.xaml <UserControl x:Class="DemoSample3.DetailView"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="400" Height="300">     <Grid x:Name="LayoutRoot" Background="White">         <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="OrangeRed"></Rectangle>                            <Button x:Name="btnClose" Content="닫기" Width="100" Height="50" Click="btnClose_Click"></Button>     </Grid> </UserControl>   DetailView.xaml.cs // 닫기 버튼 이벤트를 추가 private void btnClose_Click(object sender, RoutedEventArgs e) {     Visibility = Visibility.Collapsed; }

-       초기 페이지 Page.xaml 에 ListBox 컨트롤 Item 선택 이벤트를 작성합니다.

Code

Page.xaml <UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  x:Class="DemoSample3.Page"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:detailview="clr-namespace:DemoSample3"     >     <Grid x:Name="LayoutRoot" Background="DarkOrange" >         <!-- 중략 -->         ………         <ListBox x:Name="lbResult" Grid.Row="1"  SelectionChanged="lbResult_SelectionChanged">             <ListBox.ItemTemplate>                 <DataTemplate>                     <!-- 중략 --> ………                 </DataTemplate>             </ListBox.ItemTemplate>         </ListBox>                 <!-- Modal Detail View UserControl 추가 -->         <detailview:DetailView x:Name="DetailView" Grid.Row="1" Visibility="Collapsed"></detailview:DetailView>     </Grid> </UserControl> Page.xaml.cs private void lbResult_SelectionChanged(object sender, SelectionChangedEventArgs e) {     DetailView.Visibility = Visibility.Visible; }

Description

ð  Silverlight 초기 페이지 Page.xaml 상단에 DetailView UserControl을 추가하기 위해 태그를 추가합니다. (ASP.NET 에서 UserControl 추가하는 것과 유사합니다.)

ð  DetailView 컨트롤 추가 한 후, Visiblity 속성을 Collapsed를 지정하여, 기본적으로 화면에 보이지 않게 하고, ListBox 컨트롤의 Item 선택 이벤트에 DetailView 컨트롤 Visible 처리 합니다.

Result
     

     

2.     DataContext 를 이용하여 DetailView 상세 화면 구현하기

-       DetailView에 상세 데이터를 표현하기 위해 UI를 변경하였습니다.

(데이터 표현하기 위한 TextBlock 추가)

Code

DetailView.xaml <UserControl x:Class="DemoSample3.DetailView"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     Width="400" Height="300">     <Grid x:Name="LayoutRoot" Background="White">         <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Fill="OrangeRed"></Rectangle>           <StackPanel Orientation="Vertical">             <StackPanel  Margin="7" Orientation="Horizontal">                 <TextBlock Margin="5">책 이름 :</TextBlock>                 <TextBlock x:Name="txtBookName"  Margin="5" Text="{Binding BookName}"></TextBlock>             </StackPanel>             <StackPanel Margin="7" Orientation="Horizontal">                 <TextBlock Margin="5">책 소개 :</TextBlock>                 <TextBlock x:Name="txtBookDesc" Margin="5" Text="{Binding Description}"></TextBlock>             </StackPanel>             <StackPanel Margin="7" Orientation="Horizontal">                 <TextBlock Margin="5">작성자 :</TextBlock>                 <TextBlock x:Name="txtBookAuthor" Margin="5" Text="{Binding Author}"></TextBlock>             </StackPanel>             <StackPanel Margin="7" Orientation="Horizontal">                 <TextBlock Margin="5">책 가격 :</TextBlock>                 <TextBlock x:Name="txtBookPrice" Margin="5" Text="{Binding Price}"></TextBlock>             </StackPanel>             <StackPanel Margin="7" Orientation="Horizontal">                 <TextBlock Margin="5">발행사 :</TextBlock>                 <TextBlock x:Name="txtBookPublisher" Margin="5" Text="{Binding Publisher}"></TextBlock>             </StackPanel>             <StackPanel Margin="7" Orientation="Horizontal">                 <TextBlock Margin="5">발행일 :</TextBlock>                 <TextBlock x:Name="txtBookPubDate" Margin="5" Text="{Binding PubDate}"></TextBlock>             </StackPanel>             <Button x:Name="btnClose" Content="닫기" Width="100" Height="50" Click="btnClose_Click"></Button>         </StackPanel>             </Grid> </UserControl>

-       ListBox 컨트롤의 Item 선택시 DetailView 컨트롤에 DataContext를 이용하여 데이터 전송

Code

Page.xaml private void lbResult_SelectionChanged(object sender, SelectionChangedEventArgs e) {     Book book = (Book)lbResult.SelectedItem;       DetailView.DataContext = book;     DetailView.Visibility = Visibility.Visible; }

Result

Description

ð  DetailView UserControl과 같이 FrameworkElement가 데이터 바인딩에 참여하는 경우, 해당 DataContext를 가져오거나 설정할 수 있으며, DataContext는 특정 컨텍스트가 다른 컨텍스트에 바인딩될 수 있는 시나리오의 작업을 원활하게 수행할 수 있도록 바인딩 가능한 속성입니다.