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

         <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 странице проекта.
    Поделиться публикацией

    Комментарии 4

      +1
      Вдруг кто не знает: Syncfusion позволяет использовать все свои контролы бесплатно индивидуальным разработчикам и маленьким компаниям (до 5 пользователей), если выручка меньше $1 млн в год. Подробнее: https://www.syncfusion.com/products/communitylicense.
        0
        У синкфьюжена очень и очень тяжелые сборки, отказался в свое время от подписки по этой причине.
        0
        Может слегка не в тему вопрос, каково место UWP в современном мире? В мире enterprise (где .net преимущественно и используется) я вижу только WPF (+prism и пр.) и ASP.net, WinStore — даже не знаю, заходит ли туда реально кто-то (и уж тем более покупает), так где же эти UWP? Например, когда я на Windows 8 ставил плейер VLC, то сначала по недоумию поставил именно сторовский — это ад. Сама система окон сторовских приложений, что окно нельзя свернуть до нужного размера — я просто не понимаю, как это работает. Выкинул, как и skype, поставил нормальные классические Skype и VCL. Поймите меня правильно: как .net-разработчик я был бы только рад распространению C# в разные сферы, но пока что-то не вижу ничего кроме описанного.
          +1
          В последнее время вижу все меньше отличий UWP от UWP. Окошки давно сворачиваются и позволяют изменять размер. Приложения UWP предназначены для пользователей Windows Mobile, Raspberry Pi, планшетов, десктопов. Напиши один раз и запускай на различных устройствах. В windows 8 многие приложения были пробные. Мало кто понимал концепт. На мой вкус отсутствие "пуск" и работа с полноэкранными приложениями это было новаторски интересно, но непривычно пользователям, а вкус и удобство пользователей это главное.
          Определенный плюс приложений UWP это lifecycle. Установив приложение можешь быть уверен, что удалишь его подчистую и оно не оставит после себя кучу мусора в виде библиотек и др. Опять же есть уверенность в отсутствии вирусов. Но и .Net имеет свои плюсы, поэтому он вряд ли пропадет.

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

        Самое читаемое