Kolumne XAML Expertise: WPF und Windows-Apps

XAML-Tipp: WPF – Kostenlose Diagrammsteuerelemente mit LiveCharts
Kommentare

In der Kolumne „XAML Expertise“ präsentiert Gregor Biswanger Top-How-tos zum Thema XAML. Einsteiger und fortgeschrittene XAML-Experten sollen hier durch geballtes Wissen gesättigt werden. Heute gibt es folgende Expertise: „WPF: Kostenlose Diagrammsteuerelemente mit LiveCharts“.

Für UI-Steuerelemente gibt es zahlreiche kommerzielle Anbieter. Die Diagrammsteuerelemente sind darunter die am häufigsten gewünschten. Der einzige Nachteil: Sie sind nicht gerade günstig. Ein schneller Support und regelmäßige Updates haben eben ihren Preis, was durchaus gerechtfertigt ist. Eine sehr gute kostenlose Alternative bietet das Open-Source-Projekt LiveCharts. Dieses liefert umfangreiche Diagrammsteuerelemente, regelmäßig Updates, und die Community reagiert prompt bei Supportanfragen via GitHub-Issues.

Die Installation findet wie gewohnt über NuGet statt. Zu finden ist die kostenlose UI-Bibliothek unter LiveCharts.Wpf. Anschließend wird nur noch der XAML-Namespace in der gewünschten UI wie folgt referenziert:

xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

Zur Verfügung stehen zwölf unterschiedliche Diagramme, die individuell angepasst werden können und MVVM-Pattern-kompatibel sind. Als Beispiel wird hier ein Cartesian-Diagramm vorgestellt. LiveCharts bietet für komplexe Diagramme eigene Datentypen zur Unterstützung an. So wird in diesem Beispiel eine SeriesCollection im ViewModel instanziiert. Diese beinhaltet das gleiche Verhalten wie eine ObservableCollection, mit einem Datentyp von ChartValues. Listing 1 zeigt die Implementierung von einem ViewModel mit der SeriesCollection und ein paar einfachen Daten.

using LiveCharts;
using LiveCharts.Wpf;

namespace LiveChartsSample.ViewModels
{
  public class MainWindowViewModel
  {
    public SeriesCollection SampleData { get; set; }

    public MainWindowViewModel()
    {
      SampleData = new SeriesCollection
      {
        new LineSeries
        {
          Values = new ChartValues<double> {3, 5, 7, 4}
            },
            new LineSeries
            {
               Values = new ChartValues<decimal> {5, 6, 2, 7}
            }
        };
    }
  }
}

Für die Oberfläche wird nur eine Zeile Code zur Darstellung des Diagramms benötigt. Listing 2 zeigt, wie das ViewModel referenziert und mit dem Diagrammsteuerelement via Data Binding gebunden wird. Das Ergebnis ist in Abbildung 1 dargestellt. Wie das Beispiel demonstriert, ist LiveCharts wirklich sehr einfach zu nutzen. Für WinForms und WPF gibt es bereits volle Unterstützung. Das Team arbeitet gerade hart an einer Universal-Windows-Apps-Variante. Eine ausführliche Dokumentation für alle Diagramme finden Sie auf der Projektwebseite.

<Window x:Class="LiveChartsSample.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
  xmlns:viewModels="clr-namespace:LiveChartsSample.ViewModels"
  mc:Ignorable="d"
  Title="LiveCharts Sample" Height="350" Width="525">
    <Window.Resources>
      <viewModels:MainWindowViewModel x:Key="ViewModel" />
    </Window.Resources>
    <Grid DataContext="{StaticResource ViewModel}">
      <lvc:CartesianChart Series="{Binding SampleData}" />
    </Grid>
</Window>
Abb. 1: Cartesian-Diagramm von LiveCharts

Abb. 1: Cartesian-Diagramm von LiveCharts

Windows Developer

Windows DeveloperDieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.

 

Schnell und überall: Datenzugriff mit Entity Framework Core 2.0

Dr. Holger Schwichtenberg (www.IT-Visions.de/5Minds IT-Solutions)

C# 7.0 – Neues im Detail

Christian Nagel (CN innovation)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -