question

la07k-4914 avatar image
0 Votes"
la07k-4914 asked la07k-4914 commented

How to plot a line graph in WPF MVVM atrchitecture

Hi ,

I wanted to plot one 2D graph,X axis time,Y axis some number.

I tried using Polyline.But in mvvm architecture i am not able to bind the data.Can anyone help/suggest me a way to fix the problem.

windows-wpfdotnet-wpf-xaml
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

DaisyTian-1203 avatar image
1 Vote"
DaisyTian-1203 answered la07k-4914 commented

I did a sample in C#, below is the code:
XAML code is:

  <Window.DataContext>
         <local:MyViewModel></local:MyViewModel>
     </Window.DataContext>
     <StackPanel>
         <Polyline Height="300"  Name="_myPolyline" Stroke="{Binding myModel.ColorName}" Tag="123213" StrokeThickness="4" Points="{Binding myModel.points}" ></Polyline>
     </StackPanel>

The cs code is:

 public partial class MainWindow : Window
     {
         public MainWindow()
         {
             InitializeComponent();
             MyViewModel vm = new MyViewModel();
             _myPolyline.Points = vm.myModel.points;
         }
     }
    
     public class MyViewModel
     {
    
         public int currentSecond = 0;
         Random rd = new Random();
         public PointCollection LtPoint = new PointCollection();
    
         public MyModel myModel { get; set; } = new MyModel();
         public MyViewModel()
         {
             DispatcherTimer timer = new DispatcherTimer();
             timer.Tick += Timer_Tick;
             timer.Interval = TimeSpan.FromMilliseconds(500);
             timer.Start();
    
             myModel = new MyModel()
             {
                 points = LtPoint,
                 ColorName = "Blue"
             };
         }
    
         private void Timer_Tick(object sender, EventArgs e)
         {
             currentSecond++;
             double x = currentSecond * 10;
             double y = rd.Next(1, 200);
             LtPoint.Add(new Point(x, y));
         }
     }
    
     public class MyModel
     {
         public PointCollection points { get; set; } = new PointCollection();
    
         public string ColorName { get; set; }
     }

83576-2.gif


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


2.gif (26.4 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Thank you DaisyTian-MSFT

0 Votes 0 ·
PeterFleischer-3316 avatar image
1 Vote"
PeterFleischer-3316 answered

Hi,
you can display PLine and use Interactivity from NuGet. Try following demo:

XAML:

 <Window x:Class="Window052"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:WpfApp1.WpfApp052"
         xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
         mc:Ignorable="d"
         Title="Window052" Height="450" Width="800">
   <Window.DataContext>
     <local:ViewModel/>
   </Window.DataContext>
   <Canvas Background="White">
     <i:Interaction.Behaviors>
       <local:CanvasBehavior/>
     </i:Interaction.Behaviors>
   </Canvas>
 </Window>

And classes in VB.NET:

It's impossible to post code, please see attached txt.

83334-x.txt



x.txt (3.3 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.