单个视图模型的多个视图

本文关键字：视图 模型 单个 | 更新日期: 2023-09-27 18:36:30

Issue

我的WPF Window中有许多按钮，单击这些按钮时需要更改Window上的视图，但要保持相同的ViewModel。昨天我尝试为此使用ControlTemplate，但人们提到我最好使用DataTemplate.

我需要通过ViewModel进行绑定，并且我需要进行一些检查以查看用户是否可以访问视图。

法典

这是我开始编写的一些代码，但我觉得它不正确。

以下是我在Window.Resources的观点中定义的DataTemplate：

    <DataTemplate x:Key="panel1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="7*"/>
                <ColumnDefinition Width="110*"/>
                <ColumnDefinition Width="190*"/>
                <ColumnDefinition Width="110*"/>
                <ColumnDefinition Width="202*"/>
                <ColumnDefinition Width="109*"/>
                <ColumnDefinition Width="7*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="74*"/>
                <RowDefinition Height="50*"/>
                <RowDefinition Height="12*"/>
                <RowDefinition Height="39*"/>
                <RowDefinition Height="11*"/>
                <RowDefinition Height="38*"/>
                <RowDefinition Height="5*"/>
            </Grid.RowDefinitions>
            <StackPanel Grid.Column="2" Grid.ColumnSpan="3" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Label Content="Video Set:" Foreground="#e37e6e" Grid.Column="2" Grid.ColumnSpan="3" VerticalAlignment="Center" FontSize="22" HorizontalAlignment="Center"/>
                <Image Source="{Binding VideoSet}" Height="25" Width="25" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </StackPanel>
            <TextBlock Foreground="#e37e6e" FontSize="12" Text="You currently do not have a video set. Please click the button below to add a video. Please note you will not be able to create an On Demand presentation without a media file selected. " Grid.Row="1" Grid.Column="2" TextWrapping="WrapWithOverflow" TextAlignment="Center" Grid.ColumnSpan="3" />
            <Button Style="{StaticResource loginButton}" Command="{Binding ScreenBack}" Foreground="White" Content="Add Video" Grid.Column="3" HorizontalAlignment="Stretch" Grid.Row="3" VerticalAlignment="Stretch" Grid.ColumnSpan="1"></Button>
        </Grid>
    </DataTemplate>

然后我尝试使用ContentPresenter并绑定到DataTemplate：

<ContentPresenter Content="{Binding}" Grid.Row="3" Grid.RowSpan="1" Grid.ColumnSpan="5"/>

现在我希望能够通过ViewModel将不同的DataTemplates绑定到ContentPresenter，任何人都可以帮助我解决这个问题吗？

编辑：

我可以通过静态资源将ContentPresenter绑定到DataTemplate，如下所示：

<ContentPresenter ContentTemplate="{StaticResource panel1}" Content="{StaticResource panel1}" Grid.Row="3" Grid.RowSpan="1" Grid.ColumnSpan="5"/>

DataTemplate如下所示：

<DataTemplate x:Key="panel1">
</DataTemplate>

但是如何从ViewModel更改ControlPresenter绑定？

编辑：

这是我的代码周期：

因此，以下是两个数据模板：

<DataTemplate DataType="{x:Type local:ViewModelA}">
     <TextBlock Foreground="#e37e6e" FontSize="12" Text="You currently do not have a video set. Please click the button below to add a video. Please note you will not be able to create an On Demand presentation without a media file selected. " Grid.Row="1" Grid.Column="2" TextWrapping="WrapWithOverflow" TextAlignment="Center" Grid.ColumnSpan="3" />
</DataTemplate>
<DataTemplate DataType="{x:Type local:ViewModelB}">
     <TextBlock Foreground="#e37e6e" FontSize="12" Text="NEWWWWWWWWWWYou" Grid.Row="1" Grid.Column="2" TextWrapping="WrapWithOverflow" TextAlignment="Center" Grid.ColumnSpan="3" />
</DataTemplate>

我的内容控件：

<ContentControl Content="{Binding SelectedViewModel}" />

我在代码隐藏中定义了我的 DataContext：

WizardViewModel _wizardViewModel = new WizardViewModel();
this.DataContext = _wizardViewModel;

在向导视图模型中，我有：

namespace Podia2016.ViewModels
{
    public class WizardViewModel : INotifyPropertyChanged
    {
        public object SelectedViewModel { get; set; }
        ViewModelA s = new ViewModelA();
        ViewModelB d = new ViewModelB();
        public WizardViewModel()
        {
            SelectedViewModel = s;
            OnPropertyChanged("SelectedViewModel"); 
        }
        //BC - BINDS TO CHANGE LECTURE.
        public ICommand Next
        {
            get { return new DelegateCommand<object>(Next_Click); }
        }
        private void Next_Click(object obj)
        {
            SelectedViewModel = d;
            OnPropertyChanged("SelectedViewModel");  
        }
    }
public class ViewModelA : INotifyPropertyChanged
{
    //BC - DEFAULT ONPROPERTYCHANGED EVENT.
    public event PropertyChangedEventHandler PropertyChanged;
    public ViewModelA()
    {
    }
    /// <summary>
    /// This is the standard OnPropertyChanged Event Method 
    /// </summary>
    /// <param name="name"></param>
    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}
public class ViewModelB : INotifyPropertyChanged
{
    //BC - DEFAULT ONPROPERTYCHANGED EVENT.
    public event PropertyChangedEventHandler PropertyChanged;
    public ViewModelB()
    {
    }
    /// <summary>
    /// This is the standard OnPropertyChanged Event Method 
    /// </summary>
    /// <param name="name"></param>
    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}
}

单个视图模型的多个视图

数据模板化使用起来要简单得多（与您的尝试相比）：

  • 创建子视图模型，每个子视图对应一个子视图模型

// could have base class, may have to implement INotifyPropertyChanged, etc.
public class ViewModelA { }
public class ViewModelB
{
    public string SomeProperty { get; }
}
...
public object SelectedViewModel { get; set; }
  • 定义数据模板

<SomeContainer.Resources>
    <!-- using user control -->
    <DataTemplate DataType="{x:Type local:ViewModelA}">
        <local:UserControlA />
    </DataTemplate>
    <!-- or like this -->
    <DataTemplate DataType="{x:Type local:ViewModelB}">
        <Grid>
            <TextBlock Text="{Binding SomeProperty}" />
            <Button .../>
            ...
        </Grid>
    </DataTemplate>
  • 将内容控件绑定到选择子视图模型的属性

<ContentControl Content="{Binding SelectedViewModel}" />
  • 通过更改选定的子视图模型来控制要显示的内容：

var a = new ViewModelA();
var b = new ViewModelB() { SomeProperty = "Test" };
// display a - will display UserControlA content in ContentControl
SelectedViewModel = a;
OnPropertyChanged(nameof(SelectedViewModel));
// display b - will display text and button in ContentControl
SelectedViewModel = b;
OnPropertyChanged(nameof(SelectedViewModel));

将DataTemplate存储为ViewModel的属性。从ResourceDictionary访问数据模板以存储在您的财产中。

绑定<ContentPresenter Content="{Binding}" ContentTemplate="{Binding template1}" .../>

如何从代码访问资源字典：

如果 WPF 项目中有一个用于定义资源的 ResourceDictionary，则可以从如下所示的代码创建该实例：

ResourceDictionary res = Application.LoadComponent(
 new Uri("/WpfApplication1;component/MyDataTemplateCollection.xaml", 
 UriKind.RelativeOrAbsolute)) as ResourceDictionary;

其中 WpfApplication1 是程序集的名称，MyDataTemplateCollection.xaml 是 ResourceDictionary 的名称。

另一种方法是对资源字典使用代码隐藏。

将 x：Class 添加到您的资源字典：

添加类MyDataTemplateCollection.xaml.cs作为资源字典的代码隐藏。

类背后的代码如下所示：

partial class MyDataTemplateCollection: ResourceDictionary
{
   public MyDataTemplateCollection()
   {
      InitializeComponent();
   }     
}

用法： 

ResourceDictionary res = new MyDataTemplateCollection();
相关文章：