Wpf 内容控制

Question

新程序员问题:

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

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

所以这是我的问题，如何绑定(bind)容器(内容控件)以显示其他 View ，即最初显示欢迎 View ，然后如果用户从欢迎 View 单击按钮，内容控件将显示他们选择的 View 。

我目前的欢迎页面为:

<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>

View 模型如下:

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>

主窗口 View 模型:

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 显示为 contentcontrol 的内容，然后当我按下按钮时，将 ContentControl 更改为所选内容。

再次抱歉，我是 MVVM 和 WPF 的新手，这些绑定(bind)让我很头疼。

Answer 1

DASH、ROOM、SCREEN 按钮应位于 MainWindow 上。 ViewChangedCommand 应该在 MainWindowViewModel 上。内容将通过动态模板显示。

如果您想要控件上的按钮:
好的，那么我们把按钮放在控件上，但是更改内容命令应该在 MainWindowViewModel 中。要进行这样的绑定(bind)，您应该执行以下操作:

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

在您的按钮中