如何从ViewModel切换MainWindow上的UserControl [英] How to switch UserControl on MainWindow from ViewModel

问题描述

大家好，



我想问你如何使用DataTemplate和ViewModel中的代码在UserControls之间切换？我有两个视图，每个视图都有一个ViewModel。一个用于管理员，一个用于员工。当管理员被记录时，它应该在员工'B'查看时加载'A'视图。



我知道最好的方法是在XAML中使用DataTemplates，但是如何确定它应该绑定哪个ViewModel？



我没有使用任何框架。没有ViewModelLocators和任何其他类或接口。



感谢您的任何建议。



最好的问候

解决方案

创建一个外部视图模型，该视图模型知道用户是管理员还是员工，然后具有根据用户类型返回视图模型的属性。



例如，假设你现在有这两个视图模型;

  public   class  AdministratorViewmodel {
  public  字符串 ID {
 获取 {返回 Guid。 NewGuid（）的ToString（）; } 
} 
} 

  public  < span class =code-keyword> class  EmployeeViewmodel {
  public   decimal 薪水{
 获取 {返回  100 0.0米; } 
} 
} 

他们将数据模板定义为;

 <   DataTemplate     DataType   =  {x：Type l：AdministratorViewmodel} >  
 <   DockPanel     LastChildFill   =  True >  
 <  标签    DockPanel.Dock   =  Top   内容  = 管理员   /  >  
 < ;  网格    DockPanel.Dock   = 底部 >  
 <   Grid.ColumnDefinitions  >  
 <   ColumnDefinition    宽度  =  *  /  &g t;  
 <   ColumnDefinition    宽度  =  *  /  >  
 <   / Grid.ColumnDefinitions  >  
 <  标签    Grid.Column   =  0   < span class =code-attribute>  内容  =  Id：  /  >  
 <  标签    Grid.Column   =  1     内容  =  {Binding Path = Id，Mode = OneWay}  /  >  
 <   / Grid  >  
 <   / DockPanel  >  
 <  < span class =code-leadattribute> / DataTemplate  >  
 <   DataTemplate     DataType   =  {x：输入l：EmployeeViewmodel} >  
 <   DockPanel     LastChildFill   = 真 >  
 <  标签    DockPanel.Dock   =   Top   内容 < span class =code-keyword> = 员工   /  >  
 < ;  网格    DockPanel.Dock   = 底部 >  
 <   Grid.ColumnDefinitions  >  
 <   ColumnDefinition    宽度  =  *  /  >  
 <  < span class =code-leadattribute> ColumnDefinition    宽度  =  *  /  >  
 <   / Grid.ColumnDefinitions  >  
 <  标签    Grid.Column   =  0     内容  = 薪水：  /  >  
 <  标签    Grid.Column   =  1     内容  =  {Binding Path = Salary，Mode = OneWay}  /  >  
 <   / Grid  >  
 <   / DockPanel  >  
 <   / DataTemplate  >  

然后你可以定义另一个viewmodel;

  public  类 MainViewmodel {
  private   readonly   bool  isAdministrator; 
 
  public  MainViewmodel（ bool  isAdministrator）{
 此 .isAdministrator = isAdministrator; 
} 
 
  public   object 内容{
 < span class =code-keyword> get  { return 是管理员？ （ object ）（ new  AdministratorViewmodel（））:(  object ）（ new  EmployeeViewmodel（））; } 
} 
} 

并设置let也有数据模板;

 <   Window.Resources  >  
 <   DataTemplate     DataType   =  {x：Type l：MainViewmodel}  >  
 <   DockPanel     LastChildFill   =  True >  
 <  标签    DockPanel.Dock   =  Top   内容  = 某种父容器  /  >  
 <   ContentPresenter     DockPanel.Dock   = 底部   内容  =  {绑定路径=内容，模式= OneWay}  /  >  
 <   / DockPa nel  >  
 <   / DataTemplate  >  

然后，根据用户类型，MainViewmodel将返回一个AdministratorViewmodel或一个EmployeeViewmodel实例，内容演示者将选择正确的数据模板;



希望这会有所帮助，

Fredrik

Hi All,

I would like to ask you how could I switch between UserControls using DataTemplate and code in ViewModel? I have Two Views and each View has a ViewModel. One is for Administrator and one for an Employee. When Admin is logged it should load 'A' View, when Employee 'B' View.

I know that the best way is to use DataTemplates in XAML but how to determine to which ViewModel it should bind?

I'm not using any framework. No ViewModelLocators and any other classes or interfaces.

Thank you for any suggestions.

Best Regards

解决方案

Create an outer viewmodel, that knows if the user is an administrator or a employee, and then have that have a property that returns a viewmodel depending on the user type.

For example, let's say you have these two viewmodels right now;

public class AdministratorViewmodel {
    public string Id {
        get { return Guid.NewGuid().ToString(); }
    }
}

public class EmployeeViewmodel {
    public decimal Salary {
        get { return 100.0m; }
    }
}

And they have their data templates defined as;

<DataTemplate DataType="{x:Type l:AdministratorViewmodel}">
    <DockPanel LastChildFill="True">
        <Label DockPanel.Dock="Top" Content="Administrator"/>
        <Grid DockPanel.Dock="Bottom">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0"  Content="Id:"/>
            <Label Grid.Column="1"  Content="{Binding Path=Id, Mode=OneWay}"/>
        </Grid>
    </DockPanel>
</DataTemplate>
<DataTemplate DataType="{x:Type l:EmployeeViewmodel}">
    <DockPanel LastChildFill="True">
        <Label DockPanel.Dock="Top" Content="Employee"/>
        <Grid DockPanel.Dock="Bottom">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0"  Content="Salary:"/>
            <Label Grid.Column="1"  Content="{Binding Path=Salary, Mode=OneWay}"/>
        </Grid>
    </DockPanel>
</DataTemplate>

Then you can define another viewmodel;

public class MainViewmodel {
    private readonly bool isAdministrator;

    public MainViewmodel(bool isAdministrator) {
        this.isAdministrator = isAdministrator;
    }

    public object Content {
        get { return isAdministrator ? (object)(new AdministratorViewmodel()) :  (object)(new EmployeeViewmodel()); }
    }
}

And set let that have a data template as well;

<Window.Resources>
    <DataTemplate DataType="{x:Type l:MainViewmodel}">
        <DockPanel LastChildFill="True">
            <Label DockPanel.Dock="Top" Content="Some sort of parent container"/>
            <ContentPresenter DockPanel.Dock="Bottom" Content="{Binding Path=Content, Mode=OneWay}"/>
        </DockPanel>
    </DataTemplate>

Then, depending on the user type the MainViewmodel will return either an AdministratorViewmodel or an EmployeeViewmodel instance, and the correct data template will be picked by the content presenter;

Hope this helps,
Fredrik

这篇关于如何从ViewModel切换MainWindow上的UserControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！