이 페이지가 유용했습니까?
이 콘텐츠에 대한 여러분의 의견은 중요합니다. 의견을 알려주십시오.
추가 의견
1500자 남음
방법: Windows Phone의 페이지 상태 유지 및 복원

방법: Windows Phone의 페이지 상태 유지 및 복원

2012-02-09

Windows Phone 7.5 에서는 사용자가 응용프로그램을 벗어난 부분을 전방 탐색할 때 일반적으로 응용프로그램이 유휴 상태로 전환됩니다. 유휴 상태에서는 응용프로그램 코드 실행이 중지되지만 응용프로그램이 메모리에 그대로 유지됩니다. 응용프로그램이 유휴 상태이고 사용자가 응용프로그램으로 돌아가면 응용프로그램이 계속되고 응용프로그램의 각 페이지 상태는 사용자가 다른 부분을 탐색하기 전의 상태로 자동 복원됩니다.

하지만 사용자가 응용프로그램을 벗어난 부분을 탐색한 후 응용프로그램이 삭제 표식을 지정할 수도 있습니다. 이 경우 응용프로그램이 메모리에 유지되지 않지만 응용프로그램에 대한 일부 정보가 저장됩니다. 이 항목에서 가장 중요한 것은 PhoneApplicationPage 개체의 State 사전이 저장된다는 것입니다. 사용자가 삭제 표식이 지정된 응용프로그램으로 돌아가는 경우 사용자가 다른 부분을 탐색할 때와 동일한 상태로 표시되도록 응용프로그램이 State 사전에 저장된 데이터를 사용하여 페이지 상태를 복원해야 합니다. 이 과정은 주로 페이지에 있는 컨트롤의 값을 응용프로그램에 삭제 표식이 지정되기 전의 마지막 값으로 설정하는 작업으로 이루어집니다.

이 항목에서는 데이터 바인딩을 사용하여 페이지 사용자 인터페이스의 상태를 쉽게 유지하고 복원하는 방법을 보여 줍니다. 삭제 표식 및 응용프로그램이 수명 주기 동안 상태를 관리하는 방법에 대한 자세한 내용은 Windows Phone의 실행 모델 개요를 참조하십시오.

다음 단계는 응용프로그램을 비활성화한 후 다시 활성화할 때 여러 컨트롤의 상태를 저장 및 복원하는 응용프로그램을 만드는 과정을 안내합니다.

사용자 인터페이스의 상태를 유지하는 응용프로그램을 만들려면

  1. Visual Studio 에서 새로운 Windows Phone 응용프로그램 프로젝트를 만듭니다. 이 템플릿은 Windows Phone용 Silverlight 카테고리에 있습니다.

  2. MainPage.xaml에 몇 개의 기본 컨트롤을 추가합니다. 이 예제에서는 TextBox, Checkbox, SliderRadioButton 컨트롤이 사용됩니다. 더 복잡한 컨트롤은 이후 단원에서 설명합니다.

    아래 XAML 코드에서 각 컨트롤에는 Binding 키워드를 사용하는 속성이 있습니다. 이 속성은 응용프로그램의 수명 주기 동안 유지되고 복원될 컨트롤의 속성입니다. TextBox 컨트롤의 경우 Text 속성이 바인딩됩니다. Slider 컨트롤의 경우 Value 속성이 바인딩됩니다. RadioButtonCheckBox 컨트롤의 경우 IsChecked 속성이 바인딩됩니다. Binding 키워드 뒤의 단어(예: "Slider1Value")는 컨트롤이 바인딩된 필드의 이름입니다. 이러한 필드는 이 연습의 다음 단계에서 정의됩니다. 바인딩 식 ""Mode=TwoWay""의 최종 부분은 바인딩이 양방향이어야 함을 나타냅니다. 즉, 컨트롤이 바인딩된 필드가 변경되면 컨트롤이 업데이트됩니다. 컨트롤의 값이 변경되면 바인딩된 필드가 업데이트됩니다.

    MainPage.xaml 파일에서 "ContentPanel"이라는 Grid 요소에 다음 XAML 코드를 넣습니다.

    <TextBox Text="{Binding TextBox1Text, Mode=TwoWay}" Height="72" HorizontalAlignment="Left" Margin="20,20,0,0" Name="textBox1" VerticalAlignment="Top" Width="440" />
    <CheckBox IsChecked="{Binding CheckBox1IsChecked, Mode=TwoWay}" Content="CheckBox" Height="71" Name="checkBox1" Margin="20,100,0,0"  VerticalAlignment="Top"/>
    <Slider Value="{Binding Slider1Value, Mode=TwoWay}" Height="84" Name="slider1" Width="440" Margin="20,180,0,0"  VerticalAlignment="Top"/>
    <RadioButton IsChecked="{Binding RadioButton1IsChecked, Mode=TwoWay}" Content="RadioButton 1" Height="71" Name="radioButton1" GroupName="RadioButtonGroup"  Margin="20,260,0,0" VerticalAlignment="Top"/>
    <RadioButton IsChecked="{Binding RadioButton1IsChecked, Mode=TwoWay}" Content="RadioButton 2" Height="71" Name="radioButton2" GroupName="RadioButtonGroup"  Margin="20,340,0,0" VerticalAlignment="Top"/>
    
    
  3. XAML에 정의된 컨트롤이 바인딩되는 필드를 포함할 클래스를 추가합니다. Visual Studio 의 프로젝트 메뉴에서 클래스 추가…를 선택합니다. 추가할 항목 목록에서 클래스를 선택하고 이름 필드에 ViewModel.cs를 입력합니다. 추가를 클릭하여 프로젝트에 클래스를 추가합니다.

  4. 파일의 맨 위에 각각 직렬화 및 데이터 바인딩을 지원하는 Serialization 및 ComponentModel 네임스페이스에 대해 using 지시문을 추가합니다.

    using System.Runtime.Serialization;
    using System.ComponentModel;
    
    
  5. ViewModel.cs 파일에서 클래스 정의 앞에 DataContract 특성을 추가합니다. 이 특성은 DataContractSerializer가 직렬화 및 역직렬화 작업에 이 클래스를 사용함을 나타냅니다. 이 클래스와 마찬가지로 PhoneApplicationPageState 속성에 저장되는 모든 데이터는 데이터 계약에서 직렬 가능해야 합니다. 이 유형의 직렬화에 대한 자세한 내용은 데이터 계약 사용을 참조하십시오.

    또한 클래스가 INotifyPropertyChanged 인터페이스를 구현하도록 선언해야 합니다. 이 인터페이스는 바인딩된 데이터가 변경될 경우 사용자 인터페이스 컨트롤이 자동으로 값을 변경할 수 있게 합니다.

    [DataContract]
    public class ViewModel : INotifyPropertyChanged
    {
    }
    
    
  6. 바인딩된 각 컨트롤 속성에 대한 클래스에 private 멤버 변수를 추가합니다.

    private string _textBox1Text;
    private bool _checkBox1IsChecked;
    private bool _radioButton1IsChecked;
    private bool _radioButton2IsChecked;
    private double _slider1Value;
    
    
  7. INotifyPropertyChanged 기능을 클래스에 추가합니다. 여기에는 PropertyChanged 이벤트 추가 및 PropertyChanged 이벤트를 발생시키는 NotifyPropertyChanged 메서드 구현이 포함됩니다.

    public event PropertyChangedEventHandler PropertyChanged;
    
    private void NotifyPropertyChanged(string propertyName)
    {
      if (null != PropertyChanged)
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }
    
    
  8. 바인딩된 각 컨트롤 속성에 대해 public 속성을 추가합니다. 이러한 속성 이름은 XAML 파일의 Binding 식에서 사용되는 이름입니다. 각 속성에 대해 get 접근자는 단순히 해당 private 멤버 변수의 값을 반환합니다. put 접근자는 멤버 변수의 값을 설정하고 NotifyPropertyChanged를 호출하여 실제로 해당 컨트롤에 값을 업데이트하도록 알립니다. 또한 각 속성에 DataMember 특성으로 레이블을 지정하여 직렬 변환기에 속성을 직렬화하도록 알립니다.

    ViewModel 클래스 정의 안에 다음 코드를 붙여 넣습니다.

    [DataMember]
    public string TextBox1Text
    {
      get { return _textBox1Text; }
      set
      {
        _textBox1Text = value;
        NotifyPropertyChanged("TextBox1Text");
      }
    }
    
    [DataMember]
    public bool CheckBox1IsChecked
    {
      get { return _checkBox1IsChecked; }
      set
      {
        _checkBox1IsChecked = value;
        NotifyPropertyChanged("CheckBox1IsChecked");
      }
    }
    
    [DataMember]
    public double Slider1Value
    {
      get { return _slider1Value; }
      set
      {
        _slider1Value = value;
        NotifyPropertyChanged("Slider1Value");
      }
    }
    
    [DataMember]
    public bool RadioButton1IsChecked
    {
      get { return _radioButton1IsChecked; }
      set
      {
        _radioButton1IsChecked = value;
        NotifyPropertyChanged("RadioButton1IsChecked");
      }
    }
    
    [DataMember]
    public bool RadioButton2IsChecked
    {
      get { return _radioButton2IsChecked; }
      set
      {
        _radioButton2IsChecked = value;
        NotifyPropertyChanged("RadioButton2IsChecked");
      }
    }
    
    
  9. UI 상태를 유지하는 최종 단계는 코드 숨김 페이지에서 페이지 상태의 변경 사항을 처리하는 것입니다. MainPage.xaml.cs의 MainPage 클래스 정의에 다음 멤버 변수를 추가합니다. 첫 번째 변수는 ViewModel 형식입니다. 이 클래스는 이전 단계에서 만든 클래스이며 UI 컨트롤의 값을 저장합니다. 두 번째 변수는 _isNewPageInstance라는 bool입니다. 나중에 이 변수를 사용하여 페이지가 새 인스턴스인지(예: 응용프로그램이 처음 시작되었거나 삭제 표식 지정 후 다시 시작된 경우), 아니면 페이지가 기존 인스턴스인지(예: 사용자가 응용프로그램 내에서 페이지로 돌아가는 경우) 확인합니다.

    public partial class MainPage : PhoneApplicationPage
    {
      ViewModel _viewModel;
      bool _isNewPageInstance = false;
    
    
  10. 페이지 생성자에서 _isNewPageInstancetrue로 설정합니다.

    // Constructor
    public MainPage()
    {
      InitializeComponent();
    
      _isNewPageInstance = true;      
    }
    
    
  11. 기본 Page 클래스에서 상속받은 OnNavigatedFrom(NavigationEventArgs) 메서드를 재정의합니다. 이 메서드는 사용자가 페이지를 벗어난 부분을 탐색할 때마다 호출됩니다. 이 메서드에서는 UI 컨트롤의 값을 포함하는 ViewModel 개체가 페이지의 State 사전에 저장됩니다. State 사전은 응용프로그램에 삭제 표식이 지정될 때 유지되므로 응용프로그램을 다시 활성화할 때 이 사전을 사용하여 상태를 복원할 수 있습니다. 뒤로 탐색하는 경우 탐색이 완료되면 페이지가 삭제되므로 상태를 저장할 필요가 없습니다. 다음 메서드 정의를 MainPage 클래스 정의에 복사합니다.

    protected override void OnNavigatedFrom(System.Windows.Navigation.NavigationEventArgs e)
    {
      // If this is a back navigation, the page will be discarded, so there
      // is no need to save state.
      if (e.NavigationMode != System.Windows.Navigation.NavigationMode.Back)
      {
        // Save the ViewModel variable in the page's State dictionary.
        State["ViewModel"] = _viewModel;
      }
    }
    
    
  12. 최종적으로, OnNavigatedTo(NavigationEventArgs) 메서드를 재정의합니다. 이 메서드는 사용자가 페이지로 이동할 때마다 호출됩니다. 여기에는 응용프로그램이 처음 시작되고 페이지가 처음 표시되는 경우, 응용프로그램에 삭제 표식이 지정되고 사용자가 응용프로그램으로 돌아가는 경우, 사용자가 단일 인스턴스 내에서 페이지를 탐색하는 경우 등이 포함됩니다.

    먼저 _isNewPageInstancetrue인지 확인합니다. 아닌 경우 페이지 인스턴스가 이미 메모리에 있습니다. 따라서 UI 상태가 유지되며 컨트롤 값을 복원할 필요가 없습니다. 새 페이지 인스턴스인 경우 UI 값을 포함하는 ViewModel 개체가 페이지의 State 사전에 저장되어 있는지 확인합니다. 저장되어 있는 경우 _viewModel 멤버 변수에 저장된 개체를 할당합니다. 그렇지 않으면 저장된 상태가 없으며 ViewModel 인스턴스를 새로 만들어야 합니다. 페이지에 대한 DataContextViewModel 개체로 설정합니다. 그러면 모든 UI 컨트롤이 개체에 저장된 값을 표시하도록 업데이트됩니다. 최종적으로, 이 메서드는 _isNewPageInstance 변수를 false로 설정하여 이 페이지가 메모리에 있는 동안 사용자가 페이지로 돌아갈 경우 UI가 OnNavigatedTo에서 복원되지 않도록 합니다.

    protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
    {
      // If _isNewPageInstance is true, the page constuctor has been called, so
      // state may need to be restored.
      if (_isNewPageInstance)
      {
        if (_viewModel == null)
        {
          if (State.Count > 0)
          {
            _viewModel = (ViewModel)State["ViewModel"];
          }
          else
          {
            _viewModel = new ViewModel();
          }
        }
        DataContext = _viewModel;
      }
      // Set _isNewPageInstance to false. If the user navigates back to this page
      // and it has remained in memory, this value will continue to be false.
      _isNewPageInstance = false;
    }
    
    

Windows Phone 7.5 에서는 사용자가 응용프로그램을 벗어난 부분을 탐색할 경우 포그라운드 응용프로그램을 원활하게 실행할 수 있는 메모리가 충분하기만 하면 응용프로그램이 유휴 상태로 전환됩니다. 응용프로그램을 유휴 상태로 전환한 후 복원하면 UI 상태가 자동으로 유지됩니다. 중단 후에 페이지 상태가 제대로 복원되는지 확인하려면 디버거에서 자동 중단을 사용하도록 설정해야 합니다.

프로젝트 메뉴에서 [응용프로그램 이름] 속성…을 선택하거나 솔루션 탐색기에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 속성을 선택하여 프로젝트 속성 대화 상자를 엽니다. 디버그 탭에서 디버깅하는 동안 비활성화 시 삭제 표식 레이블이 붙은 확인란을 선택합니다. 이 확인란을 선택하면 응용프로그램 디버깅을 시작하고, 시작 버튼을 클릭하여 응용프로그램에 즉시 삭제 표식이 지정되도록 한 다음 뒤로 버튼을 눌러 응용프로그램으로 돌아가서 페이지 상태가 올바르게 저장 및 복원되었는지 확인할 수 있습니다.

참고참고:

XNA Framework 응용프로그램의 경우 디버깅하는 동안 비활성화 시 삭제 표식 확인란이 프로젝트 속성 대화 상자의 XNA Game Studio 탭에 있습니다.

Microsoft는 MSDN 웹 사이트에 대한 귀하의 의견을 이해하기 위해 온라인 설문 조사를 진행하고 있습니다. 참여하도록 선택하시면 MSDN 웹 사이트에서 나가실 때 온라인 설문 조사가 표시됩니다.

참여하시겠습니까?
표시:
© 2015 Microsoft