في أيام الشك ، في أيام المداولات المؤلمة

في هذه المقالة ، أريد أن أخبرك كيف تصورت إحصائيات عن الوباء المستمر ، ومشاركة الميزات التي يمكنك تلبيتها باستخدام واجهة مستخدم Avalonia لهذا الغرض.



من المؤلف
, . . — MIT .

المقدمة


تفترض هذه المقالة أنه يمكنك بالفعل إنشاء تطبيق بسيط باستخدام AvaloniaUI. إذا لم يكن كذلك ، تحقق من دروس AvaloniaUI أو Habr .

البيانات


بادئ ذي بدء ، نشأ السؤال عن مكان الحصول على البيانات ذات الصلة ووجد بحث سريع في Google واجهة برمجة التطبيقات التالية التي تلبي جميع متطلباتي:

  1. معلومات عامة عن العالم
  2. معلومات عامة لكل بلد
  3. التاريخ لكل دولة

هيكل التطبيق


يتكون التطبيق من 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 هنا .

All Articles