时间戳

首页 > 解决方案 > 如何通过主视图模型将 UserControl 内容更改为另一个 UserControl。如何在内容之间导航

c# - 如何通过主视图模型将 UserControl 内容更改为另一个 UserControl。如何在内容之间导航

问题描述

我有一个带有导航侧栏的主窗口和一个用户控件，其中我显示了 3 个视图（默认，view1，view2）。在主视图模型（称为 AppVM）中，我将 contentcontrol 初始化为默认视图，该视图有一个按钮可以前进到 view1（除了导航侧边栏）。我在 AppVM 中有命令可以切换到三个视图中的任何一个。View1 然后有另一个按钮，它应该移动到 view2（使用主视图模型中的命令）。但是，每当我按下 view1 中的按钮（移动到 view2）时，显示都不会改变。奇特的是，在调试时，按下view1中的按钮时，内容控件绑定的变量设置为默认视图，而不是当前视图view1。

我认为我设置命令的方式是创建内容控件绑定变量的新实例，但我无法弄清楚如何让它使用相同的实例而不是一次又一次地打开新实例。

主视图模型 (AppVM)

  public class AppVM : ObservableObject
    {

        //Create a property that controls current view
        private object _currentView;
        public object CurrentView
        {
            get { return _currentView; }
            private set
            {
                OnPropertyChanged(ref _currentView, value);
            }
        }

        private string _textboxText;

        public string TextboxText
        {
            get { return _textboxText; }
            set
            {
                OnPropertyChanged(ref _textboxText, value);
            }
        }


        //Instantiate the relaycommands, we will need to instantiate relaycommand objects for every command we need to perform. 
        //This means that we will need to do this for preses of all buttons
        public RelayCommand View1ButtonCommand { get; private set; }
        public RelayCommand View2ButtonCommand { get; private set; }

        public RelayCommand DefaultCommand { get; private set; }



        public AppVM()
        {

            //CurrentView = this;
            CurrentView = new DefaultVM();
            View1ButtonCommand = new RelayCommand(ShowView1, AlwaysTrueCommand);
            View2ButtonCommand = new RelayCommand(ShowView2, AlwaysTrueCommand);
            DefaultCommand = new RelayCommand(ShowDefault, AlwaysTrueCommand);


        }

        public void ShowDefault(object dummy)
        {
          //  CurrentView = null;
            CurrentView = new DefaultVM();

        }

        public void ShowView1(object dummy)
        {
            //CurrentView = null;
            CurrentView =  new View1(dummy as string);

        }

        public void ShowView2(object dummy)
        {
            // CurrentView = null;
            CurrentView =  new View2();
        }


        public bool AlwaysTrueCommand(object dummy)
        {
            return true;
        }       
    }

查看 1 个虚拟机 

public class View1VM : ObservableObject     {

        public InfoClass View1InfoClass { get; set; }



        public View1VM()        {           View1InfoClass = new InfoClass //Apparently I  need to instantiate and initialize this to activate binding          {

                FirstName =  "Abbas",
                //FirstName = passedInforClass,
                LastName = "Syed",
                Number = 12

            };


        }   }

view1.xaml 中的命令

<UserControl.Resources>
        <vm:AppVM x:Name="AppVMinView1" x:Key="AppVMinView1"></vm:AppVM>
    </UserControl.Resources>
    <UserControl.DataContext>
        <vm:View1VM></vm:View1VM>
    </UserControl.DataContext>
    <Grid Background="Aqua">
        <StackPanel Margin="100">
            <TextBlock Text="First Name"/>
            <TextBox x:Name="firstNameTextBoxView1" Text="{Binding View1InfoClass.FirstName, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"></TextBox>
            <TextBlock Text="Last Name"/>
            <TextBox x:Name="lastNameTextBoxView1" Text="{Binding View1InfoClass.LastName, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"></TextBox>
            <TextBlock Text="Random Useless Number" ></TextBlock>
            <TextBox x:Name="randomUselessNumberView1" Text="{Binding View1InfoClass.Number, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"></TextBox>

            <TextBlock Text="First Name Entered"></TextBlock>
            <TextBlock Text="{Binding View1InfoClass.FirstName}"></TextBlock>
            <TextBlock Text="Last Name Entered" ></TextBlock>
            <TextBlock Text="{Binding View1InfoClass.LastName}"></TextBlock>
            <TextBlock Text="Random Useless Number Entered"></TextBlock>
            <TextBlock Text="{Binding View1InfoClass.Number}"></TextBlock>

            <Button DataContext="{DynamicResource AppVMinView1}" Content="Go to view2" Height="20" Width="70" Command="{Binding View2ButtonCommand}" />



        </StackPanel>
    </Grid>

根据我所阅读的内容（此处和互联网上），我需要将视图设为单例，我尝试这样做的方式是声明 view2 的静态属性，并使用私有设置器初始化为新的 view2，但这并没有削减它。对于这方面的任何帮助，我将不胜感激。

我还应该补充一点，即使 view1 中更改为 view2 的按钮不起作用，侧面导航栏按钮也可以正常工作。

标签： c#wpfxamluser-controls

解决方案

看起来您正在创建多个AppVm.
导航栏的按钮View1和按钮显然没有绑定到同一个AppVm.
同样适用于CurrentView属性：您的内容主机绑定到不同的实例，即不同的属性值引用，而不是CurrentView您在View1. 因此CurrentView，从内部更改View1对内容主机没有影响 --> 视图永远不会改变。
确保您始终在相同的上下文中引用相同的（共享）实例。

根据你的 UI 结构，有多种方法可以实现这一点。创建视图模型类的 Singleton 是迄今为止最糟糕的选择。应该并且总是可以避免单例。

最简单的解决方案是将视图模型声明为 App,xaml 中的资源ResourceDictionary：


此文件中定义的App.xamlStaticResource资源可通过标记扩展资源字典查找在任何 XAML 上下文中全局使用。

<Application>
  <Application.Resources>
    <AppVM x:Key="AppVMinView1" />
  </Application.Resources>
</Application>

在任何 XAML 文件（应用程序范围）内：

<UserControl>
  <UserControl.DataContext>
    <View1VM />
  </UserControl.DataContext>

  <!-- Reference resources defined in App.xaml, using the StaticResource markup extension -->
  <Button Command="{Binding Source={StaticResource AppVMinView1}, Path=View2ButtonCommand}" />
</UserControl>

推荐解决方案

看起来您正在视图模型中创建视图或页面的实例（我假设new View1(dummy as string)创建了一个控件，因为视图模型名为View1VM）。仅使用视图模型也可以以更优雅的方式解决您的问题。

使用页面视图模型的单个实例非常重要，以防您不想在切换视图时丢失状态（和数据）。（不要将此与单例混淆，单例是一种设计模式，它通过将单个实例分配给属性来确保全局static使用单个实例。单例模式通常被认为是一种反模式。）

这是一个关于如何显示和导航页面的简短但完整的示例：

应用VM.cs

// Main view model
class AppVM : ObservableObject     
{
  // Create a property that controls current view
  private ObservableObject _currentView;
  public ObservableObject CurrentView
  {
    get => _currentView; 
    private set => OnPropertyChanged(ref _currentView, value);
  }

  private Dictionary<string, ObservableObject> Pages { get; set; }

  public AppVM()
  {
    // Create and store the pages, 
    // so that the same instances can be reused. 
    // All pages must extend ObservableObject (or any other common base type).
    this.Pages = new Dictionary<string, ObservableObject>()
    {
      { nameof(DefaultVM), new DefaultVM() },
      { nameof(View1VM), new View1VM() },
      { nameof(View2VM), new View2VM() },
    };    

    // Initialize first page
    this.CurrentView = this.Pages[nameof(DefaultVM)];

    this.DefaultCommand  = new RelayCommand(param => this.CurrentView = this.Pages[nameof(DefaultVM)], param => true);
    this.View1ButtonCommand = new RelayCommand(param => this.CurrentView = this.Pages[nameof(View1VM)], param => true);
    this.View2ButtonCommand = new RelayCommand(param => this.CurrentView = this.Pages[nameof(View2VM)], param => true);
  }  
}

View1.xaml

<!-- DataContext is inherited from the surrounding DataTemplate and is the corresponding page view model -->
<UserControl>    
  <StackPanel>
    <TextBox Text="{Binding View1InfoClass.FirstName}" />

    <!-- 
      Bind to the command of the same view model instance,
      which is the DataContext of the content host 
    -->
    <Button Content="Show View2"
            Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=MainWindow}, Path=DataContext.View2ButtonCommand}" />
  </StackPanel>
</UserControl>

主窗口.xaml

<Window>
  <Window.DataContext>
    <AppVM />
  </Window.DataContext>
  <Window.Resources>

    <!-- Define the views as implicit (keyless) DataTemplate -->
    <DataTemplate DataType="{x:Type DefaultVM}">
      <DefaultView />
    </DataTemplate>

    <DataTemplate DataType="{x:Type View1VM}">
      <View1 />
    </DataTemplate>

    <DataTemplate DataType="{x:Type View2VM}">
      <View2 />
    </DataTemplate>
  </Window.Resources>

  <!-- 
    Host of the pages.
    The implicit DataTemplates will apply automatically 
    and show the control that maps to the current CurrentView view model
  -->
  <ContentPresenter Content="{Binding CurrentView}" />
</Window>

推荐阅读