ViewModel 먼저 개발하기 - 下

👨‍🏫 튜토리얼, 팁, 강좌
,
1

ViewModel 먼저 개발하기 - 下

이철우

지금까지 Console 프로젝트에서 작업했다. View를 만들기 위해 WPF 프로젝트를 추가하자. 그리고 Console 프로젝트를 참조하고, 사용자 컨트롤 - TestCounterView.xaml - 을 추가한다. 사용자 컨트롤에 Console 프로젝트 네임스페이스를 넣는다. 글쓴이는 ‘vm’으로 했다. 설계용 DataContext를 지정해주자.

xmlns:vm="clr-namespace:ViewModelFirst;assembly=ViewModelFirst"
d:DataContext="{d:DesignInstance vm:ViewModel, IsDesignTimeCreatable=True}"

그리고 UI를 작성하자.

// TestCounterView.xaml 

 <Grid>
        <DockPanel LastChildFill="False" VerticalAlignment="Top" HorizontalAlignment="Left">
            <TextBox Text="{Binding Period}" DockPanel.Dock="Left"/>
            <Button Content="Start" Command="{Binding StartCommand}" DockPanel.Dock="Left"/>
            <Button Content="Stop" Command="{Binding StopCommand}" DockPanel.Dock="Left"/>
            <Button Content="SetCount" Command="{Binding SetCountCommand}" DockPanel.Dock="Left"/>
            <TextBox Text="{Binding SettingCount}" DockPanel.Dock="Left"/>
            <TextBlock Text="{Binding Count}" DockPanel.Dock="Left"/>
        </DockPanel>
</Grid>

// MainWindow.xaml  

<Grid>
        <local:TestCounterView/>
</Grid>

// MainWindow.xaml.cs

  public MainWindow()
{
    InitializeComponent();
    DataContext = new ViewModelFirst.ViewModel();
}

구현한 계수기 UI가 잘 작동한다. 디자이너와 업무를 나누었다면 개발人의 업무는 여기까지 라고 생각한다. 조금 더 이쁘게 만들어 보자. 사용자 컨트롤 이름을 PrettyCounterView.xaml 으로 해서 프로젝트에 추가하자. 이쁜 UI에도 Console 프로젝트 네임스페이스와 설계용 DataContext를 설정해주자.

// PrettyCounterView.xaml  

<DockPanel LastChildFill="True">
        <DockPanel DockPanel.Dock="Top" LastChildFill="False">
            <TextBox Text="{Binding Period}" DockPanel.Dock="Left"/>
            <Button Content="Start" Command="{Binding StartCommand}" DockPanel.Dock="Left"/>
            <Button Content="Stop" Command="{Binding StopCommand}" DockPanel.Dock="Left"/>
            <TextBox Text="{Binding SettingCount}" DockPanel.Dock="Right"/>
            <Button Content="SetCount" Command="{Binding SetCountCommand}" DockPanel.Dock="Right"/>
        </DockPanel>
        <Grid>
            <Viewbox>
                <TextBlock Text="{Binding Count}"/>
            </Viewbox>
        </Grid>
</DockPanel>

한 개의 ViewModel을 공유하는 두 개의 View를 보여주기 위해 MainWindow.xaml를 조금 고치자.

// MainWindow.xaml

<UniformGrid Columns="2">
        <local:TestCounterView Background="LightBlue"/>
        <local:PrettyCounterView Background="LightPink"/>
</UniformGrid>

두 개의 View가 잘 작동함을 알 수 있다. 이제 흉내낸 ViewModel.cs로 돌아가 Console 프로젝트에서 화면 표시 대용으로 필요했던 한 줄을 주석으로 만들자.

// ViewModel.cs 에서 

private void Model_CountChanged(object? sender, IModel.CountChangedEventArgs e)
{
    Count = e.Count;
    //Console.WriteLine($"{Count} {DateTimeOffset.Now:ss}");
}

Model 에서 시작하여 ViewModel 구현하고 View 디자인까지 순서대로 작업해보았다. 중도에 세 번의 테스트가 있었다. MVVM 패턴을 처음 접하고 막막했던 그 때가 생각난다. 이 글이 초보 개발人들에게 도움이 되길 바란다.

6개의 좋아요