在控件中的ControlTemplate的觸發器
<Button Content="將ControlTemplate定義在在控件中" Width="280" Height="40" Margin="10" Foreground="#747787"><Button.Template><ControlTemplate TargetType="Button"><Border x:Name="border" Background="Transparent" CornerRadius="5" BorderThickness="1" BorderBrush="#C9CCD5"><ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Content" Value="MouseOver" TargetName="contentPresenter"/></Trigger><Trigger Property="IsMouseOver" Value="False"><Setter Property="Content" Value="將ControlTemplate定義在在控件中" TargetName="contentPresenter"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Button.Template>
</Button>| 元素類型 | 屬性名稱 | 屬性值/技術說明 | 核心作用與優化建議 |
|---|---|---|---|
| Button | Content | "將ControlTemplate定義在在控件中" | 文本硬編碼，建議改用資源綁定{x:Static} |
| Width | 280（固定寬度違反響應式規范，建議MinWidth="260"） | 企業規范：HIG-2025-UI-003 | |
| Height | 40（固定高度限制多語言擴展，應啟用SizeToContent） | ||
| Margin | 10（統一外邊距，推薦分層定義如Margin="5,10"） | ||
| Foreground | #747787（文字顏色未綁定到模板，需通過TemplateBinding傳遞） | 關鍵缺陷：顏色未生效 | |
| Button.Template | TargetType | Button（限定模板作用域） | |
| ControlTemplate | 嵌套結構 | 定義按鈕視覺樹（透明背景+動態內容切換） | |
| Border | x:Name | "border"（命名元素便于觸發器操作） | 應添加CacheMode="BitmapCache"優化渲染 |
| Background | Transparent（透明背景可能影響點擊區域檢測） | 建議改用{x:Null}徹底移除背景層 | |
| CornerRadius | 5（圓角標準需統一，推薦引用資源CornerRadius.Medium） | ||
| BorderThickness | 1（高DPI屏幕建議采用1.5） | ||
| BorderBrush | #C9CCD5（淺灰邊框，應引用資源BorderSecondary） | ||
| ContentPresenter | x:Name | "contentPresenter"（命名便于觸發器控制） | |
| HorizontalAlignment | Center（內容居中，但未同步TextBlock.TextAlignment） | ||
| VerticalAlignment | Center（符合企業布局規范） | ||
| ControlTemplate.Triggers | 交互邏輯 | 通過觸發器實現鼠標懸停內容切換 | 邏輯缺陷：直接修改內容而非樣式 |
| Trigger | Property | IsMouseOver（檢測懸停狀態） | |
| Value | True/False（觸發條件） | ||
| Setter.TargetName | contentPresenter（操作目標元素） | ||
| Setter.Property | Content（錯誤操作：應修改樣式屬性而非內容） | 違反MVVM模式 | |
| Setter.Value | "MouseOver"/原文本（硬編碼內容，需改用DynamicResource） |
關鍵技術缺陷與改進方案
1. 內容與樣式邏輯混淆
<!-- 錯誤實現：直接修改內容 -->
<Setter Property="Content" Value="MouseOver"/><!-- 正確方案：修改視覺屬性 -->
<Setter TargetName="border" Property="BorderBrush" Value="#4A90E2"/>
<Setter TargetName="contentPresenter" Property="Foreground" Value="White"/>在Resources定義的ControlTemplate的觸發器
<Window.Resources><ControlTemplate x:Key="ButtonTemplate" TargetType="Button"><Border Background="#C6D2FC" CornerRadius="5" BorderThickness="1" BorderBrush="#545BAD"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Width" Value="300"/></Trigger><Trigger Property="IsMouseOver" Value="False"><Setter Property="Width" Value="280"/></Trigger></ControlTemplate.Triggers></ControlTemplate>
</Window.Resources><Button Content="將ControlTemplate定義在資源中" Template="{StaticResource ButtonTemplate}" Height="40" Margin="10" Foreground="#707CA5"/>| 元素類型 | 屬性名稱 | 屬性值/技術說明 | 優化建議與規范參考 |
|---|---|---|---|
| Window.Resources | 資源容器聲明 | 定義全局可復用的控件模板資源 | |
| ControlTemplate | x:Key | ButtonTemplate（資源鍵名，需符合大駝峰命名法） | 建議分離至獨立資源字典Styles.xaml |
| TargetType | Button（限定模板僅適用于按鈕控件） | ||
| Border | Background | #C6D2FC（淺藍色背景，應改用資源引用< |
)
