首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在实例化新视图模型时添加新视图

如何在实例化新视图模型时添加新视图
EN

Stack Overflow用户
提问于 2019-07-25 17:08:44
回答 2查看 204关注 0票数 0

不知道如何以编程方式实例化包装新图表及其数据收集的新视图模型。现在,它由以下内容组成,但不确定设置它的最佳方法。

代码语言:javascript
运行
复制
class ChartViewModel
    {
        public ChartViewModel()
        {
            CartesianChart chart = new CartesianChart();
            chart.Series = new SeriesCollection
            {
                new GLineSeries
                {
                    Title = "Pressure",
                    Values = new GearedValues<double>(),
                },
                new GLineSeries
                {
                    Title = "Pulse",
                    Values = new GearedValues<int>(),
                }
            };  
        }
    }

然后,我需要将新的图表添加到视图中。CartesianChart对象是UIElement,在没有该类的主窗口中测试它时,它的工作方式如下所示。

代码语言:javascript
运行
复制
stackPanel.Children.Add(chart);

但是类似乎无法访问xaml,而且我也不能添加实际的视图模型类,因为这不是一个UIElement,只有图表。基本上,每次以前的图表填满以下内容时,都需要创建一个新的图表实例:

代码语言:javascript
运行
复制
ChartViewModel tempChart = new ChartViewModel();
chartRepo.Add(tempChart); //chart repo is a list of ChartViewModels

因此,它需要自己的SeriesCollection和UIElement。谢谢你的建议。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-07-25 20:41:18

如果您想动态添加新图表,则必须使用DataTemplate来模板图表数据。

由图表组成的DataTemplate被绑定到ChartDataModel。我们可以使用ListView来显示图表(数据模板)。视图模型ChartViewModel充当ListView.ItemsSource,并包含一组ChartData

每个ChartData映射到一个新的图表。

每当您在ChartDataModel中创建一个新的ChartViewModel并将其添加到ChartModels中时,ListView将自动创建一个新图表。

意见:

代码语言:javascript
运行
复制
<ListView ItemsSource="{Binding ChartModels}">
  <ListView.DataContext>
    <ChartViewModel />
  </ListView.DataContext>

  <ListView.ItemTemplate>
    <DataTemplate DataType="ChartDataModel">
      <CartesianChart>
        <CartesianChart.Series>
          <LineSeries Title="Pressure" Values="{Binding PressureValues}" />
          <LineSeries Title="Pulse" Values="{Binding PulseValues}" />
        </CartesianChart.Series>
      </CartesianChart>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

模式:

代码语言:javascript
运行
复制
class ChartDataModel
{
  public ChartDataModel()
  {
    this.PressureValues = new ChartValues<double>();
    this.PulseValues = new ChartValues<double>();
  }

  public ChartValues<double> PressureValues { get; set; }
  public ChartValues<double> PulseValues { get; set; }
}

视图模型:

代码语言:javascript
运行
复制
class ChartViewModel : INotifyPropertyChanged
{
  public ChartViewModel()
  {
    this.ChartModels = new ObservableCollection<ChartDataModel>();
    CreateNewChart();
  }

  private void CreateNewChart()
  {
    var newChartDataModel = new ChartDataModel()
    {
      PressureDataValues = new ChartValues<double>()
      {
        10, 20, 30, 40, 50
      },
      PulseDataValues = new ChartValues<double>()
      {
        100, 200, 300, 400, 500
      }
    };

    this.ChartModels.Add(newChartDataModel);
  } 

  private ObservableCollection<ChartDataModel> chartModels;
  public ObservableCollection<ChartDataModel> ChartModels
  {
    get => this.chartModels;
    set
    {
      if (Equals(value, this.chartModels)) return;
      this.chartModels = value;
      OnPropertyChanged();
    }
  }

  public event PropertyChangedEventHandler PropertyChanged;

  [NotifyPropertyChangedInvocator]
  protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
  {
    this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}
票数 1
EN

Stack Overflow用户

发布于 2019-07-25 17:27:54

ViewModel正在实例化图表,这是一个UI元素。ViewModels只应该使用公共getter(有时还包括setter)公开简单的属性。视图应该读取这些属性并相应地更改其UI元素。ViewModels通常不包含UI元素。

也就是说,您应该在xaml (或xaml.cs)中实例化图表,然后将其属性绑定到ViewModel。链接视图和ViewModel,视图的DataContext属性必须是ViewModel实例

ViewModel可以直接访问数据源(例如数据库),并将该数据源转换为随时供UI元素使用的值。

例如,您的视图可能包含如下内容:

代码语言:javascript
运行
复制
<livechart:CartesianChart>
    <livechart:CartesianChart.Series>
        <Series Title="{Binding FirstSeriesTitle}" Values="{Binding FirstSeriesValues}"/>
    </livechart:CartesianChart.Series>
</livechart:CartesianChart>

而你的ViewModel

代码语言:javascript
运行
复制
public class ChartViewModel
{
    public string FirstSeriesTitle { get; set; }

    public IEnumerable<ChartPoint> FirstSeriesValues { get; set; }
}

我建议您阅读一些关于MVVM模式的文章,以便更好地掌握它!

因为需要可变数量的图表,所以可能应该添加一个ItemsControl,并将其ItemsSource绑定到chartviewmodels的ObservableCollection上。设置itemscontrol的itemTemplate属性以设置每个项的外观!(也就是说,图表和其他ui元素)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57207060

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档