[C# WPF] Button을 눌러 Frame에 Page 띄우기-2

1. 배경

https://velog.io/@yu_oolong/C-WPF-Button을-눌러-Page-전환하기
이어서

---

2. 개발환경

• VisualStudio 2022

---

3. 내용

3-1. Views 폴더에 Page 추가

• 앞서 MenuBar1.xaml과 MenuBar2.xaml에서 배치한 Button인 Menu1부터 6에 대응할 Page1~6.xaml을 추가했다.

• 페이지가 전환된 결과를 확실히 구분하기 위해 각 페이지들의 Background Color를 다양하게 지정했다.

• ex)Page1.xaml의 경우...
  

3-2. ViewModel 폴더에 MenuBar1PageModel.cs, MenuBar2PageModel.cs 추가하고 Command 작성하기

1. ViewModel 폴더에서 추가

• MenuBar1PageModel.cs

1. BaseViewModel을 상속받는다.
   

2. Command의 getter/setter를 작성한다.

MainWindow.xaml.cs(코드 비하인드)에서 GetInstance()를 수정한다.

• https://velog.io/@yu_oolong/C-WPF-Button을-눌러-Page-전환하기 의 MainWindow.xaml.cs에서 수정됐다.

3. MainWindow의 Instance를 가져오고 보여줄 Frame의 x:Name인 Contents의 Source를 new Uri로 지정한다.

4. 생성자에 작성한다.

• 코드 전체

using PackagingSystem.Commands;
using PackagingSystem.ViewModels;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Input;

namespace PracticeProject.ViewModels
{
    internal class MenuBar1PageModel : BaseViewModel
    {

        public ICommand Menu1Command { get; set; }
        public ICommand Menu2Command { get; set; }
        public ICommand Menu3Command { get; set; }

        public MenuBar1PageModel() 
        {
            Menu1Command = new RelayCommand(SelectMenu1);
            Menu2Command = new RelayCommand(SelectMenu2);
            Menu3Command = new RelayCommand(SelectMenu3);
        }

        private void SelectMenu1()
        {
            MainWindow mainWindow = MainWindow.GetInstance();
            if (mainWindow != null)
            {
                mainWindow.Contents.Source = new Uri("Page1.xaml", UriKind.Relative);
            }
        }

        private void SelectMenu2()
        {
            MainWindow mainWindow = MainWindow.GetInstance();
            if (mainWindow != null)
            {
                mainWindow.Contents.Source = new Uri("Page2.xaml", UriKind.Relative);
            }
        }

        private void SelectMenu3()
        {
            MainWindow mainWindow = MainWindow.GetInstance();
            if (mainWindow != null)
            {
                mainWindow.Contents.Source = new Uri("Page3.xaml", UriKind.Relative);
            }
        }

    }
}

• MenuBar2PageModel.cs도 똑같이 작성한다. new Uri의 Page~.xaml만 달라진다.

---

4. 결과

• id : user, password : user로 로그인 했을 때 MenuBar1의 내용이 표시되고 왼쪽의 버튼을 각각 누르면 Page1, Page2, Page3가 보여진다.

---

5. 마무리

이 중에 제일 모르겠는 것이 바로 MainWindow.xaml.cs(코드 비하인드)에서 작성한 GetInstance 부분...구글링을 어떻게 해야할지도 모르겠다.