MVVM방식으로 여러 View간 전환하기

NetworkTemplate_2.zip

0.04MB

 

1. 프로젝트 만들기

- Visual Studio 2022 Version 17.11.4

- Target framework : .NET 8.0

 

2. 실행화면

 

3. 데이터와 데이터를 표시하는 View를 연결하기(DataTemplate이용)

- App.xaml

- Rs232HostUcViewModel타입의 데이터를 표시할 View(Rs232HostUc)에 연결하는 예

<DataTemplate DataType="{x:Type vm:Rs232HostUcViewModel}">

    <v:Rs232HostUc/>

</DataTemplate>

- 데이터와 View연결 전체 코드

 <Application.Resources>

    <DataTemplate DataType="{x:Type vm:SerialPortHostSettingUcViewModel}">

        <v:SerialPortHostSettingUc/>

    </DataTemplate>

    <DataTemplate DataType="{x:Type vm:TcpHostSettingUcViewModel}">

        <v:TcpHostSettingUc/>

    </DataTemplate>

    <DataTemplate DataType="{x:Type vm:UdpHostSettingUcViewModel}">

        <v:UdpHostSettingUc/>

    </DataTemplate>

    <DataTemplate DataType="{x:Type vm:PipeHostSettingUcViewModel}">

        <v:PipeHostSettingUc/>

    </DataTemplate>

    <DataTemplate DataType="{x:Type vm:GeneralSettingUcViewModel}">

        <v:GeneralSettingUc/>

    </DataTemplate>

    <DataTemplate DataType="{x:Type vm:Rs232HostUcViewModel}">

        <v:Rs232HostUc/>

    </DataTemplate>

    <DataTemplate DataType="{x:Type vm:TcpHostUcViewModel}">

        <v:TcpHostUc/>

    </DataTemplate>

    <DataTemplate DataType="{x:Type vm:UdpHostUcViewModel}">

        <v:UdpHostUc/>

    </DataTemplate>

    <DataTemplate DataType="{x:Type vm:PipeHostUcViewModel}">

        <v:PipeHostUc/>

    </DataTemplate>

</Application.Resources>

 

4. View간 전환하기

 

사용자가 선택한 데이터(CurrentViewModel)에 따라 빨간색 영역에 View가 표시됨

 

 

참고자료

로그설정 설명

- https://programmer-jeong.tistory.com/27

CommunityToolkit.Mvvm사용시 다이얼로그창 표시방법1

- https://programmer-jeong.tistory.com/29

Json, Xml, Ini설정파일 읽기/쓰기

- https://programmer-jeong.tistory.com/30

Switching Between Multiple Views in MVVM - EASY WPF (.NET CORE)

- https://www.youtube.com/watch?v=1_cUgpWqS0Y

- https://github.com/SingletonSean/wpf-tutorials/tree/master/SwitchingViewsMVVM