Wpf contentControl

Question

新的程序员问题：

我正在尝试创建一个简单的导航欢迎页面，类似于你在ipad上看到的页面。

我的MainWindow有一个标题栏(它不会改变)，其余的将是一个容器，它将根据事件显示不同的内容。

所以这里是我的问题，我如何绑定容器(contentcontrol)来显示其他视图，比如最初显示欢迎视图，然后如果用户点击欢迎视图中的按钮，内容控件就会显示他们选择的视图。

我当前的欢迎页面是：

<UserControl x:Class="ContentControl.Views.WelcomeView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:vm="clr-namespace:ContentControl.ViewModels"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<UserControl.DataContext>
    <vm:WelcomeViewModel />
</UserControl.DataContext>
<Grid Background="red">
    <Grid.RowDefinitions >
        <RowDefinition Height="25*" />
        <RowDefinition Height="50*"/>
        <RowDefinition Height="25*"/>
    </Grid.RowDefinitions>

    <Rectangle Grid.Row="0" Fill="Green"/>
    <DockPanel Grid.Row="1" HorizontalAlignment="Center" Background="White">
        <Button Height="50" Width="50" Margin="5" Content="DASH" Command="{Binding ViewChangedCommand}" CommandParameter="Dashboard"/>
        <Button Height="50" Width="50" Margin="5" Content="ROOM" Command="{Binding ViewChangedCommand}" CommandParameter="MeetingRoom"/>
        <Button Height="50" Width="50" Margin="5" Content="SCREEN" Command="{Binding ViewChangedCommand}" CommandParameter="Screen" />
    </DockPanel>
    <Rectangle Grid.Row="2" Fill="Blue"/>
</Grid>
</UserControl>

viewModel如下：

class WelcomeViewModel : BaseViewModel
{
    private MainWindowViewModel _mainWindowVm;
    private RelayCommand<string> _viewChangedCommand;

    public ICommand ViewChangedCommand
    {
        get { return _viewChangedCommand ?? (_viewChangedCommand = new RelayCommand<string>(OnViewChanged)); }
    }


    public event EventHandler ViewChanged;

    private void OnViewChanged(string view)
    {
        EventHandler handler = ViewChanged;
        if (handler != null) handler(view, EventArgs.Empty);
    }

    public MainWindowViewModel MainWindowVm
    {
        get { return _mainWindowVm; }
        set
        {
            _mainWindowVm = value;
            OnPropertyChanged("MainViewModel");
        }
    }

    public WelcomeViewModel()
    {
        MainWindowVm = new MainWindowViewModel();
        ViewChanged += MainWindowVm.ViewChanged;
    }
}
}

我的主窗口如下所示：

<Window x:Class="ContentControl.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:vm="clr-namespace:ContentControl.ViewModels"
    xmlns:views="clr-namespace:ContentControl.Views"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <vm:MainWindowViewModel />
</Window.DataContext>
<Window.Resources>
    <DataTemplate DataType="{x:Type vm:ScreenViewModel}">
        <views:ScreenView />
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:WelcomeViewModel}">
        <views:WelcomeView />
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:MeetingRoomViewModel}">
        <views:MeetingRoomView />
    </DataTemplate>
    <DataTemplate DataType="{x:Type vm:DashboardViewModel}">
        <views:DashboardView />
    </DataTemplate>
</Window.Resources>

<Grid>
    <StackPanel>
        <Label>This Is My Label</Label>
        <ContentControl x:Name="MainPanel" Content="{Binding Content, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
            MinHeight="200"
            MinWidth="200"
            HorizontalContentAlignment="Left" 
            VerticalContentAlignment="Center" 
            Focusable="False">
        </ContentControl>
    </StackPanel>
</Grid>
</Window>

主窗口视图模型：

class MainWindowViewModel : BaseViewModel
{
    private UserControl _content;

    public UserControl Content
    {
        get { return _content; }
        set
        {
            _content = value;
            OnPropertyChanged("Content");
        }
    }



    public void ViewChanged(object o, EventArgs e)
    {
        switch (o.ToString())
        {
            case "Welcome":
                {
                    var welcome = new WelcomeView();
                   Content = welcome;
                    break;
                }
            case "MeetingRoom":
                {
                    var meetingRoom = new MeetingRoomView();
                    Content= meetingRoom;
                    break;
                }
            case "Dashboard":
                {
                    var dashboard = new DashboardView();
                    Content = dashboard;
                    break;
                }
            case "Screen":
                {
                    var screen = new ScreenView();
                    Content = screen;
                    break;
                }
        }

        MessageBox.Show(o.ToString());
    }

    public MainWindowViewModel()

    {

    }

}
}

我如何将它们连接在一起，以便我可以将WelcomeView显示为content控件的内容，然后当我按下一个按钮时，将contentcontrol更改为所选择的内容。

再次抱歉，我是MVVM和WPF的新手，这些绑定让我头昏脑胀。

Answer 1

破折号、房间、屏幕按钮应该在MainWindow上。ViewChangedCommand应该在MainWindowViewModel上。并且内容将通过动态模板来显示。

如果您想要控件上的按钮:好的，那么让我们将按钮放在控件上，但是change content命令应该在MainWindowViewModel中。要创建这样的绑定，您应该这样做：

Command="{Binding Path=DataContext.ChangeContentCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"

在你的纽扣里