WPF通过命令按钮切换视图

时间:2016-04-20 14:19:03

标签: wpf xaml

我对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();
    }
}

1 个答案:

答案 0 :(得分: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属性,并根据已执行的特定命令设置该属性。将BaseViewModel添加到ViewType属性,因为该命令具有对此的引用。

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

现在,只要单击该命令,就可以更改ViewType。

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

注意:我使用字符串作为ViewType类型仅用于演示目的。你可能想要使用枚举。