04.1 RelayCommand<T>

1️⃣ RelayCommand<T> 개요

📚  Microsoft Docs: RelayCommand<T> Generator

 

✔️  관련 네임스페이스

using CommunityToolkit.Mvvm.Input;

 

✔️ 작동 방식

• RelayCommand<T>는 매개변수를 받는 명령(Command)을 구현할 때 사용합니다.
• CommandParameter를 통해 전달되는 인자의 타입을 명확히 지정할 수 있는
  제네릭 버전의 명령(Command)입니다.

 

✔️ 왜 필요한가?

1. MVVM에서는 View와 ViewModel이 직접 연결되지 않도록 하기 위해,
   이벤트 기반의 직접 호출 대신(Button Click 이벤트에서 sender를 사용할 수 없음) Command를 사용합니다.
2. RelayCommand는 매개변수를 사용하지 않거나, 사용하는 경우에도 object 타입으로 처리하고, 
   타입이 명확하지 않으면 형변환이 필요하고 런타임 오류 가능성도 증가합니다.
3. Command<T> 장점
   • 정적 타입 검사 가능 → 컴파일 시 오류 확인
   • 형변환 없이 바로 사용 가능
   • XAML CommandParameter와 연계 시 더 안정적이고 직관적임

✔️ 소스 코드

 

 

 

 

 

 

2️⃣ 예제1 - RelayCommand 

*CommunityToolkit.Mvvm 패키지 설치 후 진행해주세요.

 

✔️ 1. 동작 시나리오

1. 사용자가 버튼을 클릭하면 HelloCommand가 실행되고 메시지 박스 출력

 

 

✔️ 2. [ RelayCommand ] 로 구현

 

📁 2.1 프로젝트 구조

RelayCommandDemo/
├── ViewModels/
│   └── MainViewModel.cs
├── MainWindow.xaml
└── MainWindow.xaml.cs

 

📁 2.2 ViewModel 클래스 만들기 (MainViewModel.cs)

public partial class MainViewModel : ObservableObject
{
    [RelayCommand]
    private void SayHello()
    {
        MessageBox.Show("안녕하세요! RelayCommand 버튼을 클릭했습니다.");
    }
}

 

📁 2.3 XAML 화면 구성

    xmlns:viewModels="clr-namespace:WPF_ToolKit09_01.ViewModels"
    Title="RelayCommand Demo" Height="200" Width="300">
<Window.DataContext>
    <viewModels:MainViewModel/>
</Window.DataContext>
 
<StackPanel Margin="20">
    <Button Content="Say Hello"
            Command="{Binding SayHelloCommand}"/>
</StackPanel>

 

 

✔️ 3. 결과

• 버튼을 클릭하면 SayHello() 메서드가 실행되어 메시지박스 출력

 

 

 

 

3️⃣ 예제2 - RelayCommand <T> 

✔️ 동작 시나리오

 

1. 텍스트 박스에 이름을 입력하고
2. 버튼을 클릭하면
3. "_ _ _님, 안녕하세요!" 메시지 출력

✔️ 2. [ RelayCommand ] 로 구현

 

📁 2.1 프로젝트 구조

RelayCommandDemo/
├── ViewModels/
│   └── MainViewModel.cs
├── MainWindow.xaml
└── MainWindow.xaml.cs

 

📁2.2 ViewModel 클래스 만들기 (MainViewModel.cs)

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    private string userName;
 
    [RelayCommand]
    private void Greet(string name)
    {
        MessageBox.Show($"{name}님, 안녕하세요!");
    }
}

📁 2.3 XAML 화면 구성

    xmlns:viewModels="clr-namespace:WPF_ToolKit09_02.ViewModel"
    Title="RelayCommand<T> Demo" Height="200" Width="300">
<Window.DataContext>
    <viewModels:MainViewModel/>
</Window.DataContext>
 
<StackPanel Margin="20">
    <TextBox Text="{Binding UserName, UpdateSourceTrigger=PropertyChanged}" />
    <Button Content="Greet"
        Command="{Binding GreetCommand}"
        CommandParameter="{Binding UserName}"/>
</StackPanel>

✔️ 3. 결과

• TextBox에 "홍길동" 입력 후 버튼 클릭 시, "홍길동님, 안녕하세요!" 출력

 

 

✔️ 비교 RelayCommand vs RelayCommand<T>

항목	RelayCommand	RelayCommand<T>
매개변수	없음	있음
사용 예	단순 버튼 처리	입력값 전달, 리스트 항목 선택
XAML CommandParameter	필요 없음	필수 (값 바인딩)

 

 

 

4️⃣ 예제 - RelayCommand<T> 동작 구조

✔️ 1. 예제의  RelayCommand<T> 살펴보기

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    private string userName;
 
    [RelayCommand]
    private void Greet(string name)
    {
        MessageBox.Show($"{name}님, 안녕하세요!");
    }
}

 

 

✔️ 2. 자동 생성되는 코드

위처럼 작성하면 GreetCommand가 GreetCommand<String>으로 자동 생성됩니다.
이건 곧 IRelayCommand<String>를 통해 String 타입의 매개변수만 허용하는 명령이 됩니다.

 

 

✔️3. 작동 흐름

<Button Content="Greet"
    Command="{Binding GreetCommand}"
    CommandParameter="{Binding UserName}"/>

1. (사용자가 TextBox에 이름 입력 → UserName 속성 업데이트)
2. 사용자가 버튼을 클릭
3. UserName 프로퍼티를 CommandParameter로
4. ViewModel의 GreetCommand에 전달
5. GreetCommand.Execute(UserName) → Greet(string name) 실행

 

 

 

 

✔️4. 추가 과제

• 객체 전달
• Person 객체를 매개변수로 전달하고, 로직에서 Name, Age 등 필드 사용

 

 

 

5️⃣ 예제 - IMultiValueConverter 복합 값 전달

✔️ ViewModel

[RelayCommand]
private void Submit((Person person, string comment) input)
{
    var (person, comment) = input;
    // 복합 정보 사용
}

 

✔️ View (XAML)

<Button Content="제출">
    <Button.CommandParameter>
        <MultiBinding Converter="{StaticResource TupleConverter}">
            <Binding Path="." />
            <Binding Path="CommentText" />
        </MultiBinding>
    </Button.CommandParameter>
</Button>