MAUI中结合BoolToObjectConverter与IconTintColorBehavior设置图标颜色问题

核心问题分析 #

1. SVG内部固定的fill样式会优先覆盖外部TintColor设置，导致着色行为失效
2. 转换器未明确指定TargetType，可能存在类型不匹配问题
3. Image标签存在语法错误，影响绑定解析

步骤1：修改SVG文件，移除固定填充色 #

SVG自带的fill属性会阻止TintColor生效，需修改为可继承外部色调的格式：

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.95 7.11">
  <defs>
    <style>
      .cls-1 {
        stroke-width: 0px;
      }
    </style>
  </defs>
  <g id="Layer_1-2" data-name="Layer 1">
    <!-- 使用currentColor继承外部色调 -->
    <path class="cls-1" fill="currentColor" d="M150 0 L75 200 L225 200 Z"/>
  </g>
</svg>

步骤2：修正转换器配置，指定TargetType #

转换器需明确返回Color类型，否则绑定会因类型不匹配失效：

<ContentPage.Resources>
    <Color x:Key="TrueColor">Black</Color>
    <Color x:Key="FalseColor">Red</Color>
    <toolkit:BoolToObjectConverter x:Key="BoolToColorConverter" 
                                   TrueObject="{StaticResource TrueColor}" 
                                   FalseObject="{StaticResource FalseColor}"
                                   TargetType="{x:Type Color}"/>
</ContentPage.Resources>

若直接使用颜色字符串，同样需指定TargetType：

<toolkit:BoolToObjectConverter x:Key="BoolToColorConverter" 
                               TrueObject="Black" 
                               FalseObject="Red"
                               TargetType="{x:Type Color}"/>

步骤3：修复Image标签的语法错误 #

移除多余的双引号，确保绑定解析正常：

<Image 
    Source="icon_my_notifications.png"
    Grid.Row="1"
    Grid.Column="0">
    <Image.Behaviors>
        <toolkit:IconTintColorBehavior 
            TintColor="{Binding opened, Converter={StaticResource BoolToColorConverter}}"/>
    </Image.Behaviors>
</Image>

额外验证点 #

• 确认ViewModel中的opened属性实现了INotifyPropertyChanged，值变化时会触发属性通知
• 可通过Label绑定验证转换器是否正常工作：

  <Label Text="颜色测试" TextColor="{Binding opened, Converter={StaticResource BoolToColorConverter}}"/>
  

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