712:Atta. cursor；ToggleButton

1

 <Button atta:AttacherContainer.Kind="WindowClose"
         Cursor="Hand"
         Style="{StaticResource menuIconButton}"/>

整体功能

这是程序窗口关闭按钮 ，点击执行ViewModel里的ShutDownCommand实现软件退出；挂载第三方附加属性做窗口关闭专用样式区分，鼠标悬浮显示手型，复用全局图标按钮模板。

2. atta:AttacherContainer.Kind="WindowClose"

1. atta：项目中引入的附加属性命名空间（自制工具类 / HandyControl 配套Attacher工具）；
2. AttacherContainer：附加属性静态类；
3. Kind="WiClose"：标记该按钮用途为「窗口关闭」；

• 作用：在全局menuIconButton样式/Behavior中识别类型，自动加载关闭图标、 hover红色高亮、专属缩放动画，不用单独写一套样式。
  底层原理：附加属性AttachedProperty，给Button扩展额外业务标记，纯XAML无后台代码实现差异化UI。

4. Cursor="Hand"

鼠标移入按钮时，光标变为手型，提示可点击交互，提升界面操作辨识度。

5. Style="{StaticResource menuIconButton}"

复用全局静态资源样式menuIconButton，：

• 内置ControlTemplate + ContentPresenter承载关闭图标；
• 自带IsMouseOver悬浮放大动画（0.1s移入放大1.05倍、0.15s回弹）；
• 统一标题栏最小化/最大化/关闭按钮尺寸、圆角、缩放交互，界面风格统一。

完整配套关联链路

1. 样式menuIconButton内部通过atta:AttacherContainer.Kind判断按钮类型：
   • WindowClose：加载×关闭图标，hover背景变红；
   • 配套你之前的Viewbox+Polygon三角箭头逻辑，同类图标统一管理；
2. 点击触发ShutDownCommand，完全符合MVVM分层，界面与设备退出业务解耦；
3. 标题栏同系列按钮（最小化、还原）仅修改Kind和Command，复用同一套Style，减少重复XAML代码。

典型ViewModel命令示例

// 主窗口ViewModel
public ICommand ShutDownCommand { get; }

public MainViewModel()
{
    ShutDownCommand = new RelayCommand(ExecuteShutdown);
}

private void ExecuteShutdown()
{
    // 1. 弹窗确认是否退出
    var confirm = MessageBox.Show("确定要关闭", "退出提示", MessageBoxButton.YesNo);
    if (confirm != MessageBoxResult.Yes) return;

    // 2. 停止服务、释放硬件资源
    _deviceService.StopScan();
    // 3. 保存MachineConfig设备配置
    _configService.SaveMachineConfig();
    // 4. 关闭应用程序
    Application.Current.Shutdown();
}

踩坑注意点

1. atta命名空间缺失：页面顶部缺少xmlns:atta="clr-namespace:项目命名空间.Utils"，XAML直接报错；
2. ShutDownCommand无响应：ViewModel未实现INotifyPropertyChanged、DataContext未正确绑定到窗口；
3. 附加属性不生效：menuIconButton样式内未读取AttacherContainer.Kind做图标切换；
4. 按钮无图标：模板内ContentPresenter依赖Kind加载对应矢量图形，标记写错会空白。

2

 <Button.Content>
     <StackPanel>
         <m:MaterialIcon
     
             Kind="Group">
             <m:MaterialIcon.Effect>
                 <DropShadowEffect
                     BlurRadius="1"
                     ShadowDepth="1"
                     Color="#333333"/>
             </m:MaterialIcon.Effect>
         </m:MaterialIcon>

整体作用

按钮内部内容使用垂直StackPanel承载大尺寸Group分组矢量图标，图标带白色半透填充+灰色投影阴影

分层拆解

1. <Button.Content>

专门用来定义按钮内部自定义复合内容；

如果不写这个标签，按钮只能填简单文字，内部需要图标+文字组合时，必须用Button.Content包裹布局容器（StackPanel/Grid）。

2. 外层 <StackPanel>

布局容器，默认垂直排列（Orientation="Vertical"）；

当前只放了一个图标，后续可以追加<TextBlock>写按钮文字，实现「图标在上、文字在下」的标准功能按钮布局：

<StackPanel>
    <m:MaterialIcon ... />
    <TextBlock Text="批量分组检测" Foreground="White" HorizontalAlignment="Center"/>
</StackPanel>

3. <m:MaterialIcon> 核心图标控件

这是 Material.Icons.Wpf 第三方图标库控件（你项目上位机统一用的矢量图标组件）

<m:MaterialIcon
   
    Foreground="#e6ffffff"
    Kind="Group">

• Width="70" Height="70"：图标固定70×70大尺寸，首页功能大按钮规格；
• Foreground="#e6ffffff"：填充颜色，e6是透明度，后面ffffff白色 → 半透白色图标；
• Kind="Group"：指定图标类型，显示「分组/群组」矢量图形，用于批量BGA、多板分组检测功能入口。

4. 图标阴影特效 DropShadowEffect

<m:MaterialIcon.Effect>
    <DropShadowEffect
        BlurRadius="1"
        ShadowDepth="1"
        Color="#333333"/>
</m:MaterialIcon.Effect>

给图标增加细微灰色投影，提升悬浮立体感：

• BlurRadius="1"：阴影模糊程度1，不夸张，工业界面简洁风格；
• ShadowDepth="1"：阴影偏移距离1像素；
• Color="#333333"：深灰色阴影，不会抢白色图标的视觉重点。

完整可扩展成品（图标+文字标准按钮）

<Button Margin="10"
        Command="{Binding GroupScanCommand}"
        Style="{StaticResource menuIconButton}">
    <Button.Content>
        <StackPanel>
            <m:MaterialIcon
                Width="70"
                Height="70"
                Foreground="#e6ffffff"
                Kind="Group">
                <m:MaterialIcon.Effect>
                    <DropShadowEffect
                        BlurRadius="1"
                        ShadowDepth="1"
                        Color="#333333"/>
                </m:MaterialIcon.Effect>
            </m:MaterialIcon>
            <TextBlock Text="分组批量扫描" Foreground="White" FontSize="14" Margin="0,8,0,0" HorizontalAlignment="Center"/>
        </StackPanel>
    </Button.Content>
</Button>

结合你之前知识点联动说明

1. 按钮套用menuIconButton样式，自带ControlTemplate、ScaleTransform悬浮放大动画；
2. 模板内部ContentPresenter会自动渲染这里的StackPanel图标内容；
3. 鼠标移入时整套图标+文字同步缩放，交互统一；

常见踩坑点

1. 图标空白/不显示：缺少NuGet包Material.Icons.Wpf、页面未引入命名空间xmlns:m="clr-namespace:Material.Icons.Wpf;assembly=Material.Icons.Wpf"；
2. 透明色异常：Foreground十六进制格式为AARRGGBB，透明度在前，写反会变成纯黑/纯白；
3. 阴影卡顿：页面大量图标同时加DropShadowEffect会增加GPU消耗，首页少量大按钮使用无压力，表格小图标建议移除特效；
4. 图标拉伸变形：必须同时设置Width+Height相等，保证矢量图标等比例不变形。

3

ToggleButton

Visibility="{Binding ElementName=ModeButton,
                     Path=IsMouseOver,
                     Converter={StaticResource Boolean2VisiblityConverter}}"

绑定三要素拆解

ElementName=ModeButton

指定绑定目标是外层命名为ModeButton的ToggleButton；

Path=IsMouseOver

读取按钮自带属性：鼠标是否悬浮在按钮范围内（true/false）；

Boolean2VisiblityConverter 布尔转可见性转换器

转换逻辑（标准实现）：

输入 true（鼠标悬浮按钮）→ 返回 Visibility.Visible → 画布显示，弹出菜单；

输入 false（鼠标离开按钮）→ 返回 Visibility.Collapsed → 画布完全隐藏，不占用布局空间。