如何为MaterialDesign ToggleButton添加对应IE11的第三种PackIcon状态

状态映射规则 #

基于MaterialDesign的ToggleButton内置三态支持，三个可切换状态与内容属性的对应关系为：

• 当IsChecked = false：显示控件默认Content内容，即原配置中的Edge图标
• 当IsChecked = true：显示ToggleButtonAssist.OnContent定义的内容，即原配置中的Chrome图标
• 当IsChecked = null（三态特有的不确定状态）：显示ToggleButtonAssist.UndefinedContent定义的内容，用来承载新增的IE11图标

配置注意要点 #

• 必须保留原有IsThreeState="True"配置，否则控件只会保留两态切换逻辑
• 绑定的业务属性需设置为可空布尔类型（bool?），否则无法接收null取值，会导致第三态无法触发
• 每个状态的PackIcon可以独立设置颜色、尺寸等属性，互不影响

完整配置代码 #

<ToggleButton Foreground="DodgerBlue" IsThreeState="True" Margin="2" 
              Style="{StaticResource MaterialDesignActionToggleButton}"
              ToolTip="Check this out!" 
              IsChecked="{Binding Path=xxxxxxxxxxxxx, Mode=TwoWay}">
    <!-- 未选中态：Edge图标 -->
    <ToggleButton.Content>
        <materialDesign:PackIcon Kind="MicrosoftEdge" Height="Auto" Width="Auto"/>
    </ToggleButton.Content>

    <!-- 选中态：Chrome图标 -->
    <materialDesign:ToggleButtonAssist.OnContent>
        <materialDesign:PackIcon Kind="GoogleChrome" Height="Auto" Width="Auto" Foreground="Red"/>
    </materialDesign:ToggleButtonAssist.OnContent>

    <!-- 不确定态：IE11图标（第三态） -->
    <materialDesign:ToggleButtonAssist.UndefinedContent>
        <materialDesign:PackIcon Kind="InternetExplorer" Height="Auto" Width="Auto" Foreground="DarkOrange"/>
    </materialDesign:ToggleButtonAssist.UndefinedContent>
</ToggleButton>

交互逻辑说明 #

配置完成后，点击控件会在三个状态间循环切换，依次匹配Edge、Chrome、IE11三个图标，业务层会接收到对应状态的false/true/null取值，完成三值绑定。

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