Диаграммы и другие полезности для UWP приложений
Удивился тому, что на хабре нет ни одной публикации про XAML Toolkit и потому решил восполнить этот пробел. Несмотря на то, что проект сейчас находится в стадии заморозки, полезность его от этого не уменьшается. Он был создан для Windows 8.x приложений, но был после портирован и под UWP. Этот open-source проект является личным проектом разработчика Filip Skakun.
Элементы управления из этого toolkit-а являются хорошей альтернативой платным контролам от Syncfusion и Telerik.
Под катом о том, как можно с помощью молотка и такого-то тулкита делать всякие интересные штуки.
Начну с небольшого мануала по созданию диаграмм в приложениях UWP.
Что касается именно диаграмм, — этот контрол был портирован разработчиком Mahmoud Moussa в Xaml Toolkit из Silverlight Toolkit-а.
Диаграммы
Итак, создадим проект универсального приложения Windows.
В NuGet найдем и установим WinRTXamlToolkit.Controls.DataVisualisation.UWP.
После установки пакета NuGet уже можно в XAML код добавлять код элементов управления содержащихся в тулките. Но для удобства можно добавить список элементов на панель элементов. Сделаем это так.
Откроем панель элементов (если она не открыта). Зайдем в меню «Вид» и выберем «Панель элементов».
Теперь создадим новую вкладку и назовем ее XAML Toolkit (или как захочется):
Раскроем только что созданную вкладку. В ней пока что нет ни одного контрола. Вызвав контекстное меню кликнем «Выбрать элементы»:
В открывшемся окне переходим на закладку «Универсальные компоненты Windows»:
Если она оказалось пустой (как в моем случае), то нажимаем кнопку «Обзор» и открыв директорию а-ля
C:\Users\имя_пользователя\.nuget\packages\WinRTXamlToolkit.Controls.DataVisualization.UWP\1.9.4
выбираем файл WinRTXamlToolkit.Controls.DataVisualization.dll.
Получим примерно такой вот список доступных элементов:
Нажав «ОК» получим возможность использовать дополнительные контролы в своем проекте. Их можно перетаскивать в XAML код из панели элементов. После перетаскивания элемента в страницу в заголовок XAML будет автоматически добавлена ссылка:
xmlns:Charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
А в код C# нужно добавить:
using WinRTXamlToolkit.Controls.DataVisualization.Charting;
Давайте для примера создадим диаграмму целевого использования Internet Explorer-а.
Добавим в наш проект класс, который будет содержать структуру данных диаграммы:
public class ChartData
{
public string DataName { get; set; }
public int DataValue { get; set; }
}
Названия я выбрал произвольно.
Теперь добавим в XAML контрол который будет содержать в качестве данных поля нашего только что созданного класса:
И можно в code-behind создать данные и привязать их к нашей диаграмме:
List ChartInfo = new List();
ChartInfo.Add(new ChartData() { DataName = "Порно", DataValue = 20 });
ChartInfo.Add(new ChartData() { DataName = "Социальные сети", DataValue = 10 });
ChartInfo.Add(new ChartData() { DataName = "Почта", DataValue = 5 });
ChartInfo.Add(new ChartData() { DataName = "Скачивание другого браузера", DataValue = 200 });
(PieChart.Series[0] as PieSeries).ItemsSource = ChartInfo;
В результате получим такую вот диаграмму:
Если вам не нравятся цвета (например, режет глаз какой-нибудь яркий цвет), то их можно изменить. Для этого нужно добавить вложенный элемент Chart.Palette и заполнить вложенную коллекцию словарей нужными стилями (количество словарей должно соответствовать количеству данных). Изменив XAML на следующий:
получим:
Имеется возможность создавать различные типы диаграмм.
Например, ColumnChart:
Или аналогичную ей BarChart:
Кроме того можно создать линейную:
Или пузырьковую:
Аналогичная статья на английском:
Using Graphs and Charts in Windows Store Apps — Boredom Challenge Day 11.
В ней создается приложение под Windows 8.x, но отличий от UWP практически нет.
Другие полезности
Если добавив в приложение WinRTXamlToolkit.Controls.DataVisualisation.UWP мы получили возможность использовать диаграммы, то добавив таким же образом WinRTXamlToolkit.UWP мы получим возможность использовать различные интересные элементы управления.
Хорошее видео с описанием возможностей XAML Toolkit (на английском):
Сделаю и я небольшой обзор некоторых полезных элементов управления.
В заголовке XAML страницы должны быть добавлена ссылка а-ля:
xmlns:Controls="using:WinRTXamlToolkit.Controls"
Простой, но полезный контрол, который позволит задавать подсказку в текстовом поле
Забавный счетчик обратного отсчета
Скажем, если запустить его при запуске страницы, то код будет примерно такой:
protected async override void OnNavigatedTo(NavigationEventArgs e)
{
countC.CountdownComplete += CountC_CountdownComplete;
await countC.StartCountdownAsync(10); // отсчет на 10 секунд
}
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
countC.CountdownComplete -= CountC_CountdownComplete;
}
private void CountC_CountdownComplete(object sender, RoutedEventArgs e)
{
countC.Visibility = Visibility.Collapsed;
}
Если хотите, то можете и сами создать подобный счетчик с помощью следующих контролов, а можете вывести какую-либо информацию в наглядном виде:
С помощью следующего элемента управления на экран будет выведен TextBlock, но не простой, а с эффектом вылетающих одна за одной букв. Можно не заморачиваться с анимацией и не пользоваться Blend-ом.
Часто необходимый контрол, это числовое поле в котором значения увеличиваются кнопочками »+» и »-»:
А еще я обратил внимание на элемент управления TreeView:
Для выбора цвета вы можете использовать ColorPicker, но у меня он не заработал так как хотелось бы. Кроме того, есть возможность использовать HueRingPicker для выбора оттенка H формирования цвета по HLS.
Не все элементы управления из XAML Toolkit одинаково полезны. Некоторые фичи можно реализовать самостоятельно стандартными средствами UWP, а некоторые контролы из тулкита совсем потеряли актуальность с выходом универсальной платформы. Например, функционал элемента управления InputDialog из XAML Toolkit-а, перекочевал в стандартный элемент управления ContentDialog. Вместо Toolkit-овского WebBrowser-а можно использовать UWP-шный WebView.
AutoCompleteTextBox стал UWP-шным AutoSuggestBox. В UWP появились CalendarDatePicker, TimePicker и DatePicker, а значит Calendar Control for Windows 10 из XAML Toolkit теперь не у дел.
Кроме устаревших элементов в тулките содержится множество элементов, от которых, к моему сожалению, отказались в UWP. Взять, к примеру, элементы компоновки. Такие как DockPanel, WrapPanel и UniformGrid.
Элементы XAML Toolkit, могут быть хорошим подспорьем в быстрой разработке, а при желании можно и исходный код посмотреть для реализации своего аналога.
Полный перечень контролов, содержащихся в Xaml Toolkit с кратким описанием вы можете найти на GitHub странице проекта.
