2011-05-10 5 views
2

ContentControls에로드해야하는 여러 뷰가있는 mvvm (model view viewmodel) 실버 라이트 응용 프로그램이 있습니다 (모두 표현식 블렌드로 만들었습니다). 내가 어떻게 해야할지 모르겠는데, 예를 들어, 다른 콘텐츠 컨트롤에있는 다른보기에서 버튼을 클릭하여 하나의 콘텐츠 컨트롤에 하나의보기 (사용자 정의 컨트롤)를로드하는 것입니다. 쉽게 문제를 이해하기 위해, 나는이 유사한 무언가를 할 필요가 : 자식 1과 자식 2가 통화 자식 1 또는 전화 자식 2를 클릭하여 theirown 콘텐츠 컨트롤에로드 할 생각되는 차이가ContentControl에 뷰로드 및 단추를 클릭하여 속성 변경

http://www.codeproject.com/KB/silverlight/BlendableVMCom.aspx

버튼.

및 예가 이해 될 것이다. 미리 감사드립니다!

+0

을 확인하십시오. Caliburn Micro, 스크린 및 컨덕터를 확인하십시오. –

답변

3

이 예제는 매우 간단하지만 이제 응용 프로그램에 맞게 조정하는 방법을 생각합니다.

주 화면 :

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="*" /> 
     <ColumnDefinition Width="*" /> 
    </Grid.ColumnDefinitions> 
    <Border x:Name="commandsView"> 
     <Button Content="Call view 1" Command="{Binding CallView1Command}" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5" /> 
    </Border> 
    <Border x:Name="displayedView" Grid.Column="1"> 
     <ContentControl Content="{Binding CurrentView}" /> 
    </Border> 
</Grid> 

I하지 생성 분리 여기서 사용자 컨트롤보기로서, 실시간보기로 대체 될 수있는 단지 테두리되어있다.

뒤에 코드에서 다른 뷰

다른보기 모델 :

this.commandsView.DataContext = new CommandsViewModel(); 
this.displayedView.DataContext = new DisplayedViewModel(); 

먼저보기 모델은 다른 뷰 모델에 메시지를 전송 명령 conains :

public class CommandsViewModel 
{ 
    public CommandsViewModel() 
    { 
     this.CallView1Command = new RelayCommand(() => 
      Messenger.Default.Send<View1Message>(new View1Message())); 
    } 

    public RelayCommand CallView1Command { get; set; } 

} 

public class View1Message : MessageBase 
{ 

} 

이 예 작동하려면를 다운로드 MVVM Light library.

번째 뷰 모델이 메시지를 수신하고, 그 속성에 대한 도면 작성 다시

public class DisplayedViewModel : ViewModelBase 
{ 
    public DisplayedViewModel() 
    { 
     Messenger.Default.Register<View1Message>(this, obj => 
      this.CurrentView = new TextBlock { Text = "Pressed the button 1 and now here is the view 1" }); 
    } 

    private object currentView; 

    public object CurrentView 
    { 
     get { return currentView; } 
     set 
     { 
      currentView = value; 
      RaisePropertyChanged("CurrentView"); 
     } 
    } 
} 

를 대신 컨트롤 CLR 오브젝트를 사용 XAML에서 데이터 템플릿을 적용하는 것이 가능하지만 없을 것 모든 결과 코드를 제공하기에 충분한 공간.

그래서 모든 것이 주요 아이디어는 어떤 종류의 이벤트 수집기입니다.이 경우는 Messenger 클래스입니다. 당신이 다른 무언가를 위해 DelegateCommand 클래스를 변경해야이 예에서는

public partial class MainPage : UserControl 
{ 
    public MainPage() 
    { 
     InitializeComponent(); 

     var events = new GlobalEvents(); 
     this.commandsView.DataContext = new CommandsViewModel(events); 
     this.displayedView.DataContext = new DisplayedViewModel(events); 
    } 
} 

public class GlobalEvents 
{ 
    public event EventHandler View1Event = delegate { }; 

    public void RaiseView1Event() 
    { 
     View1Event(this, EventArgs.Empty); 
    } 
} 

/// <summary> 
/// Commands which call different views 
/// </summary> 
public class CommandsViewModel 
{ 
    public CommandsViewModel(GlobalEvents globalEvents) 
    { 
     this.CallView1Command = new DelegateCommand(globalEvents.RaiseView1Event); 
    } 

    public DelegateCommand CallView1Command { get; set; } 
} 

/// <summary> 
/// Model where views are changed and then displayed 
/// </summary> 
public class DisplayedViewModel : INotifyPropertyChanged 
{ 
    public DisplayedViewModel(GlobalEvents globalEvents) 
    { 
     globalEvents.View1Event += (s,e) => 
      this.CurrentView = new TextBlock { Text = "Pressed the button 1 and now here is the view 1" }; 
    } 

    private object currentView; 

    public object CurrentView 
    { 
     get { return currentView; } 
     set 
     { 
      currentView = value; 
      RaisePropertyChanged("CurrentView"); 
     } 
    } 


    public event PropertyChangedEventHandler PropertyChanged; 

    protected void RaisePropertyChanged(string propertyName) 
    { 
     if (this.PropertyChanged != null) 
      this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
    } 

} 

:

MVVM 빛이 없다면 그것은 더 많은 코드가 필요합니다. 다른 모든 코드가 모두에게 적용됩니다.

+0

예제 vorrtex 주셔서 감사하지만 모든 mvvm 툴킷을 사용하지 않고이 작업을 수행해야합니다. 즉, 모든 mvvm을 직접 코딩해야한다는 의미입니다. 나는 또한 귀하의 예제를 조금 혼란스럽게 생각합니다. "Messenger.Default.Register " –

+0

@deckard cain이 무엇인지 알지 못합니다. 'Messenger'는 MVVM Light 툴킷의 클래스입니다. 어쨌든 나는 사용자 정의 프레임 워크없이 같은 기능을 구현하는 코드를 추가했다. – vorrtex

+0

@vortex 다시 한번 감사 드리지만, 내용에 뷰를로드하는 위치를 알 수는 없습니다. –