Saturday, February 15, 2025
HomeLập Trình WPFBinding Basic Gauge in LiveChart 2 by MVVM WPF

Binding Basic Gauge in LiveChart 2 by MVVM WPF

Hướng dẫn dùng Basic Gauge trong LiveChart2 theo cơ chế Binding giá trị trong mô hình MVVM

Các bạn có thể tham khảo tại trang chủ: LiveChart2

Bước 1: Đầu tiên tải về thư viện Nuget của Live Chart 2

Bước 2: Tạo giao diện đơn giản để mô phỏng Basic Gauge

Thêm namespace LiveChart cho trên giao diện XAML:

XML
xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"

Tạo một PieChart mới

XML
 <lvc:PieChart
     InitialRotation="-90"
     MaxValue="100" 
     MinValue="0"
     Series="{Binding Series}" />

Bước 3: Thực hiện Logic trong ViewModel

Trong ViewModel , sẽ dùng chơ chế MVVM để mô phỏng việc thay đổi giá trị của Basic Gauge

C#
 public partial class MainViewModel : ObservableObject
 {
     public IEnumerable<ISeries> Series { get; set; }

     private GaugeItem _gaugeItem;
   
     private double _value;
     public double Value
     {
         get => _value;
         set
         {
             _value = value;
             OnPropertyChanged(nameof(Value));
             _gaugeItem.Value.Value = value;
         }
     }

     public MainViewModel()
     {
         // Khởi tạo gaugeitem
         _gaugeItem = new GaugeItem(0, series =>
         {
             series.MaxRadialColumnWidth = 50;
             series.DataLabelsSize = 50;
         });
         // Khởi tạo Series
         Series = GaugeGenerator.BuildSolidGauge(_gaugeItem);
     }

     // Mô phỏng thay đổi giá trị theo thời gian
     internal void ChangeValue()
     {
         Task.Run(async () =>
         {
             while (true)
             {
                 Value++;
                 if (Value >= 100) Value = 0;
               await  Task.Delay(100);
             }
         });
     }
 }

Cuối cùng chạy ứng dụng lên và thực hiện Start để xem kết quả

Nguyễn Minh Châu
Nguyễn Minh Châuhttps://nhatkydev.com
Hi guys ! I'm a software developer. I love programming and new technologies. I create non-professional content on this website, you can only view it for reference purposes.
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular