如何在WPF中创建多个屏幕

62o28rlo  于 2023-04-13  发布在  其他
关注(0)|答案(1)|浏览(221)

我目前正在使用MVVM构建一个WPF应用程序,这就是我想要实现的目标。

所以,基本上当用户点击一个Action项的时候,就可以看到该项的详细信息,一个项可以有多个子项,所以当用户点击子项的时候然后他们可以看到子项屏幕。他们可以点击标题上方的按钮返回到上一个屏幕。他们都应该使用相同的viewModel cs文件。我对WPF和C#非常陌生我已经做了一些研究,但我找不到任何解决方案的情况下,他们都使用相同的viewModel.我发现的是不同的视图与不同的viewModel.我感谢任何帮助.非常感谢!

sr4lhrrt

sr4lhrrt1#

您可以通过使用单个 ContentControl 并更改分配给其 Content 属性的模型来实现这一点。基本模型类如下所示:

class NavigationViewModel : BaseViewModel
{
    public NavigationViewModel PreviousView { get; set; }
    public FrameworkElement View { get; set; }
    public RelayCommand GoBackCommand { get; private set; }
    public string Name { get; private set; } 
    public RelayCommand<NavigationViewModel> ShowSubItem { get; private set; }

    public NavigationViewModel(Action<NavigationViewModel> updateCurrentView, string name)
    {
        Name = name; 
        ShowSubItem = new RelayCommand<NavigationViewModel>(view => updateCurrentView(view));
    }  
}

然后为每个视图创建特定的类
HomeViewModel(有4个操作项,我只创建了第一个)

class HomeViewModel : NavigationViewModel
{
    public ActionItem1ViewModel Action1 { get; private set; } 

    public HomeViewModel(Action<NavigationViewModel> updateCurrentView) : base(updateCurrentView, "Home")
    { 
        Action1 = new ActionItem1ViewModel(updateCurrentView)
        {
            PreviousView = this
        };
        PreviousView = null;
        View = new HomeView(); 
    }
}

和关联视图

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Content="Item #1" Command="{Binding ShowSubItem}" CommandParameter="{Binding Action1}"/>
    <Button Content="Item #2" Grid.Column="1"/>
    <Button Content="Item #3" Grid.Row="1"/>
    <Button Content="Item #4" Grid.Row="1" Grid.Column="1"/>
</Grid>

单个子项视图模型

class ActionItem1ViewModel : NavigationViewModel
{
    public Action1SubItemViewModel SubItem { get; private set; }

    public ActionItem1ViewModel(Action<NavigationViewModel> updateCurrentView) : base(updateCurrentView, "Item #1")
    {
        View = new Action1();
        SubItem = new Action1SubItemViewModel(updateCurrentView)
        {
            PreviousView = this
        };
    }
}

和关联视图

<Button Content="Item #1" Command="{Binding ShowSubItem}" CommandParameter="{Binding SubItem}"/>

和子项详细信息视图模型

class Action1SubItemViewModel : NavigationViewModel
{
    public Action1SubItemViewModel(Action<NavigationViewModel> updateCurrentView) : base(updateCurrentView, "Sub Item details")
    {
        View = new SubItem();
    }
}

和关联视图

<TextBlock Text="details"/>

主窗口如下所示

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Button Content="{Binding CurrentView.PreviousView.Name}" Command="{Binding GoBackCommand}">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Visibility" Value="Visible"/>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding CurrentView.PreviousView}" Value="{x:Null}">
                        <Setter Property="Visibility" Value="Collapsed"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
    <ContentControl Grid.Row="1" Content="{Binding View}" DataContext="{Binding CurrentView}" Margin="50"/>
</Grid>

及其视图模型

class MainViewModel : BaseViewModel
{
    private NavigationViewModel _currentView;
    public NavigationViewModel CurrentView
    {
        get => _currentView;
        set
        {
            _currentView = value;
            OnPropertyChanged();
        }
    }

    public RelayCommand GoBackCommand { get; private set; }

    public MainViewModel()
    {
        CurrentView = new HomeViewModel(UpdateCurrentView);
        GoBackCommand = new RelayCommand(() =>
        {
            CurrentView = CurrentView.PreviousView;
        });
    }

    private void UpdateCurrentView(NavigationViewModel viewModel)
    {
        CurrentView = viewModel;
    }
}

相关问题