[WPF] 카카오톡 구현 2 - DataTemplate로 UserControl 변경하기

✍ 사용자 정의 컨트롤 생성 

 

💻 LoginControl.xaml 생성 (사용자 정의 컨트롤) 

<UserControl x:Class="SunjeongTalk.Controls.LoginControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:SunjeongTalk.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid Background="Green">
        <TextBlock Text="LoginContorl"/>
    </Grid>
</UserControl>

 

 

💻 SignupControl.xaml 생성(사용자 정의 컨트롤)

<UserControl x:Class="SunjeongTalk.Controls.SignupControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:SunjeongTalk.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid Background="Yellow">
        <TextBlock Text="SignupControl"/>
    </Grid>
</UserControl>

 

💻 ChangePwdControl.xaml 생성(사용자 정의 컨트롤)

<UserControl x:Class="SunjeongTalk.Controls.ChangePwdControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:SunjeongTalk.Controls"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid Background="Blue">
        <TextBlock Text="ChangePwdControl"/>
    </Grid>
</UserControl>

 

✍ ViewModel 생성

 

💻 LoginControlViewModel 

using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SunjeongTalk.ViewModels
{
    [ObservableObject]
    public partial class LoginControlViewModel
    {

    }
}

 

💻 SignupControlViewModel

using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SunjeongTalk.ViewModels
{
    [ObservableObject]
    public partial class SignupControlViewModel
    {

    }
}

 

💻 ChangePwdControlViewModel

 

using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SunjeongTalk.ViewModels
{
    [ObservableObject]
    public partial class ChangePwdControlViewModel
    {

    }
}

 

 

💻 MainViewModel

✔ MainView에 뷰모델 의존성 주입

    public partial class MainView : Window
    {
        public MainView()
        {
            InitializeComponent();
            // 의존성 주입 
            DataContext = App.Current.Services.GetService(typeof(MainViewModel));
        }
    }

✔ 뷰모델을 사용하려면 서비스에 등록해줘야 한다. (App.xaml.cs)

// ViewModels
services.AddTransient<MainViewModel> ();
services.AddTransient<LoginControlViewModel> ();
services.AddTransient<SignupControlViewModel> ();
services.AddTransient<ChangePwdControlViewModel> ();

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SunjeongTalk.ViewModels
{
    [ObservableObject]
    public partial class MainViewModel
    {
        [ObservableProperty]
        public INotifyPropertyChanged _currentViewModel;

        [RelayCommand]
        public void ToLogin()
        {
            CurrentViewModel = (INotifyPropertyChanged)App.Current.Services.GetService(typeof(LoginControlViewModel))!;
        }
        [RelayCommand]
        public void ToChangePwd()
        {
            CurrentViewModel = (INotifyPropertyChanged)App.Current.Services.GetService(typeof(ChangePwdControlViewModel))!;
        }

        [RelayCommand]
        public void ToSignup()
        {
            CurrentViewModel = (INotifyPropertyChanged)App.Current.Services.GetService(typeof(SignupControlViewModel))!;
        }

        public MainViewModel()
        {
            _currentViewModel = (INotifyPropertyChanged)App.Current.Services.GetService(typeof(LoginControlViewModel))!;
        }

    }
}

<Window x:Class="SunjeongTalk.Views.MainView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SunjeongTalk.Views" 
        xmlns:controls="clr-namespace:SunjeongTalk.Controls"
        xmlns:vm="clr-namespace:SunjeongTalk.ViewModels"
        mc:Ignorable="d"
        WindowStyle="None"
        Title="MainView" Height="550" Width="350">

    <!--DataTemplate추가-->
    <Window.Resources>
        <DataTemplate DataType="{x:Type vm:LoginControlViewModel}">
            <controls:LoginControl/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:SignupControlViewModel}">
            <controls:SignupControl/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:ChangePwdControlViewModel}">
            <controls:ChangePwdControl/>
        </DataTemplate>
    </Window.Resources>
    
    <WindowChrome.WindowChrome>
        <WindowChrome CaptionHeight="20"
                      ResizeBorderThickness="2"/>
    </WindowChrome.WindowChrome>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>

        <!--TitleBar-->
        <controls:TitleBar/>

        <!--Body-->
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>

            <!--뷰모델, 커맨드 바인딩-->
            <ContentControl Content="{Binding CurrentViewModel}"/>
            <StackPanel Grid.Row="1" Orientation="Horizontal">
                <Button Content="로그인" Command="{Binding ToLoginCommand}"/>
                <Button Content="비밀번호변경" Command="{Binding ToChangePwdCommand}"/>
                <Button Content="회원가입" Command="{Binding ToSignupCommand}"/>
            </StackPanel>
        </Grid>
    </Grid>
</Window>