Question

新程序员问题：

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

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

所以这是我的问题如何绑定容器（contentcontrol）以显示其他视图，即显示welcomeview，然后如果用户单击欢迎视图中的按钮，内容控件将显示他们选择的视图。

我目前的欢迎页面为：

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

我的Mainwindow如下：

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

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

Answer 1

Buttons DASH，ROOM，SCREEN应位于MainWindow上。 ViewChangedCommand应位于MainWindowViewModel上。内容将通过动态模板显示。

如果你想要控件上的按钮：好的，那么让我们把按钮放在控件上，但是更改内容命令应该在MainWindowViewModel中。要制作这样的绑定，你应该这样做：

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

按钮中的

Wpf contentControl

1 个答案: