C# 如何设计现代UI RadialGaugeChart
我在我的项目()中使用了现代UI图表,并且我正在尝试基于ValueMember更改图表前景和调色板 我有一个转换器:C# 如何设计现代UI RadialGaugeChart,c#,wpf,mvvm,charts,modern-ui,C#,Wpf,Mvvm,Charts,Modern Ui,我在我的项目()中使用了现代UI图表,并且我正在尝试基于ValueMember更改图表前景和调色板 我有一个转换器: public class MetricsColorConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { //Dim
public class MetricsColorConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
//Dim num As Integer
string color = null;
decimal intValue = default(decimal);
if (decimal.TryParse(value.ToString(), intValue)) {
if (intValue <= 60.0) {
return "Red";
} else if (intValue >= 60.01 && intValue < 80.0) {
return "Yellow";
} else if (intValue >= 80.01) {
return "Green";
}
}
return color;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
公共类MetricsColorConverter:IValueConverter
{
公共对象转换(对象值、类型targetType、对象参数、System.Globalization.CultureInfo区域性)
{
//Dim num作为整数
字符串颜色=空;
十进制intValue=默认值(十进制);
if(decimal.TryParse(value.ToString(),intValue)){
如果(intValue=60.01&&intValue<80.0){
返回“黄色”;
}否则如果(intValue>=80.01){
返回“绿色”;
}
}
返回颜色;
}
公共对象转换回(对象值、类型targetType、对象参数、System.Globalization.CultureInfo区域性)
{
抛出新的NotImplementedException();
}
}
还有我的xaml和图表:
<chart:RadialGaugeChart
ChartTitleVisibility="Collapsed"
ChartLegendVisibility="Collapsed"
ToolTipFormat="{}Caption: {0}, Value: '{1}', Series: '{2}', Percentage: {3:P2}"
HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,5,5,5" Height="170" >
<chart:RadialGaugeChart.Style>
<Style TargetType="{x:Type chart:RadialGaugeChart}">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=ProductivitySeries, Path=ValueMember, Converter={StaticResource MetricsConverter}}" Value="Green">
<Setter Property="Foreground" Value="{StaticResource Flat_GreenAccentBrush}"/>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=ProductivitySeries, Path=ValueMember, Converter={StaticResource MetricsConverter}} "Value="Yellow">
<Setter Property="Foreground" Value="{StaticResource Flat_MetricYellowBrush}"/>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=ProductivitySeries, Path=ValueMember, Converter={StaticResource MetricsConverter}}" Value="Red">
<Setter Property="Foreground" Value="{StaticResource Flat_MetricRedBrush}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</chart:RadialGaugeChart.Style>
<chart:RadialGaugeChart.Series>
<chart:ChartSeries
Name="ProductivitySeries"
SeriesTitle="Productivity"
ItemsSource="{Binding TeamLeaderViewM.TeamLeaderMetrics}"
DisplayMember="TeamLeader"
ValueMember="Productivity"/>
</chart:RadialGaugeChart.Series>
</chart:RadialGaugeChart>
不幸的是,这里没有任何变化。颜色总是一样的。
如何在图表中实现这一点
感谢您的建议您必须修改默认的
绘图区域
样式,如下所示:
<Window
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:local="clr-namespace:WpfApplication1"
xmlns:MetroChart="clr-namespace:De.TorstenMandelkow.MetroChart;assembly=De.TorstenMandelkow.MetroChart"
x:Class="WpfApplication1.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/De.TorstenMandelkow.MetroChart;component/Themes/Generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
<local:MetricsColorConverter x:Key="Converter1"></local:MetricsColorConverter>
<x:Array x:Key="SampleData1" Type="{x:Type local:MyData}">
<local:MyData TeamLeader="Team A" Productivity="50"></local:MyData>
<local:MyData TeamLeader="Team B" Productivity="75"></local:MyData>
<local:MyData TeamLeader="Team C" Productivity="90"></local:MyData>
</x:Array>
<Style x:Key="RadialGaugeChartPlotterAreaStyle1" TargetType="MetroChart:PlotterArea">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MetroChart:PlotterArea">
<MetroChart:FadingListView Style="{StaticResource FadingListViewStyle}" ItemsSource="{Binding Path=ParentChart.DataPointGroups, RelativeSource={RelativeSource Mode=TemplatedParent}}">
<MetroChart:FadingListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</MetroChart:FadingListView.ItemsPanel>
<MetroChart:FadingListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Visibility="{Binding Path=ShowCaption, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBlock Text="{Binding Path=Caption}" Style="{StaticResource SeriesTitleStyle}" />
</Border>
<MetroChart:FadingListView Style="{StaticResource FadingListViewStyle}"
x:Name="itemsControl"
ItemsSource="{Binding Path=DataPoints}"
Margin="5"
Grid.Row="1">
<MetroChart:FadingListView.ItemsPanel>
<ItemsPanelTemplate>
<!--<StackPanel Orientation="Horizontal" />-->
<MetroChart:UniformGridPanel Orientation="Horizontal" MinimalGridWidth="150.0" />
</ItemsPanelTemplate>
</MetroChart:FadingListView.ItemsPanel>
<MetroChart:FadingListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<MetroChart:RadialGaugePiece
Grid.Row="0"
Margin="5"
Background="{Binding Path=Value, Converter={StaticResource Converter1}}"
SelectedBrush="{Binding Path=SelectedBrush}"
Value="{Binding Path=Value}"
IsClickedByUser="{Binding Path=IsClickedByUser, Mode=TwoWay}"
IsSelected="{Binding Path=IsSelected}"
ClientWidth="180"
ClientHeight="180"
x:Name="radial">
</MetroChart:RadialGaugePiece>
<Border Grid.Row="1" HorizontalAlignment="Center" Margin="0 0 0 10">
<TextBlock Text="{Binding Path=SeriesCaption}" />
</Border>
</Grid>
</DataTemplate>
</MetroChart:FadingListView.ItemTemplate>
</MetroChart:FadingListView>
</Grid>
</DataTemplate>
</MetroChart:FadingListView.ItemTemplate>
</MetroChart:FadingListView>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<MetroChart:RadialGaugeChart ChartTitle="My Sample"
ChartSubTitle="Productivity"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
PlotterAreaStyle="{StaticResource RadialGaugeChartPlotterAreaStyle1}">
<MetroChart:RadialGaugeChart.Series>
<MetroChart:ChartSeries Name="ProductivitySeries"
SeriesTitle="My Series"
DisplayMember="TeamLeader"
ValueMember="Productivity"
ItemsSource="{StaticResource SampleData1}" />
</MetroChart:RadialGaugeChart.Series>
</MetroChart:RadialGaugeChart>
</Grid>
您能确认转换器工作正常吗?是的。我已经和标签核对过了,前景正在改变,非常感谢!还有一个问题,我想我现在可以在量表的百分比下添加额外的文本了吧?提前感谢是的,在
视图模型
中分配给团队领导
属性的任何内容都将显示在仪表下方。