关于Mahapps Badged控件的徽章尺寸调整及脉冲效果实现问题

嘿，我来帮你搞定这两个关于Mahapps.Metro Badged控件的问题！

当然可以调整徽章的尺寸，不用改复杂模板也能快速实现，有两种常用方式：

• 直接设置内置属性：Badged控件自带BadgeWidth和BadgeHeight属性，直接赋值就能改变徽章大小，比如：

  <Controls:Badged Badge="99" BadgeWidth="32" BadgeHeight="32">
      <Button Content="消息中心" />
  </Controls:Badged>
  

• 自定义BadgePresenter样式：如果需要更精细的控制（比如同时调整内边距、圆角），可以给BadgePresenterStyle写个自定义样式：

  <Controls:Badged Badge="5">
      <Button Content="测试按钮" />
      <Controls:Badged.BadgePresenterStyle>
          <Style TargetType="Controls:BadgePresenter">
              <Setter Property="Width" Value="28"/>
              <Setter Property="Height" Value="28"/>
              <Setter Property="Padding" Value="4"/>
              <Setter Property="CornerRadius" Value="14"/> <!-- 圆形徽章 -->
          </Style>
      </Controls:Badged.BadgePresenterStyle>
  </Controls:Badged>
  

你之前的动画没生效，大概率是因为动画目标属性的路径写错了，Badge的视觉元素是BadgePresenter，得把动画目标指向它才行。另外，脉冲效果结合缩放+颜色变化会更明显，给你一个完整的可运行示例：

<Controls:Badged x:Name="MyBadged" Badge="0">
    <!-- 触发徽章变化的按钮 -->
    <Button Content="点击更新徽章数值" Click="Button_Click"/>

    <Controls:Badged.Triggers>
        <EventTrigger RoutedEvent="Controls:Badged.BadgeChanged">
            <BeginStoryboard>
                <Storyboard>
                    <!-- 缩放脉冲动画：从1倍放大到1.5倍再回弹，重复2次 -->
                    <DoubleAnimation 
                        Storyboard.TargetProperty="(Controls:Badged.BadgePresenter).(FrameworkElement.RenderTransform).(ScaleTransform.ScaleX)"
                        From="1" To="1.5" Duration="0:0:0.25" 
                        AutoReverse="True" RepeatBehavior="2x"/>
                    <DoubleAnimation 
                        Storyboard.TargetProperty="(Controls:Badged.BadgePresenter).(FrameworkElement.RenderTransform).(ScaleTransform.ScaleY)"
                        From="1" To="1.5" Duration="0:0:0.25" 
                        AutoReverse="True" RepeatBehavior="2x"/>
                    
                    <!-- 颜色闪烁动画：从红色变回默认白色 -->
                    <ColorAnimation
                        Storyboard.TargetProperty="(Controls:Badged.BadgeForeground).(SolidColorBrush.Color)"
                        From="#FFE53935" To="#FFFFFFFF" Duration="0:0:0.25"
                        AutoReverse="True" RepeatBehavior="2x"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Controls:Badged.Triggers>

    <!-- 必须给BadgePresenter设置缩放变换，否则缩放动画无效 -->
    <Controls:Badged.BadgePresenterStyle>
        <Style TargetType="Controls:BadgePresenter">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform CenterX="14" CenterY="14"/> <!-- 缩放中心对齐徽章中点 -->
                </Setter.Value>
            </Setter>
        </Style>
    </Controls:Badged.BadgePresenterStyle>
</Controls:Badged>

对应的后台代码（用来触发Badge变化）：

private void Button_Click(object sender, RoutedEventArgs e)
{
    MyBadged.Badge = int.Parse(MyBadged.Badge.ToString()) + 1;
}

关键注意点：

• 必须给BadgePresenter设置RenderTransform，否则缩放动画找不到目标变换属性
• 动画的TargetProperty路径要准确指向BadgePresenter的对应属性
• 如果你的Badge是自定义内容（不是纯文本），可以把颜色动画换成背景色动画，调整Storyboard.TargetProperty为(Controls:Badged.BadgeBackground).(SolidColorBrush.Color)

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