Dalam artikel ini, saya ingin memberi tahu Anda bagaimana saya memvisualisasikan statistik tentang pandemi yang sedang berlangsung, dan berbagi fitur apa yang dapat Anda temui menggunakan Avalonia UI untuk ini.
Dari penulis, . . — MIT .
pengantar
Artikel ini mengasumsikan bahwa Anda sudah dapat membuat aplikasi sederhana menggunakan AvaloniaUI. Jika tidak, lihat tutorial AvaloniaUI atau Habr .Data
Pertama-tama, muncul pertanyaan tentang di mana mendapatkan data terbaru dan pencarian cepat di Google menemukan api berikut yang memenuhi semua persyaratan saya:- Informasi umum di dunia
- Informasi umum untuk setiap negara
- Sejarah untuk masing-masing negara
Struktur aplikasi
Aplikasi ini terdiri dari 3 layar berbeda.Pergerakan antar layar dibangun menggunakan perutean . Fitur yang menarik pada titik ini adalah transfer pemicu untuk rute ke UserControl.Untuk melakukan ini, ViewModelnya harus menerima Tindakan: public CountriesVM(IScreen screen, Action<Country> a)
CurrentCountyCommand =
CountriesCommand = ReactiveCommand.CreateFromObservable(
() => Router.Navigate.Execute(new CountriesVM(this,GoToCurrentCountry))
);
....
public void GoToCurrentCountry(Country c)
{
CurrentCountyCommand.Execute(c);
}
Dan panggilan untuk tindakan ini adalah memilih item dalam daftar:public Country SelectedCountry
{
get => _country;
set
{
this.RaiseAndSetIfChanged(ref _country, value);
A.Invoke(value);
}
}
Pertanyaan
Untuk panggilan ke api, perpustakaan flurl digunakan. Yang secara internal menggunakan HttpClient dan Newtosoft, dan itu sendiri merupakan ekstensi untuk string.Oleh karena itu, mendapatkan model dari permintaan dapat diimplementasikan dalam satu baris: var allCases = await "https://corona.lmao.ninja/all".GetJsonAsync<AllCases>();
Gambar-gambar
Untuk bekerja dengan gambar menggunakan flurl, kami mendapat aliran yang perlu dimasukkan ke dalam aliran memori untuk membuat contoh Bitmap:private async Task<Bitmap> GetFlag(String flagUrl)
{
var flagStream = await flagUrl.GetStreamAsync();
var memoryStream = new MemoryStream();
flagStream.CopyTo(memoryStream);
memoryStream.Position = 0;
var bitmap = new Bitmap(memoryStream);
return bitmap;
}
Pengumpulan dan Penyaringan
Data Dinamik dari ReactiveUI digunakan untuk menampilkan koleksi . SourceList<Country> countries = new SourceList<Country>();
private ReadOnlyObservableCollection<Country> _collection;
public ReadOnlyObservableCollection<Country> Collection => _collection;
countries.Connect().Filter(filter).ObserveOn(RxApp.MainThreadScheduler).Bind(out _collection).Subscribe();
Saya juga memutuskan untuk menambahkan filter untuk mencari negara dengan cepat dengan nama atau singkatan ISO3 .Untuk melakukan ini, string pencarian terikat ke properti:
public string FilterName
{
get => _filterName;
set { this.RaiseAndSetIfChanged(ref _filterName, value); }
}
Aturan filter ditambahkan: private Func<Country, bool> Filter(string filterName)
{
if (string.IsNullOrEmpty(filterName)) return x => true;
return x => x.Name.ToUpper().Contains(filterName.ToUpper()) || x.ISO3.Contains(filterName.ToUpper());
}
Dan filter itu sendiri dibuat: var filter = this.WhenValueChanged(x => x.FilterName).Select(Filter);
Tampilan grafik
Untuk grafik, saya menggunakan pustaka Oxyplot untuk AvaloniaUI.Sayangnya, versi ini sudah usang dalam nuget atau saya tidak menemukannya, sehingga Anda dapat menggunakan paket nuget yang saya buat , atau menyeret ke bawah sumber dengan github.Agar berfungsi, Anda perlu menambahkan ke App.xaml:<StyleInclude Source="resm:OxyPlot.Avalonia.Themes.Default.xaml?assembly=OxyPlot.Avalonia"/>
Untuk menampilkan sumbu dengan tanggal tertentu, dan bukan angka arbitrer (ke mana oxyplot mengubah tanggal untuk pekerjaan internal), Anda harus menentukan jenis sumbu dalam markup: <avalonia:Plot.Axes>
<avalonia:DateTimeAxis StringFormat="yyyy-MM-dd" Position="Bottom"></avalonia:DateTimeAxis>
</avalonia:Plot.Axes>
Sumber dan aplikasi
Menggunakan dotnet publish, saya mengkompilasi binari untuk platform utama (di sini ), tetapi bagi mereka yang akan lebih tertarik. kode sumber dapat ditemukan di github .Alih-alih kata penutup
Aplikasi ini didasarkan pada api pihak ketiga, dan saya harap api ini tidak akan lagi didukung, karena tidak akan diperlukan.Cuci tangan dan duduk di rumah. Dan dukungan untuk Avalonia dapat ditemukan di sini .