WPF 繪圖實戰：用 Path 畫出對勾 (✓) 與叉叉 (✗)

前言

WPF 的 Path 元素配合幾何路徑語法 (Data 屬性) 可繪製任意向量圖形。本文提供現成的對勾與叉叉 Path 定義，並示範如何套用於 DataTemplate 呈現硬體偵測通過/失敗狀態，同時分享一個自訂 ListView 樣式範例。

一、對勾 Path (綠色填滿)

<Path Data="M43,5 L20,40 20,40 0,20 6,15 18,26 37,7 43,5 z"
      Fill="Green" Margin="5" Stretch="Fill" HorizontalAlignment="Right"/>

• M (Move) 起點 (43,5)
• L (Line) 依序連線形成對勾輪廓
• z 閉合路徑
• Stretch="Fill" 讓幾何圖形填滿配置區域

二、叉叉 Path (紅色描邊)

<Path Margin="5" Data="M50,25 L25,50 M25,25 50,50"
      Fill="#FFF4F4F5" Stretch="Fill" Stroke="Red" StrokeThickness="8"
      HorizontalAlignment="Right"/>

• 兩條 M...L 子路徑形成 X 形
• Stroke="Red" + StrokeThickness="8" 粗紅線
• Fill="#FFF4F4F5" 淺灰背景

三、應用於 DataTemplate：偵測結果視覺化

<DataTemplate x:Key="dui" DataType="{x:Type local:DeviceCheckInfo}">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Name}" Margin="10" VerticalAlignment="Center" FontSize="20"/>
        <TextBlock Text="{Binding CheckContent}" Margin="10" VerticalAlignment="Center" FontSize="20"/>
        <Path x:Name="dui" Data="M43,5 L20,40 20,40 0,20 6,15 18,26 37,7 43,5 z"
              Fill="Green" Margin="5" Stretch="Fill"/>
    </StackPanel>
</DataTemplate>

<DataTemplate x:Key="cuo" DataType="{x:Type local:DeviceCheckInfo}">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Name}" Margin="10" VerticalAlignment="Center" FontSize="20"/>
        <TextBlock Text="{Binding CheckContent}" Margin="10" VerticalAlignment="Center" FontSize="20"/>
        <Path Margin="5" Data="M50,25 L25,50 M25,25 50,50"
              Fill="#FFF4F4F5" Height="40" Stretch="Fill" Stroke="Red" Width="40" StrokeThickness="8"/>
    </StackPanel>
</DataTemplate>

四、額外分享：自訂 ListView 樣式 (圓角邊框、WrapPanel 佈局、ItemContainer 模板)

<ListView Name="LV_Test" SelectionMode="Multiple" Background="{x:Null}">
    <ListView.Template>
        <ControlTemplate>
            <Border CornerRadius="10" BorderBrush="RoyalBlue" BorderThickness="5">
                <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
                    <ItemsPresenter />
                </ScrollViewer>
            </Border>
        </ControlTemplate>
    </ListView.Template>
    <ListView.ItemsPanel>
        <ItemsPanelTemplate><WrapPanel IsItemsHost="True"/></ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListViewItem}">
                        <Border Name="BD_Collector" CornerRadius="5" Background="DarkSeaGreen"
                              Width="auto" Height="30" Margin="5">
                            <StackPanel Orientation="Horizontal">
                                <Label Content="{Binding XH}" VerticalContentAlignment="Center"
                                       HorizontalContentAlignment="Center" FontSize="13"/>
                                <Label Content="{Binding time}" VerticalContentAlignment="Center"
                                       HorizontalContentAlignment="Center" FontSize="13"/>
                            </StackPanel>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="BD_Collector" Property="Background" Value="YellowGreen"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="BD_Collector" Property="Background" Value="DarkGreen"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.View>
        <GridView>
            <GridViewColumn Header="序號" DisplayMemberBinding="{Binding XH}" Width="100"/>
            <GridViewColumn Header="日期" DisplayMemberBinding="{Binding time}" Width="140"/>
            <GridViewColumn Header="項目" DisplayMemberBinding="{Binding CostItem}" Width="100"/>
            <GridViewColumn Header="金額" DisplayMemberBinding="{Binding CostMoney}" Width="100"/>
        </GridView>
    </ListView.View>
</ListView>

五、XAML 剖析器異常排查提示

遇到 System.Windows.Baml2006.DeferredBinaryDeserializerExtension 異常且堆疊無明確行號時，多半是資源字典中某屬性值格式錯誤 (如 TextBlock.Background 設為非法顏色字串)。排查策略：逐一移除/註解控件 直到錯誤消失，定位問題元素。

總結

Path + 幾何路徑是 WPF 繪製簡單圖示 (對勾、叉叉、箭頭、星星) 的最佳選擇：無圖片檔案依賴、任意縮放不失真、可透過 Style/Trigger 動態變色。結合 DataTemplate 即可為資料驅動 UI 提供豐富視覺回饋。