CommunityToolkit.Mvvm RelayCommand Attribute 사용방법

일반적으로 RelayCommand는 ICommand 프로퍼티를 선언하여 사용하는 것이 일반적입니다.

public ICommand SaveCommand { get; init }

public MainViewModel()
{
    SaveCommand = new RelayCommand<string>(Save);
}

private void Save(string value)
{

}

그리고 CommunityToolkit.Mvvm 패키지에서는 Attribute를 통해 조금 더 간단하게 사용할 수도 있습니다.

[RelayCommand]
private void Save(string value)
{

}

보시는 것처럼 RelayCommand Attribute를 선언하면 별도의 프로퍼티와 RelayCommand 인스턴스 생성 없이도 바로 메서드를 연결하는 것이 가능합니다. 어떠한 추가적인 소스코드 없이도 말이죠.

Xaml에서는 그저 SaveCommand를 바인딩 해주기만 하면 됩니다.
(단 메서드에 Command 단어를 반드시 붙여야 합니다.)

<Button Command="{Binding SaveCommand}"/>

이렇게 하여 CommunityToolkit.Mvvm을 통한 RelayCommand Attribute 사용 방식에 대해 알아보았습니다.

읽어주셔서 감사합니다.
:smile:

16개의 좋아요

좋은 팁 감사합니다.
왜 저는 Attribute가 안 되지 해서 봤더니,
Community.Toolkit.Mvvm이 아니라
Microsoft.Toolkit.Mvvm 이었더군요 ( 구 버전 , Obsolete ).
패키지 교체하고 보니 잘 되는 것 같습니다.

단, 자동 생성된 partial Class때문에 partial 선언을 다시 추가 해줘야 하네요 ㅠ
[…].g.cs 파일이 생성되는걸 확인했습니다.

2개의 좋아요

@suwoo 앗 도움이 되셨다니 다행입니다!!

2개의 좋아요

구버전(Microsoft.Toolki)에서는 [ICommand] 로 하시면 됩니다만
(구버전에서도 partial 은 필수!)

구버전에서는 뭔가 이해할 수 없는 문제가 줄줄 떨어져서
결국 Community.Toolkit 으로 갈아탔슴다.

Community.Toolkit 으루 대동단결! ㅋㅅㅋ

3개의 좋아요

Community.Toolkit.Core, Community.Toolkit.Maui 도 있습니다.
혼동하시는 일 없길 바랍니다. (Community.Toolkit.Maui 기능을 Community.Toolkit.Mvvm에서하는 줄 알고…)



[RelayCommand]
private async Task OnSaveAsync(string value)

// examplePage.xaml
<Button Command="{Binding = SaveCommand}"

[RelayCommand]를 사용하여 바인딩 할 때 접두사 On, 접미사 Async는 자동으로 걸러줍니다.
(<Button Command="{Binding = OnSaveAsyncCommand}"로 바인딩 해서 실패한 경험이 있네요)

image
참조 문서 - RelayCommand attribute

7개의 좋아요

맞다, [ICommand]를 깜빡했군요? ㅎㅎㅎㅎ
그냥 최신버전으로 바꿔버리면서, 그냥 아무래도 그만인 문제가 되어버렸네요 ㅠㅠ
그래도 정말 감사합니다!

1개의 좋아요

On 키워드도 걸러줄 줄은 몰랐네요, 에잇 그러면 굳이 메서드 이름 바꿀 필요 없었는데 ㅠㅠ

3개의 좋아요

VS2019에서 Community.Toolkit.Mvvm의 Attribute 코드 자동생성 기능을 사용하는 방법은 없나요? ㅠㅠ

2개의 좋아요

좋은팁 감사합니다 ^^

3개의 좋아요

@hiron88 저도 작년에 VS2019에서 기능이 지원되지 않아 버전을 않아 애를 먹었었어요. ㅠㅠ

@김민규 별말씀을요. :laughing: 도움 되셨다니 다행입니다.

2개의 좋아요

감사합니다. 정말 좋은 팁이네요.
소스양이 확 줄것 같습니다.

그런데 궁금증이 있습니다. ViewModel 클래스가 partial class로 되는데요,
나머지 partial class는 어디에 있는지 보이지를 않네요.

3개의 좋아요

@Mukun_An Visual Studio를 통해 파일을 접근하는 방법에 대해서는 아시겠지만, 순서대로 남겨놓겠습니다.

Test > F12 또는 Go To Definition

이렇게 하면 파셜 파일을 찾기 쉽죠…

image

파셜 뷰모 델파일 텝에서 우측 클릭 > Open Containing Folder

폴더 위치: C:\Users\james\AppData\Local\Temp\VSGeneratedDocuments

그리고,

App.g.cs
MainWindow.g.cs

기본적인 App, MainWindow 등의 경우에는 프로젝트의 obj 폴더안에 직접 생성되지만, Communitytoolkit의 경우에는 AppData 위치에 생성이 되는군요. 한번 해보시기 바랍니다!

3개의 좋아요

CommandParameter를 쓰는 예제도 알려주세요

안녕하세요.

CommunityToolkit.Mvvm에서의
[RelayCommand]

[ObservableObject] 처럼
변수 규칙에 변수네이밍의 맨 앞이 소문자이거나 ‘_’ 여야 하는 규칙이 존재하지 않습니다.

단지, xaml에만 규칙이 존재하는데요.

ViewModel에서 ReleayCommand attribute를 규칙은 다음 과 같습니다.

{함수명}Command

그렇기 때문에 다음 같이 사용됩니다.

CommandParameter가 없는 경우

<Button Command="{Binding SaveCommand}"/>
[RelayCommand]
private void Save()
{

}

CommandParameter가 있는 경우

<Button Command="{Binding SaveCommand}" CommandParmeter={Binding .}/>

or

<TextBox x:Name="searchBox"/>
<Button Command="{Binding SaveCommand}" 
        CommandParmeter={Binding Text, ElementName=searchBox}}/>
[RelayCommand]
private void Save(string value)
{

}

p.s 생성되는 조건이 맞아야 소스제네레이터를 통해 자동 생성 되기 때문에 규칙 이라고 표현하였습니다.

5개의 좋아요