在 UWP 图表应用程序中使用 StrokeDashArray
Using StrokeDashArray in UWP charting-app
我正在尝试在 UWP 应用程序(使用 WinRTXamlToolkit.Controls.DataVisualization.Charting)中制作图表,同时应该会显示多条虚线。但是,只有第一条线是虚线,第二条和第三条线是实线。
我做错了什么还是这是一个错误?
下面是我的 XAML-代码和代码隐藏。我不明白的是:如果 Polyline-属性 StrokeThickness 适用于所有三条线(它们都相当粗),那么为什么 Polyline-属性 StrokeDashArray 只适用于第一条线行??
乔斯兰
<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>
我的代码隐藏:
using System.Collections.Generic;
使用Windows.Foundation;
使用 Windows.UI.Xaml.Controls;
命名空间 TestApp2
{
public 密封部分 class MainPage : Page
{
public 列表 l0 { get;放; } = 新列表();
public 列表 l1 { get;放; } = 新列表();
public 列表 l2 { get;放; } = 新列表();
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;
}
}
}
我测试了你的代码。正如您提到的,LineSeriesStyle1
仅应用于第一行。这是一个已确认的问题,您可以找到问题 here。
您可以在LineSeriesStyle1
样式的Polyline
标签中设置StrokeDashArray
属性的值来解决问题。
或者,您可以参考 .
找到另一个解决方案
我正在尝试在 UWP 应用程序(使用 WinRTXamlToolkit.Controls.DataVisualization.Charting)中制作图表,同时应该会显示多条虚线。但是,只有第一条线是虚线,第二条和第三条线是实线。 我做错了什么还是这是一个错误? 下面是我的 XAML-代码和代码隐藏。我不明白的是:如果 Polyline-属性 StrokeThickness 适用于所有三条线(它们都相当粗),那么为什么 Polyline-属性 StrokeDashArray 只适用于第一条线行??
乔斯兰
<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>
我的代码隐藏:
using System.Collections.Generic;
使用Windows.Foundation; 使用 Windows.UI.Xaml.Controls;
命名空间 TestApp2 { public 密封部分 class MainPage : Page { public 列表 l0 { get;放; } = 新列表(); public 列表 l1 { get;放; } = 新列表(); public 列表 l2 { get;放; } = 新列表();
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;
}
}
}
我测试了你的代码。正如您提到的,LineSeriesStyle1
仅应用于第一行。这是一个已确认的问题,您可以找到问题 here。
您可以在LineSeriesStyle1
样式的Polyline
标签中设置StrokeDashArray
属性的值来解决问题。
或者,您可以参考