Удивился тому, что на хабре нет ни одной публикации про 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 контрол который будет содержать в качестве данных поля нашего только что созданного класса:

     <Charting:Chart x:Name="PieChart" Width="700" Height="500">
         <Charting:PieSeries Title="Использование IE" Margin="0" IndependentValuePath="DataName"
                                              DependentValuePath="DataValue" IsSelectionEnabled="True"/>
     </Charting:Chart>

И можно в code-behind создать данные и привязать их к нашей диаграмме:

            List<ChartData> ChartInfo = new List<ChartData>();
            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 на следующий:

 <Charting:Chart x:Name="PieChart" Width="700" Height="500">
    <Charting:PieSeries Title="Использование IE" Margin="0" IndependentValuePath="DataName"
                                                        DependentValuePath="DataValue" IsSelectionEnabled="True"/>
                <Charting:Chart.Palette>
                    <Charting:ResourceDictionaryCollection>
                        <ResourceDictionary>
                            <Style x:Key="DataPointStyle" TargetType="Control">
                                <Setter Property="Background" Value="Red" />
                            </Style>
                        </ResourceDictionary>
                        <ResourceDictionary>
                            <Style x:Key="DataPointStyle" TargetType="Control">
                                <Setter Property="Background" Value="Yellow" />
                            </Style>
                        </ResourceDictionary>
                        <ResourceDictionary>
                            <Style x:Key="DataPointStyle" TargetType="Control">
                                <Setter Property="Background" Value="Gray" />
                            </Style>
                        </ResourceDictionary>
                        <ResourceDictionary>
                            <Style x:Key="DataPointStyle" TargetType="Control">
                                <Setter Property="Background" Value="Blue" />
                            </Style>
                        </ResourceDictionary>
                    </Charting:ResourceDictionaryCollection>
    </Charting:Chart.Palette>
 </Charting:Chart>

получим:



Имеется возможность создавать различные типы диаграмм.
Например, ColumnChart:

     <Charting:Chart x:Name="ColumnChart" Width="700" Height="500">
         <Charting:ColumnSeries Title="Причины потери памяти" Margin="0" IndependentValuePath="DataName"
                                                         DependentValuePath="DataValue" IsSelectionEnabled="True"/>
     </Charting:Chart>

Или аналогичную ей BarChart:

    <Charting:Chart x:Name="BarChart" Width="700" Height="500">
         <Charting:BarSeries Title="Причины потери памяти" Margin="0" IndependentValuePath="DataName"
                                                       DependentValuePath="DataValue" IsSelectionEnabled="True"/>
   </Charting:Chart>

Кроме того можно создать линейную:

     <Charting:Chart x:Name="LineChart" Width="700" Height="350">
         <Charting:LineSeries Title="Восприятие скоротечности времени" Margin="0" IndependentValuePath="DataName"
                                                      DependentValuePath="DataValue" IsSelectionEnabled="True"/>
     </Charting:Chart>

Или пузырьковую:

     <Charting:Chart x:Name="BubbleChart" Width="700" Height="350">
         <Charting:BubbleSeries Title="Топ неудачных женских шуток" Margin="0" IndependentValuePath="DataName"
                                                      DependentValuePath="DataValue" IsSelectionEnabled="True"/>
     </Charting:Chart>

Аналогичная статья на английском:
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"

Простой, но полезный контрол, который позволит задавать подсказку в текстовом поле

<Controls:WatermarkTextBox WatermarkText="Введите фамилию" Width="200" />

Забавный счетчик обратного отсчета

<Controls:CountdownControl Width="200" Height="200" />

Скажем, если запустить его при запуске страницы, то код будет примерно такой:

        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;
        }

Если хотите, то можете и сами создать подобный счетчик с помощью следующих контролов, а можете вывести какую-либо информацию в наглядном виде:

<Controls:PieSlice StartAngle="20" EndAngle="280" Fill="Green" Radius="100" />
<Controls:RingSlice StartAngle="0" EndAngle="220" Fill="Pink" Radius="100" InnerRadius="75" />

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

<Controls:CascadingTextBlock Text="Текст для примера" StartDelay="3000" />

Часто необходимый контрол, это числовое поле в котором значения увеличиваются кнопочками «+» и «-»:

  <Controls:NumericUpDown Width="200" Minimum="0" Maximum="100" SmallChange="0.1" LargeChange="10" />

А еще я обратил внимание на элемент управления TreeView:

        <Controls:TreeView>
            <Controls:TreeViewItem Header="123" />
            <Controls:TreeViewItem Header="Новая папка" />
            <Controls:TreeViewItem Header="Новая папка (2)">
                <Controls:TreeViewItem Header="йцуку" />
            </Controls:TreeViewItem>
            <Controls:TreeViewItem Header="фотки" />
        </Controls: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 странице проекта.