[WPF] 카테고리와 메뉴 만들기 - (3) 카테고리 선택 시 메뉴 변경

이전 글에서는 단순히 프로그램이 실행되면 첫 번째 카테고리가 활성화되도록만 처리하였다.

이번 글에서는 각 카테고리를 선택했을 때 해당 카테고리에 맞는 메뉴들이 표시되도록 코딩해보자.

 

2020/10/02 - [개발] - [WPF] 카테고리와 메뉴 만들기 - (2) 메뉴 리스트

[WPF] 카테고리와 메뉴 만들기 - (2) 메뉴리스트

xaml 코드는 수정할 필요가 없고, .cs파일에서 수정한다.

(MVVM패턴을 사용하면 더 좋긴 하지만 아직은 때가 아니다. 좀 더 익숙해진 후 트라이하기 바란다.)

 

메인화면의 초기화가 끝나고 로드가 완료되면 초기화하도록 이벤트 핸들러를 추가하였다.

 

        public MainWindow()
        {
            InitializeComponent();
            this.Loaded += MainWindow_Loaded;
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {

        }

 

MainWindow_Loaded함수에 아래 코드를 넣으면 처음 실행되면 스페셜 메뉴가 나오기는 한다. 

lbMenus.ItemsSource = lstFood.Where(x => x.category == category).ToList();

 

뭐 다양한 방법이야 있지만 여기서는 아래와 같이 해보도록 하겠다.

리스트 박스는 SelectedIndex라는 속성을 가지고 있다. 현재 선택된 아이템의 인덱스는 어떤 값인가.

이 값을 활용해보자

 

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            lbCategory.SelectedIndex = 0; //처음 실행 시 첫번째 카테고리가 선택되도록 
        }

 

실행하면 바로 첫 번째 카테고리인 스페셜&할인팩이 활성화될 것이다. 이 카테고리에 맞는 메뉴를 연결시켜주자

ListBox에 SelectionChanged 이벤트 핸들러를 등록하자.

 

            <ListBox x:Name="lbCategory"
                     Margin="150,0,0,0"
                     FontSize="16"
                     FontWeight="SemiBold"
                     VerticalAlignment="Top"
                     BorderBrush="Transparent"
                     ScrollViewer.VerticalScrollBarVisibility="Disabled" 
                     ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                     SelectionChanged="lbCategory_SelectionChanged">

 

코드에 자동으로 추가된 함수에 아래와 같이 처리한다.

 

        private void lbCategory_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (lbCategory.SelectedIndex == -1) return;

            Category category = (Category)lbCategory.SelectedIndex;
            lbMenus.ItemsSource = lstFood.Where(x => x.category == category).ToList();
        }

 

SelectedIndex가 -1인 경우는 예외처리를 해준다. 코드를 어떻게 작성했는가에 따라 이 처리를 안 해주면 그다음 코드들에서 반란이 일어날 것이다.

 

실행하면 원하는 대로 동작

 

코드는 아래 Github 링크에서

github.com/ChrisKim10/DGSWSample