في هذه المقالة ، أريد أن أخبرك كيف تصورت إحصائيات عن الوباء المستمر ، ومشاركة الميزات التي يمكنك تلبيتها باستخدام واجهة مستخدم Avalonia لهذا الغرض.
المقدمة
تفترض هذه المقالة أنه يمكنك بالفعل إنشاء تطبيق بسيط باستخدام AvaloniaUI. إذا لم يكن كذلك ، تحقق من دروس AvaloniaUI أو Habr .البيانات
بادئ ذي بدء ، نشأ السؤال عن مكان الحصول على البيانات ذات الصلة ووجد بحث سريع في Google واجهة برمجة التطبيقات التالية التي تلبي جميع متطلباتي:- معلومات عامة عن العالم
- معلومات عامة لكل بلد
- التاريخ لكل دولة
هيكل التطبيق
يتكون التطبيق من 3 شاشات مختلفة.بنيت الحركات بين الشاشات باستخدام التوجيه . كانت الميزة المثيرة للاهتمام في هذه المرحلة هي نقل الزناد الخاص بالطريق إلى UserControl.للقيام بذلك ، كان على ViewModel قبول الإجراء: 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);
}
والدعوة لهذا الإجراء هي تحديد عنصر في القائمة:public Country SelectedCountry
{
get => _country;
set
{
this.RaiseAndSetIfChanged(ref _country, value);
A.Invoke(value);
}
}
استفسارات
للمكالمات إلى واجهة برمجة التطبيقات ، تم استخدام مكتبة flurl. الذي يستخدم HttpClient و Newtosoft داخليًا ، وهو بحد ذاته امتداد للسلاسل.لذلك ، يمكن تنفيذ الحصول على نموذج من طلب في سطر واحد: var allCases = await "https://corona.lmao.ninja/all".GetJsonAsync<AllCases>();
صور
للعمل مع الصورة باستخدام flurl ، حصلنا على دفق يلزم تعبئته في ذاكرة الذاكرة لإنشاء مثيل من الصورة النقطية: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;
}
التجميع والتصفية
تم استخدام البيانات الديناميكية من ReactiveUI لعرض المجموعة . 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();
قررت أيضًا إضافة عامل تصفية للبحث بسرعة عن دولة باسمها أو اختصار ISO3 .للقيام بذلك ، كانت سلسلة البحث مرتبطة بالخاصية:
public string FilterName
{
get => _filterName;
set { this.RaiseAndSetIfChanged(ref _filterName, value); }
}
تمت إضافة قاعدة التصفية: 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());
}
ويتم إنشاء الفلتر نفسه: var filter = this.WhenValueChanged(x => x.FilterName).Select(Filter);
عرض الرسم البياني
بالنسبة للرسوم البيانية ، استخدمت مكتبة Oxyplot لـ AvaloniaUI.للأسف ، الإصدار قديم في nuget أو لم أجده ، لذا يمكنك استخدام حزمة nuget التي أنشأتها ، أو اسحب المصدر مع github لأسفل.للعمل ، تحتاج إلى الإضافة إلى App.xaml:<StyleInclude Source="resm:OxyPlot.Avalonia.Themes.Default.xaml?assembly=OxyPlot.Avalonia"/>
لعرض محور بتاريخ معين ، وليس رقمًا عشوائيًا (حيث يقوم أوكسيبلوت بتحويل التاريخ للعمل الداخلي) ، يجب عليك تحديد نوع المحور في الترميز: <avalonia:Plot.Axes>
<avalonia:DateTimeAxis StringFormat="yyyy-MM-dd" Position="Bottom"></avalonia:DateTimeAxis>
</avalonia:Plot.Axes>
المصادر والتطبيقات
باستخدام نشر dotnet ، جمعت ثنائيات للمنصات الرئيسية ( هنا ) ، ولأولئك الذين سيكونون أكثر اهتمامًا. يمكن العثور على شفرة المصدر على جيثب .بدلا من كلمة ختامية
يعتمد هذا التطبيق على واجهة برمجة تطبيقات تابعة لجهة خارجية ، وآمل ألا يتم دعم هذه الواجهة قريبًا ، لأنه لن تكون هناك حاجة.اغسل أقلامك واجلس في المنزل. ويمكن العثور على دعم Avalonia هنا .