11. [.NET MAUI] ViewModel에서 Control Method 바인딩시키기

View에 있는 Control들의 Property는 데이터형식이라서 ViewModel 쪽에서 바인딩 하기가 쉬웠다.

string이면 string형, bool형이면 bool형으로 생성해서 Binding 시켜주면 되었기때문이다.

 

그렇다면, Control에 있는 고유 Task(확장 Method)나 Method 같은 경우에는 어떻게 바인딩 시켜야할까?

 

코드 비하인드에서의 Method 사용

위에서 보는 것과 같이 코드 비하인드에 작성하면 코드 한줄이면된다... 굉장히 쉽다, 하지만 코드비하인드에 작성하게되면 View와 ViewModel의 의존성을 높이는 것이기 때문에 그런 짓은 하지않는다.

 

Button 을 눌렀을 때 Image가 움직이는 기능을 예제로 만들면서 Image 컨트롤의 Task(RotateTo, ScaleTo, TranslateTo )를 어떻게 ViewModel에서 바인딩하는지 설명한다.

---

1. View(Page11.xaml)의 마크업 소스는 아래와 같이 작성한다.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.Page11"
             xmlns:service="clr-namespace:AppMaui.Services"
             Title="Page11"
             BackgroundColor="White">
    <NavigationPage.TitleView>
        <Label Text="Page11"/>
    </NavigationPage.TitleView>

    <ContentPage.Resources>
        <ResourceDictionary>
            <service:stringToBoolConverter x:Key="stringTobool"/>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ScrollView>
        <Grid RowDefinitions="Auto,*,*,*,Auto,*,*,*,*,*" ColumnDefinitions="*">
            
            <Label Grid.Row="0" Text="회전" HorizontalOptions="Center"/>
            
            <Image x:Name="img1" Grid.Row="4" IsAnimationPlaying="True" 
                   Source="star" MinimumWidthRequest="100" VerticalOptions="Start"
                   Rotation="{Binding Source={x:Reference slider1}, Path= Value}"/>

            <Slider Grid.Row="8" x:Name="slider1" Maximum="360" VerticalOptions="Start"/>

            <Entry Grid.Row="6" HorizontalOptions="Center" 
                   Text="{Binding Source={x:Reference slider1}, Path= Value, Mode=TwoWay}" />

            <Button x:Name="button" Grid.Row="9" CommandParameter="{Binding Source= {x:Reference img1}}"
                    Command="{Binding cmd_danceimg}"/>

        </Grid>
        
    </ScrollView>
</ContentPage>

1-1) Button 쪽에 Command를 뒤에 ViewModel에서 구현될 "cmd_danceimg"로 바인딩한다.

1-2) Command에 Task를 사용할 Image 컨트롤을 매개변수로 주기위해서 CommandParameter에 x:Name이 img1인 Image 컨트롤을 파라로 넘긴다.

 

---

 

2. ViewModel(Page11_ViewModel)에 아래와 같이 작성한다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using AppMaui.Services;

namespace AppMaui.ViewModels
{
    class Page11_ViewModel : Notify
    {
        public ICommand cmd_danceimg { get; set; }
        public Page11_ViewModel()
        {
           
        }

        public Page11_ViewModel(INavigation navigation)
        {
            
            cmd_danceimg = new Command(async (obj) =>
            {
                Image img = (Image)obj;     //CommandParameter를 통해 매개변수로 받은 obj를 Image Control로 명시적 캐스트함
                var a1 = img.TranslateTo(1.0, 100,100, Easing.CubicOut);    //이동 Task
                var a2 = img.ScaleTo(1.0, 1000,Easing.BounceOut);           //크기 Task
                var a3 = img.TranslateTo(-1.0, -100, 100*100*5, Easing.CubicOut);
                var a4 = img.ScaleTo(-1.0, 1000, Easing.BounceOut);
                var a5 = img.RotateTo(307 * 360, 10*60*1000);               //회전 Task

                await Task.WhenAll(a1, a2,a3,a4);

            }, (o) =>
            {
                return true;
            });

        }

    }
}

2-1) ViewModel에서 컨트롤을 받기위해 Command에 object를 비동기식 매개변수로 받는다.

2-2) 매개변수로 받은 변수obj를 Image img = (Image)obj; 소스를 통해 Image 컨트롤이라고 명시적 캐스트한다.

2-3) 사용하고 싶은 Task나 Method를 사용한다.

* await Task.WhenAll(a1, a2,a3,a4); 로 Task들을 순차적으로 실행함

 

---

빌드된 모습

 

이미지라서 안보이지만.. 순차적으로 Task(확장 Method)들이 실행되는 것을 볼수있다.

 

끝!