WPF通過命令按鈕切換視圖

Question

我很新的WPF和我想要做的是通過不同的命令按鈕切換視圖..這是我當前的代碼...

基本上我有兩個按鈕在我的MainView中，SetupLan和SetupSerialPort。 爲簡單起見，我正在嘗試使SetupSerialPort首先工作。但是，當我點擊它的按鈕，命令執行，但認爲不會改變......

的App.xaml

<Application.Resources> 
    <DataTemplate DataType="{x:Type ViewModels:MainViewModel}"> 
     <Views:MainView /> 
    </DataTemplate> 
    <DataTemplate DataType="{x:Type ViewModels:SetupLanViewModel}"> 
     <Views:SetupLanView /> 
    </DataTemplate> 
    <DataTemplate DataType="{x:Type ViewModels:SetupSerialPortViewModel}"> 
     <Views:SetupSerialPortView /> 
    </DataTemplate> 
</Application.Resources> 

MainWindow.xaml

<Grid> 
    <ContentControl Content="{Binding}" /> 
</Grid> 

MainWindow.xaml.cs

public MainWindow() 
{ 
    InitializeComponent(); 
    this.DataContext = new MainViewModel(); 
} 

MainViewModel

public DisplaySetupSerialPortCommand SetupSerialPort 
{ 
    get; set; 
} 

public MainViewModel() 
{ 
    SetupSerialPort = new DisplaySetupSerialPortCommand(this); 
} 

的MainView

<StackPanel> 
    <Button Height="50" Width="150" HorizontalAlignment="Left"Command="{Binding SetupLan}">Lan</Button> 
    <Button Height="50" Width="150" HorizontalAlignment="Left" Command="{Binding SetupSerialPort}">Serial Port</Button> 
</StackPanel> 

DisplaySetupSerialPortCommand

class DisplaySetupSerialPortCommand : ICommand 
{ 
    private BaseViewModel _baseViewModel; 

    public event EventHandler CanExecuteChanged 
    { 
     add { CommandManager.RequerySuggested += value; } 
     remove { CommandManager.RequerySuggested -= value; } 
    } 

    public DisplaySetupSerialPortCommand(BaseViewModel baseViewModel) 
    { 
     _baseViewModel = baseViewModel; 
    } 

    public bool CanExecute(object parameter) 
    { 
     return true; 
    } 

    public void Execute(object parameter) 
    { 
     _baseViewModel.ViewModel = new SetupSerialPortViewModel(); 
    } 
} 

Answer 1

有幾件事情。

你command沒有做任何事情，它只是簡單地創建一個ViewModel。你需要添加額外的邏輯才能工作。

如果你想將DataTemplate換成不同的視圖，你需要實現某種類型的Trigger。

首先，更新您的DataTemplates以擁有關聯密鑰。

<Application.Resources> 
    <DataTemplate DataType="{x:Type ViewModels:MainViewModel}" x:Key="MainView"> 
     <Views:MainView /> 
    </DataTemplate> 
    <DataTemplate DataType="{x:Type ViewModels:SetupLanViewModel}" x:Key="Lan"> 
     <Views:SetupLanView /> 
    </DataTemplate> 
    <DataTemplate DataType="{x:Type ViewModels:SetupSerialPortViewModel}" x:Key="SerialPort"> 
     <Views:SetupSerialPortView /> 
    </DataTemplate> 
</Application.Resources> 

通過添加一個鍵，它將允許您引用每一個，在何處/何時需要。

接下來，在您的MainWindow.xaml之內，這就是Triggers發生的位置。 將您的ContentControl更新爲Trigger，並根據某些條件將其切換爲DataTemplate。在這種情況下，我創建的條件稱爲V​​iewType。

<Grid> 
    <ContentControl Content="{Binding}"> 
     <ContentControl.Style> 
      <Style TargetType="ContentControl"> 
       <Setter Property="ContentTemplate" Value="{StaticResource MainView}" /> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding ViewType}" Value="SerialPort"> 
         <Setter Property="ContentTemplate" Value="{StaticResource SerialPort}" /> 
        </DataTrigger> 
        <DataTrigger Binding="{Binding ViewType}" Value="Lan"> 
         <Setter Property="ContentTemplate" Value="{StaticResource Lan}" /> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </ContentControl.Style> 
    </ContentControl> 
</Grid> 

最後，你需要有一個ViewType屬性，並設置基於已執行的特定命令該屬性。添加到ViewType屬性您的BaseViewModel，因爲該命令有一個對此的引用。

public string ViewType 
{ 
    get { return _viewType; } 
    set 
    { 
     _viewType = value; 
     RaisePropertyChanged(); 
    } 
} 

現在，只要單擊該命令就可以更改ViewType。

public void Execute(object parameter) 
{ 
    _baseViewModel.ViewType = "SerialPort"; 
    _baseViewModel.ViewModel = new SetupSerialPortViewModel(); 
} 

注意：我用一個字符串僅僅是用於演示目的ViewType類型。您可能想要使用枚舉。