Создание привязанных к данным приложений в Xamarin.Forms

Разработчики повсюду рассказывают нам, насколько Xamarin решение Xamarin от Infragistics является отличным решением! Только с помощью Xamarin разработчики могут создавать собственные приложения для iOS, Android и Windows из одной общей кодовой базы C # на разных платформах, что позволяет быстро и легко отправлять высококачественные приложения. Затем при использовании Xamarin.Forms, инструментария Xamarin для кроссплатформенного пользовательского интерфейса, вы можете создавать представления пользовательского интерфейса полностью в коде C # или использовать расширенный язык разметки приложений (XAML). XAML — это декларативный язык разметки на основе XML от Microsoft, используемый для описания пользовательских интерфейсов. Поскольку Xamarin.Forms по своей природе поддерживает привязку данных, вы можете воспользоваться архитектурным шаблоном MVVM (Model-View-ViewModel), который широко используется в таких технологиях, как WPF и Silverlight в .NET Framework.

С помощью элементов управления Infragistics для Xamarin.Forms вы можете создавать интерактивные высокопроизводительные визуализации данных с привязкой к данным для мобильных приложений, которые требуются современным бизнес-пользователям. Некоторые элементы управления визуализацией данных включают в себя круговые диаграммы, датчики, маркеры и часто используемые диаграммы данных с такими сериями, как категория, финансы, накопление и т. Д.

Xamarin.Forms отлично подходит для быстрой разработки бизнес-приложений, где у вас меньше настроек пользовательского интерфейса, а обмен кодами — ваш главный приоритет. Такие корпоративные приложения, как правило, предъявляют простые требования, такие как наличие нескольких форм для сбора данных, панель мониторинга для визуализации данных и несколько настроек для взаимодействия с пользователем. Приложение панели инструментов с диаграммами и формами не требует слишком большого количества настроек пользовательского интерфейса на каждой платформе. Например, PieChart представляется как PieChart, LineChart как LineChart и т. Д., Независимо от того, на какой платформе они отображаются.

Сочетая элементы управления Xamarin.Forms, MVVM и Infragistics, вы можете создавать интерактивные информационные панели для iOS, Android и Windows с максимальным общим кодом для всех платформ (до 99%). С небольшой настройкой, такой как правильный выбор цвета, оптимизация шрифтов и рендеринг соответствующих элементов управления, специфичных для платформы, вы можете сделать свои приложения визуально ошеломляющими и идеально подходящими для платформы.

Для этого поста я создал образцы приложений « WorldData » в Xamarin.Forms, используя диаграммы Infragistics для отображения данных по странам, включая демографию, продолжительность жизни, здоровье и болезни, образование и т. Д. 

Источник данных

Это приложение использует данные из Quandl и получает данные в реальном времени с использованием API Quandl, а также из автономного файла CSV, включенного в состав ресурсов проекта. Я сделал это, чтобы показать вам, как вы можете использовать оба механизма для отображения данных в вашем приложении. 

Начать

Если вы новичок в Xamarin.Forms, я рекомендую вам ознакомиться с подробной подробной документацией перед началом работы.

Чтобы начать работу с элементами управления Infragistics, следуйте инструкциям в их документации и соответствующим образом настройте проект Xamarin.Forms. 

Исходный код и настройка

Исходный код этого примера можно найти в моем репозитории Github . Чтобы успешно скомпилировать и запустить проект, пожалуйста, загрузите и установите Infragistics Xamarin.Forms и добавьте все связанные библиотеки Xamarin.Forms в папку libs.

Проектирование страниц в XAML

Страница — это самый верхний визуальный элемент, который занимает весь экран и имеет только одного дочернего элемента. Вы можете выбрать одну из пяти разных страниц —

● ContentPage

● MasterDetailPage

● NavigationPage

● TabbedPage

● CarouselPage

Для этого примера NavigationPage устанавливается на верхнюю страницу, которая укладывает другие страницы содержимого и обрабатывает переходы между ними. Все остальные страницы имеют тип ContentPage .

раскладка

Макеты действуют как контейнер для представлений и других макетов. Он содержит логику для установки положения и размера дочерних элементов в приложениях Xamarin.Forms. Я использовал систему макетов Grid на всех страницах этого примера. Разметка сетки в Xamarin.Forms очень похожа на систему разметки сетки WPF; это включает представления, расположенные в строках и столбцах.

Вот пример таблицы, написанной на XAML:

  <Grid HorizontalOptions="FillAndExpand"

          Padding="0"

          RowSpacing="0"

          ColumnSpacing="0"

          VerticalOptions="FillAndExpand">

    <Grid.RowDefinitions>

      <RowDefinition Height="300"></RowDefinition>

  <RowDefinition Height="Auto"></RowDefinition>

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

      <ColumnDefinition Width="*"></ColumnDefinition>

    </Grid.ColumnDefinitions>

    <Label Grid.Row="0" Grid.Column="0"></Label>

    </Grid>

xmlns:igc="clr-namespace:Infragistics.XF;assembly=InfragisticsXF"

        <ig:XFPieChart x:Name="pieChart"
                       HeightRequest="250"
                       InnerExtent="0"
                       RadiusFactor="0.7"
                       AllowSliceSelection="True"
                       StartAngle="150"
                       AllowSliceExplosion="True"
                       ItemsSource="{Binding Data}"
                       LabelMemberPath="Label"
                       ValueMemberPath="Level"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="FillAndExpand"
                       OthersCategoryThreshold="0"
                       LabelsPosition="OutsideEnd"
                       LeaderLineType="Arc"
                       LeaderLineVisibility="Visible"/>

private HomePageViewModel vm;
        public HomePage()
        {
            InitializeComponent();
            BindingContext = vm =  new    
            HomePageViewModel();
        }

worldRepository.GetCountries().ContinueWith(list =>
            {
                Countries = list.Result;
                var dataItems = new ObservableCollection<DataItem>();
                foreach (var region in worldRepository.CountriesByRegion)
                {
                    var dataItem = new DataItem {Label = region.Key, Level = region.Value.Sum(x => x.Level.ToDouble())};
                    dataItems.Add(dataItem);
                }
                Data = dataItems;
            });

<ContentPage.Resources>
    <ResourceDictionary>
      <igc:BrushCollection x:Key="SliceBrushes">
        <igc:SolidColorBrush Color="#4DB6AC" />
   .....
      </igc:BrushCollection>
      <igc:BrushCollection x:Key="OutlineBrushes">
        <igc:SolidColorBrush Color="#4DB6AC" />
        <igc:SolidColorBrush Color="#4DD0E1" />
  ....
      </igc:BrushCollection>
    </ResourceDictionary>
  </ContentPage.Resources>

<ig:XFPieChart x:Name="pieChart"
                       Brushes="{StaticResource SliceBrushes}"
                       Outlines="{StaticResource OutlineBrushes}"
....

FontFamily="{x:Static local:Theme.FontFamilyMedium}"
FontSize="{x:Static local:Theme.FontSizeMicro}"

        public async static Task<QuandlData> GetQuandlDataAsync(string authToken, string countryCode, string indicator, string transformation = null, string collapse = null)
        {
            //…
            HttpClient client = new HttpClient();
            var result = await client.GetStringAsync(uri);
            var data = JsonConvert.DeserializeObject<QuandlData>(result);
            return data;
        }

public static string FontFamilyRegular
        {
            get
            {
                return Device.OnPlatform(iOS: "AvenirNext-Regular", Android: "Roboto Light", WinPhone: "Segoe WP Light");
            }
        }

 <Label Text="Countries"  FontFamily="{x:Static local:Theme.FontFamilyRegular}" />