Using StrokeDashArray in UWP charting-app

Question

I'm trying to make a chart in an UWP-app (using WinRTXamlToolkit.Controls.DataVisualization.Charting) in while multiple dashed lines should show up. However, only the FIRST line is dashed, the second and third are solid. Am I doing something wrong or is this a bug? Below is my XAML-code and code-behind. The thing I don't get is: if the Polyline-property StrokeThickness is working for all three lines (they are all reasonably thick), then why is the Polyline-property StrokeDashArray working only for the first line??

Joslan

<Page
x:Class="TestApp2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestApp2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Charting="using:WinRTXamlToolkit.Controls.DataVisualization.Charting"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
    <Style x:Key="LineSeriesStyle1" TargetType="Charting:LineSeries">
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="PolylineStyle">
            <Setter.Value>
                <Style TargetType="Polyline">
                    <Setter Property="StrokeThickness" Value="5"/>
                    <Setter Property="StrokeMiterLimit" Value="1"/>
                    <Setter Property="StrokeDashArray" Value="3"/>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Charting:LineSeries">
                    <Canvas x:Name="PlotArea">
                        <Polyline Points="{TemplateBinding Points}" Style="{TemplateBinding PolylineStyle}" Stroke="{TemplateBinding Background}"/>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<Grid>
    <Charting:Chart x:Name="LineChart" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="5" ScrollViewer.HorizontalScrollBarVisibility="Visible" Width="400" Height="400">
        <Charting:Chart.Axes>
            <Charting:LinearAxis x:Name="Xas" Orientation="X" Location="Bottom" Interval="1" ShowGridLines="True" Title="X-as" CanDrag="True"/>
            <Charting:LinearAxis x:Name="Yas" Orientation="Y" Location="Left" Interval="1" ShowGridLines="True"/>
        </Charting:Chart.Axes>
        <Charting:LineSeries x:Name="Line0" Style="{StaticResource LineSeriesStyle1}" IndependentValuePath="X" DependentValuePath="Y"/>

        <Charting:LineSeries x:Name="Line1" Style="{StaticResource LineSeriesStyle1}" IndependentValuePath="X" DependentValuePath="Y"/>
        <Charting:LineSeries x:Name="Line2" Style="{StaticResource LineSeriesStyle1}" IndependentValuePath="X" DependentValuePath="Y"/>
    </Charting:Chart>

</Grid>

My code-behind:

using System.Collections.Generic;

using Windows.Foundation; using Windows.UI.Xaml.Controls;

namespace TestApp2 { public sealed partial class MainPage : Page { public List l0 { get; set; } = new List(); public List l1 { get; set; } = new List(); public List l2 { get; set; } = new List();

    public MainPage()
    {
        this.InitializeComponent();
        l0.Add(new Point(10, 20));
        l0.Add(new Point(11, 21));
        l0.Add(new Point(12, 22));
        l0.Add(new Point(13, 23));
        Line0.ItemsSource=l0;
        
        l1.Add(new Point(10, 30));
        l1.Add(new Point(11, 31));
        l1.Add(new Point(12, 32));
        l1.Add(new Point(13, 33));
        Line1.ItemsSource = l1;

        l2.Add(new Point(10, 40));
        l2.Add(new Point(11, 41));
        l2.Add(new Point(12, 42));
        l2.Add(new Point(13, 43));
        Line2.ItemsSource = l2;
    }
}

}

YanGu YanGu · Accepted Answer · 2020-12-28T09:29:13

I have tested your code. Just as you mentioned, the LineSeriesStyle1 only applied to the first line. It is a confirmed issue, you could find the issue here.

You could set the value of StrokeDashArray property in Polyline tag in the LineSeriesStyle1 style to resolve the problem.

Or, you could find another solution referring to the case.

Using StrokeDashArray in UWP charting-app

1 Answers