如何在.NET8 MAUI的LiveCharts仪表中更改数值及刻度等颜色？

针对你在.NET 8 MAUI应用中使用LiveCharts的两种仪表，以下是适配系统主题修改数值、外部线条、刻度颜色的具体方法：

一、Angular Gauge（角仪表） #

通过配置AngularGaugeSeries的相关Paint属性，结合MAUI的AppThemeBinding实现主题适配：

• 刻度颜色：设置TicksPaint（刻度线）和LabelsPaint（刻度文本）
• 外部线条（背景环边框）：设置BackgroundPaint
• 中心数值文本：设置CenterLabelPaint

XAML示例：

<lvc:AngularGaugeSeries Value="{Binding GaugeValue}">
    <!-- 刻度线颜色 -->
    <lvc:AngularGaugeSeries.TicksPaint>
        <lvc:SolidColorPaint Color="{AppThemeBinding Light=Black, Dark=White}" />
    </lvc:AngularGaugeSeries.TicksPaint>
    <!-- 刻度文本颜色 -->
    <lvc:AngularGaugeSeries.LabelsPaint>
        <lvc:SolidColorPaint Color="{AppThemeBinding Light=Black, Dark=White}" />
    </lvc:AngularGaugeSeries.LabelsPaint>
    <!-- 外部背景环颜色 -->
    <lvc:AngularGaugeSeries.BackgroundPaint>
        <lvc:SolidColorPaint Color="{AppThemeBinding Light=Gray, Dark=DarkGray}" />
    </lvc:AngularGaugeSeries.BackgroundPaint>
    <!-- 中心数值文本颜色 -->
    <lvc:AngularGaugeSeries.CenterLabelPaint>
        <lvc:SolidColorPaint Color="{AppThemeBinding Light=Black, Dark=White}" />
    </lvc:AngularGaugeSeries.CenterLabelPaint>
</lvc:AngularGaugeSeries>

二、Multiple Values Gauge（多值仪表） #

这类仪表基于PieSeries实现，需分别配置系列线条、提示文本及中心数值的颜色：

• 外部线条：设置每个PieSeries的Stroke属性
• 刻度/提示文本：自定义Tooltip的TextPaint
• 中心数值：通过CenterContent自定义标签并绑定颜色

XAML示例：

<lvc:PieChart>
    <lvc:PieChart.Series>
        <!-- 每个系列的外部线条颜色 -->
        <lvc:PieSeries Value="{Binding Value1}" Stroke="{AppThemeBinding Light=Black, Dark=White}" />
        <lvc:PieSeries Value="{Binding Value2}" Stroke="{AppThemeBinding Light=Black, Dark=White}" />
        <!-- 其他系列同理 -->
    </lvc:PieChart.Series>
    <!-- 提示文本颜色 -->
    <lvc:PieChart.Tooltip>
        <lvc:DefaultTooltip TextPaint="{AppThemeBinding Light=Black, Dark=White}" />
    </lvc:PieChart.Tooltip>
    <!-- 中心数值文本颜色 -->
    <lvc:PieChart.CenterContent>
        <Label Text="{Binding TotalValue}" TextColor="{AppThemeBinding Light=Black, Dark=White}" 
               FontSize="20" FontWeight="Bold" />
    </lvc:PieChart.CenterContent>
</lvc:PieChart>

后台代码动态设置（可选） #

如果需要在代码中根据主题动态调整，可通过判断当前主题设置对应颜色：

var isDarkTheme = Application.Current.RequestedTheme == AppTheme.Dark;
var textColor = isDarkTheme ? Colors.White : Colors.Black;
var borderColor = isDarkTheme ? Colors.DarkGray : Colors.Gray;

// 配置Angular Gauge
angularGaugeSeries.TicksPaint = new SolidColorPaint(textColor);
angularGaugeSeries.LabelsPaint = new SolidColorPaint(textColor);
angularGaugeSeries.BackgroundPaint = new SolidColorPaint(borderColor);

// 配置多值仪表
foreach (var series in pieChart.Series.OfType<PieSeries>())
{
    series.Stroke = new SolidColorPaint(textColor);
}

内容的提问来源于stack exchange，提问作者Enrico