none
Silverlight에서 ComboBox 탐색기의 Navigation 패널 RRS feed

  • 질문

  • Silverlight에서 ComboBox형태의 Navigation 패널을 작성하고 싶은데요. 기본 방법을 알려주세요.

    2011년 12월 5일 월요일 오전 4:27

답변


  •  

    안녕하십니까? 김도남 님

    Microsoft TechNet Forum 사이트를 방문해 주셔서 감사합니다.

     

    문의 하신 “Silverlight에서 ComboBox 탐색기에 대한 답변을 드리겠습니다.

     

    Silverlight에서 DataTemplate를 이용해서 아래와 같은 그림의 탐색기의 Navigation Control을 작성을 할 수 있습니다.

     

     

    위와 같이 콤보박스 버튼을 클릭 하면 아래의 트리뷰형태의 Navigation 패널을 실행을 하고 아이템을 클릭하면 이벤트를 전달을 받을 수 있습니다. 기본 형태를 작성하시고 Content View 패널과 연동해서 탐색기프로그램을 작성할 수 있습니다.

     

     

    Step 1 : Custom TreeView

     

    TreeView를 상속받아서 임의의 SelectedItem Dependency Property를 생성을 합니다. 기본적으로 Silverlight에서 TreeViewSelectedItem 속성을 Binding할 수 없습니다. 하지만 Dependecy Property를 이용해서 임의로 Binding을 할 수 있습니다.

    EnhanceTreeView.CS

     

    //ESelectedITem Dependency Property 생성을 합니다.

    public static readonly DependencyProperty ESelectedItemProperty = DependencyProperty.Register("ESelectedItem"

        , typeof(object)

        , typeof(EnhanceTreeView)

        , null);        

     

     

    //SelectedItemChanged 이벤트를 구독을 합니다.

    this.SelectedItemChanged += new RoutedPropertyChangedEventHandler<object>(EnhanceTreeView_SelectedItemChanged);

     

     

    void EnhanceTreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)

    {

        //임의의 Dependency Property 변경된 Item 저장합니다.

        ESelectedItem = e.NewValue;

    }

     

     

    Step 2 : Default Model

     

    아래와 같이 기본적으로 Binding Class를 선언을 했습니다.

     

     

    Step 3 : DataTemplate

     

    MainPage.XAML

     

    <!--TreeView Item Template 간단하게 TextBlock Control 하나만 설정을 합니다.-->

    <DataTemplate x:Key="TreeViewItemTemplate">

        <TextBlock Text="{Binding Path=Name}" />            

    </DataTemplate>

     

    <ComboBox ItemsSource="{Binding Path=FolderExplorer}" 

              Width="200"

              Height="30"

              VerticalAlignment="Top"

              >

        <ComboBox.ItemTemplate>

            <DataTemplate>

                <!--Item Template TreeVew 설정을 합니다.-->

                <controlCustom:EnhanceTreeView ItemTemplate="{StaticResource TreeViewItemTemplate}"

                              ItemsSource="{Binding Path=FolderSource}"

                              ESelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}" 

                              >

                </controlCustom:EnhanceTreeView>

            </DataTemplate>

        </ComboBox.ItemTemplate>

    </ComboBox>        

     

    Step 4 : Binding

     

    아래와 같이 MainPage.XAML.CS를 작성을 합니다. FolderExplorer를 하나의 Item만을 생성을 합니다. Initialize함수는 필요한 기본 Data를 생성을 합니다.

     

     

    먼저 생성자에 아래의 코드를 작성해서 MainPage.XAML.CS MainPage 클래스를 XAML에 바인딩합니다.

     

    this.DataContext = this;

     

     

     

    아래는 Initialize 함수입니다.

     

    //ComboBox ItemsSource  Binding하는 인스턴스를 생성을 합니다.

    FolderExplorer = new ObservableCollection<CustomComboBoxItem>() 

    {

        //TreeView ItemsSource Binding하는 인스턴스를 생성을 합니다.

        new CustomComboBoxItem()

        {

             SelectedItem = null,

              FolderSource = new ObservableCollection<CustomTreeViewItem>()

              {

                 //아래의 DataSource 1차원이지만 ObservableCollection<CustomTreeViewItem> Property 생성을 해서 계층 구조의 TreeView 생성을   있습니다.

                 new CustomTreeViewItem()

                 {

                     Name = "Folder1"

                 },

                 new CustomTreeViewItem()

                 {

                     Name = "Folder2"

                 },

                 new CustomTreeViewItem()

                 {

                     Name = "Folder3"

                 },

                 new CustomTreeViewItem()

                 {

                     Name = "Folder4"

                 }

              }

        }

    };

    FolderExplorer[0].SelectedItemChanged += new EventHandler<TreeViewSelectedItemArgs>(MainPage_SelectedItemChanged);

     

     

    Solution Explorer

     

     

    참고 자료

     

    Using the MVVM Pattern in Silverlight Applications

    http://msdn.microsoft.com/en-us/gg710788

     

    DependencyProperty 클래스

    http://msdn.microsoft.com/ko-kr/library/system.windows.dependencyproperty.aspx

     

    제가 문제에 대해 더 알아야 할 것이 있다면 응답 주시면 감사하겠습니다.

    제시해 드린 답변이 도움이 되었기를 바랍니다.

    • 답변으로 표시됨 김도남 2011년 12월 8일 목요일 오전 4:29
    2011년 12월 5일 월요일 오전 4:31
    중재자