[wp7] mvvm 쓰는법 정리

 

일단 설명은 나중에 하고 설명부터 하자….(레퍼런스에 hugeflow.mvvm 이랑 core dll 넣는것은 기본~)

일단 ViewModels라는 폴더(안만들어도 상관없음)를 만들고 class를 만들자 예를들어 RandomNumberView.model.cs

그뒤에 Service locator를 등록하자

serviceLocator.cs 를 만들고

이렇게….

namespace RanDomNumber

{

    public class ServiceLocator

    {

        RandomNumberViewModel _randomNumberViewModel;

        public RandomNumberViewModel RandomNumberViewModel

        {

            get

            {

                _randomNumberViewModel = new RandomNumberViewModel();

                return _randomNumberViewModel;

            }

        }

    }

}

그리고 xaml MainPage에 등록하기전에 App.xaml에서 리소스를 추가시킨다.

 

<Application 

    x:Class="RanDomNumber.App"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:system="clr-namespace:System;assembly=mscorlib"

    xmlns:local="clr-namespace:RanDomNumber"

    xmlns:mpc="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"

    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation">

    <!--RootFrame points to and loads the first page of your application-->

    <Application.RootVisual>

        <phoneNavigation:PhoneApplicationFrame x:Name="RootFrame" Source="/MainPage.xaml"/>

    </Application.RootVisual>

    <!-- Resources for following the Windows Phone design guidelines -->

    <Application.Resources>

        <!--************ THEME RESOURCES ************-->        

        <local:ServiceLocator x:Key="ServiceLocator" />

        <!-- Color Resources -->

xmlns:local="clr-namespace:RanDomNumber"

<Application.Resources>

       <!--************ THEME RESOURCES ************—>        
       <local:ServiceLocator x:Key="ServiceLocator" />

이렇게 추가하면

MainPage.xaml에서

    x:Class="RanDomNumber.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"

    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"    

    DataContext="{Binding Source={StaticResource ServiceLocator},Path=RandomNumberViewModel}"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}">

DataContext="{Binding Source={StaticResource ServiceLocator},Path=RandomNumberViewModel}"

이거를 추가해주면 된다.

 

브레이크 포인터를 ServicerLocator에서 걸어서 꼭 확인해보자.. 안되면 xaml에 잘못 쓰거나 이름을 다르게 썻을 경우이다.

자이제 아까 만든 RandomNumberView.model.cs 에 소스를 붙여 넣어보자…

namespace RanDomNumber.ViewModels

{

    public class RandomNumberViewModel : ViewModelBase

    {

        public RandomNumberViewModel()

        {

        }

        private string _StartNumberValue = "30";

        private string _EndNumberValue = "100";

        private string _countNumberValue = "2";

        public string StartNumberValue

        {

            get

            {

                return _StartNumberValue;

            }

            set

            {

                if (_StartNumberValue != value)

                {

                    _StartNumberValue = value;

                }

            }            

        }

        public string EndNumberValue

        {

            get

            {

                return _EndNumberValue;

            }

            set

            {

                if (_EndNumberValue != value)

                {

                    _EndNumberValue = value;

                }                

            }

        }

        public string CountNumberValue

        {

            get

            {

                return _countNumberValue;

            }

            set

            {

                if (_countNumberValue != value)

                {

                    _countNumberValue = value;

                }                      

            }

        }        

    }

}

이렇게  modelview를 작성해서 바인딩할 값을 넣어보자.샘플로~

이제 바인딩할 컨트롤에 적용해보자…

<TextBlock Text="Start"  Grid.Row="0"/>
            <TextBox x:Name="StartNumberText"  Text="{Binding StartNumberValue}"  Grid.Row="1"  />
            <TextBlock Text="End" Grid.Row="2" />
            <TextBox x:Name="EndNumberText" Text="{Binding EndNumberValue}" Grid.Row="3" />
            <TextBlock Text="Count" Grid.Row="4" />
            <TextBox x:Name="CountNumberText"  Text="{Binding CountNumberValue}" Grid.Row="5" />

 

그러면 이렇게 보일것이다.

 

 

끝~ 다음은 커맨트 패턴~