Безкоштовний грід контрол для Xamarin від DevExpress

У попередній статті (Особливості розробки під Xamarin.Forms я розповів про наш досвід розробки під фреймворк Xamarin.Forms, який дозволяє створювати нативні інтерфейси під три мобільні платформи (iOS, Android, Windows Phone), використовуючи загальний# код і розмітки XAML.

Сьогодні подивимося на результат виконаної нами роботи, наш перший компонент для Xamarin.Forms – Data Grid. Цей компонент можна використовувати безкоштовно, скачавши тут. Разом з ним ви отримаєте програму, що демонструє основну функціональність GridControl-а.



Отже, під катом вас чекає огляд усього того, що вміє Grid на даний момент, а також невеликий Getting Started.


Про компоненті
Як і належить, наш грід — це компонент для відображення і редагування табличних даних, які можуть бути отримані з джерел різних типів. Подивимося, які можливості він надає для швидкого та ефективного аналізу даних.

Управління даними
  • По-перше, це всі стандартні функції, необхідні для роботи з табличними даними – фільтрація, сортування (включаючи сортування по декількох колонках одночасно) і групування даних.
  • Розрахунок зведеної інформації (summary), для груп і для всього гріду. П'ять найбільш часто використовуваних функцій (Sum, Average, Max, Min Count) доступні вже за замовчуванням, але також можливо використання власного алгоритму для розрахунку.
  • Всі параметри гріду можна зберегти (наприклад, в xml файл) і потім швидко знову відновити в гріді.
  • Додавання, редагування та видалення рядків.
  • Можливість експортувати дані з гріду з урахуванням всіх застосованих налаштувань (сортування, групування, фільтрів, порахованих підсумкових значень і ін) в XLS, XLSX або CSV форматах.




Колонки
  • Реалізовано кілька стандартних типів даних колонок для різного типу: текст, числа, дати, зображення і значення зі списку (TextColumn, NumberColumn, DateColumn, ImageColumn, PickerColumn). Наприклад, коли користувач починає редагувати комірку, на його планшеті або смартфоні автоматично показується екранна клавіатура для введення тексту або календар, в залежності від того, редагує він рядкові дані або дати.

    До речі, для кожної колонки можна задати формат відображення значень. Наприклад, доступні дробовий, грошовий, процентний та інші формати числових даних, і спеціальні формати для дат і часу.
  • Якщо ні один із стандартних типів колонок не підходить – не біда, можна додати в грід колонку, задану за шаблоном(TemplateColumn).
  • Необов'язково, щоб всі колонки в гріді відповідали якому-небудь полю з джерела даних – грід може містити так звані unbound columns – колонки, значення яких розраховуються по заданому виразу на основі даних інших колонок.
  • Можна приховувати і знову показувати колонки, змінювати ширину відповідним жестом.


Форматування
  • Умовне форматування – це можливість форматувати комірки на основі їх значень, вибірково або автоматично. Наприклад, ця функціональність дозволяє виділити важливу інформацію або значення-виключення, візуалізувати тренди, і багато іншого. Наш грід підтримує безліч варіантів умовного форматування – від простої зміни кольору шрифту, фону комірки до використання шкал, наборів піктограм і гістограм.
  • Для гріду доступні світла і темна теми.




«Мобільні фішки»
  • Ну і звичайно ж ми не могли не реалізувати такі звичні користувачам мобільних пристроїв «фішки» якpull-to-refresh (синхронізація з джерелом даних і оновлення вмісту гріду рухом пальця зверху вниз) і load-more (можливість довантажити ще запису з джерела даних, коли користувач доскролировался до останнього рядка гріду).
  • Ще одна можливість, знайома користувачам iPhone і iPad Swipe Buttons. Ви легко можете розширити стандартний функціонал нашого гріду, додавши в нього додаткові кнопки доступні користувачеві при ковзанні пальцем по рядках гріду зліва направо і навпаки – справа наліво.


Більшість перерахованих вище функціональних можливостей доступно для кінцевих користувачів за умовчанням. Наприклад, через вбудовані контекстні меню (кожне з яких, до речі, можна легко налаштувати за необхідності – наприклад, додати нові пункти або видалити існуючі) або інтуїтивно зрозумілі жести. Будь-яку з наявних функцій також легко можна зробити недоступною для користувачів, якщо це потрібно.

А в розпорядженні розробників — API, який надає їм повну свободу дій.

Створення програми
Ну а тепер подивимося, як же додати Grid компонент в додаток і почати з ним роботу.

Отже, для початку створимо нове Xamarin.Forms Portable додаток в Xamarin Studio (взагалі Xamarin.Forms програми можна розробляти і Visual Studio, але в даному прикладі будемо використовувати Xamarin Studio на операційній системі OS X).

Далі скачаємо DevExpress Grid компонент з магазину Xamarin Components і додамо його в Android і iOS проекти. Робиться це дуже просто — прямо в Xamarin Studio.



Зверніть увагу, що при додаванні компонента посилання на усі потрібні «платформні» складання додаються автоматично в Android і iOS проекти.



А ось посилання на загальні складання DevExpress.Mobile.Grid.v15.1.dll DevExpress.Mobile.Core.v15.1.dll потрібно додати в PCL проект вручну. Знайти їх можна в каталозіComponents/devexpress-grid-15.1.5.0/lib/pcl/, який автоматично створюється у каталозі поточного додатка.

Якщо ви працюєте в Visual Studio, і ваш додаток включає в себе Windows Phone проект, в нього також необхідно вручну додати посилання на збірки DevExpress.Mobile.Grid.WinPhone.v15.1.dll DevExpress.Mobile.Core.WinPhone.v15.1.dll.

Для ініціалізації гріду додамо наступну сходинку в файли MainActivity.cs AppDelegate.cs (Android і iOS проекти відповідно):

DevExpress.Mobile.Forms.Init();


Тепер можна створювати екземпляр гріду, не забуваючи при цьому підключити простір іменDevExpress.Mobile.DataGrid.

Джерело даних для гріду задається через властивістьItemsSource.

За замовчуванням, грід створить колонки для всіх полів джерела даних. Набір або порядок колонок в гріді можна змінити, задавши їх вручну з допомогою властивостіGridControl.Columns.

Ось, наприклад, як це можна зробити використовуючи розмітки XAML.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
x:Class="HelloGrid.MainPage" 
xmlns:dxg="clr-namespace:DevExpress.Mobile.DataGrid;assembly=DevExpress.Mobile.Grid.v15.1"> 
<dxg:GridControl x:Name="grid" ItemsSource="{Binding Orders}" 
SortMode="Multiple" AutoFilterPanelVisibility="true"> 
<dxg:GridControl.Columns> 
<dxg:TextColumn FieldName="Product.Name" Caption="Product" Width="170" /> 
<dxg:NumberColumn FieldName="Product.UnitPrice" Caption="Price" DisplayFormat="C0"/> 
<dxg:NumberColumn FieldName="Quantity"/> 
<dxg:NumberColumn FieldName="Total" 
UnboundType="Integer" UnboundExpression="[Quantity] * [Product.UnitPrice]" 
IsReadOnly="True" DisplayFormat="C0"/> 
<dxg:DateColumn FieldName="Date" DisplayFormat="d"/> 
<dxg:SwitchColumn FieldName="Shipped" /> 
</dxg:GridControl.Columns> 
<dxg:GridControl.TotalSummaries> 
<dxg:GridColumnSummary FieldName="Total" Type="Sum" 
DisplayFormat= "Total:{0:C0}"/> 
</dxg:GridControl.TotalSummaries> 
</dxg:GridControl> 
</ContentPage>


У наведеному вище коді, крім визначення колонок гріду, ми також:
  • включили можливість одночасного сортування по кількох колонках,
  • додали панель фільтрування даних по колонках,
  • і поставили total summary для підрахунку суми по колонці Total.


Тепер при запуску програми отримуємо ось такий грід, заповнений даними з заданого джерела.



Невеликий промо відео про наш GridControl-е можна подивитися тут:



Висновок
Ось так. Тепер у нашій лінійці продуктів є ще і грід компонент під платформу Xamarin. Якщо ви дивитеся в бік розробки мобільних додатків з використанням технології Xamarin.Forms, то обов'язково спробуйте наш грід – це легко, він безкоштовний і зручно інтегрується в ваш проект. Ми будемо раді відповісти на ваші запитання і почути ваші побажання у коментарях до цієї статті.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.