'command patten'에 해당되는 글 1건

  1. 2010.06.15 [wp7] mvvm 쓰는법 정리
Windows Phone 72010. 6. 15. 10:44

 

일단 설명은 나중에 하고 설명부터 하자….(레퍼런스에 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" />





 



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



 





 



끝~ 다음은 커맨트 패턴~

Posted by 동동(이재동)