在Buttonclick上更改視圖

Question

我正在學習WPF和MVVM（或者至少我正在嘗試......）。

我創建了一個小樣本應用程序，它顯示一個帶有2個按鈕的窗口，每個應該顯示一個新的點擊視圖。所以我創建了3個UserControls（帶有2個按鈕的DecisonMaker，以及每個「clicktarget」的一個Usercontrol）。

所以我在MainWindowViewModel綁定的主窗口的CotentControl到一個名爲 「CurrentView」 屬性

代碼MainWindow.xaml的：

<Window x:Class="WpfTestApplication.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:WpfTestApplication" 
    Title="MainWindow" Height="350" Width="525"> 
<Window.DataContext> 
    <local:MainWindowViewModel /> 
</Window.DataContext> 
<Grid> 
    <ContentControl Content="{Binding CurrentView, Mode=OneWay}" /> 
</Grid> 
</Window> 

代碼MainWindowViewModel的：

class MainWindowViewModel 
{  
    private UserControl _currentView = new DecisionMaker(); 
    public UserControl CurrentView 
    { 
     get { return _currentView; } 
     set { _currentView = value; } 
    } 

    public ICommand MausCommand 
    { 
     get { return new RelayCommand(LoadMouseView); } 
    } 

    public ICommand TouchCommand 
    { 
     get { return new RelayCommand(LoadTouchView); } 
    } 

    private void LoadMouseView() 
    { 
     CurrentView = new UserControlMouse(); 
    } 

    private void LoadTouchView() 
    { 
     CurrentView = new UserControlTouch(); 
    } 
} 

最初的UserControl（DecisionMaker）按假設顯示。也調用方法LoadMouseView。但視圖不會改變。我錯過了什麼？

更新：非常感謝！我錯過了INotifyPropertyChanged接口。所有的答案都很棒，非常準確和有用！我不知道哪一個可以接受 - 我認爲這是接受「第一」答案的最公平的方法？

我接受了盲人回答，因爲它解決了問題，並幫助我更好地理解了MVVM。但是，每個人的回答都非常棒，謝謝大家！

Answer 1

如果你想要做mvvm - 那麼你應該有沒有引用你view/usercontrols在你的viewmodel。你必須實施INotifyPropertyChanged！ ps：如果你需要在你的Viewmodel中使用System.Windows命名空間 - 那麼有些地方是錯誤的。

你的情況

你需要什麼：

• 1 mainviewmodel
• 1視圖模型爲UserControlMouse
• 1視圖模型爲UserControlTouch爲UserControlMouse
• 1視圖/用戶控件
• 1視圖/用戶控件的UserControlTouch

您的mainviewmodel應該至少有2個命令來切換CurrentView的視圖和1個屬性。在您的命令中，您只需將您的CurrentView設置爲正確的viewmodel實例。至少您需要爲每個視圖模型定義正確視圖的兩個數據模板。

public object CurrentView 
{ 
    get { return _currentView; } 
    set { 
     _currentView = value; this.RaiseNotifyPropertyChanged("CurrentView");} 
} 

XAML

<Window x:Class="WpfTestApplication.MainWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="clr-namespace:WpfTestApplication" 
Title="MainWindow" Height="350" Width="525"> 
<Window.Resources> 
<DataTemplate DataType="{x:Type local:MyMouseViewModel}"> 
    <local:MyMouseUserControlView/> 
    </DataTemplate> 
<DataTemplate DataType="{x:Type local:MyTouchViewModel}"> 
    <local:MyTouchUserControlView/> 
    </DataTemplate> 
</Window.Resources> 
<Window.DataContext> 
<local:MainWindowViewModel /> 
</Window.DataContext> 
<Grid> 

<!-- here your buttons with command binding, i'm too lazy to write this. --> 

<!-- you content control --> 
<ContentControl Content="{Binding CurrentView, Mode=OneWay}" /> 
</Grid> 
</Window> 

Answer 2

該視圖模型需要實現INotifyPropertyChanged。否則，當視圖模型中的屬性發生更改時，不會通知視圖。

class MainWindowViewModel : INotifyPropertyChanged 
{ 
    private UserControl _currentView = new DecisionMaker(); 

    public UserControl CurrentView 
    { 
     get { return _currentView; } 
     set 
     { 
      _currentView = value; 
      OnPropertyChanged("CurrentView"); 
     } 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 
    private void OnPropertyChanged(string propertyName) 
    { 
     if (PropertyChanged != null) 
     { 
      PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
     } 
    } 
} 

Answer 3

您需要實現INotifyPropertyChanged上MainWindowViewModel，這樣當CurrentView屬性更改視圖通知。

Answer 4

我會做這樣的事情來選擇你想要的輸入風格，到MainWindow我已經添加了一個屬性，讓我選擇輸入模式。

public enum UserInterfaceModes 
{ 
    Mouse, 
    Touch, 
} 

public UserInterfaceModes UserInterfaceMode 
{ 
    get { return (UserInterfaceModes)GetValue(UserInterfaceModeProperty); } 
    set { SetValue(UserInterfaceModeProperty, value); } 
} 

public static readonly DependencyProperty UserInterfaceModeProperty = DependencyProperty.Register("UserInterfaceMode", typeof(UserInterfaceModes), typeof(MainWindow), new UIPropertyMetadata(UserInterfaceModes.Mouse)); 

然後，對於xaml視圖部分，您可以使用觸發器選擇正確的模板。

<Style TargetType="{x:Type local:MainWindow}"> 
    <Style.Triggers> 
     <DataTrigger Binding="{Binding UserInterfaceMode}" Value="Mouse"> 
      <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type local:MainWindow}"> 
          <Grid Background="Red"/> 
         </ControlTemplate> 
        </Setter.Value> 
      </Setter> 
     </DataTrigger> 
     <DataTrigger Binding="{Binding UserInterfaceMode}" Value="Touch"> 
      <Setter Property="Template"> 
        <Setter.Value> 
         <ControlTemplate TargetType="{x:Type local:MainWindow}"> 
          <Grid Background="Blue"/> 
         </ControlTemplate> 
        </Setter.Value> 
       </Setter> 
     </DataTrigger> 
    </Style.Triggers> 
</Style> 

Answer 5

這聽起來像你想要的行爲是相當多的，你有[TabControl][1]得到什麼 - 爲什麼不利用這個內置的控制，只是結合兩個標籤的DataContext到同一視圖模型。

這也有一個好處，你的視圖模型不會知道視圖類（我假設UserControlMouse等是用戶控件）。

注意：如果您需要視圖模型知道它是處於觸摸還是鼠標模式，這將不適用。