Stats
Actions
Tags
From wpf-dev-pack
Creates scalable vector icons in WPF using PathGeometry and GeometryGroup. Use when building resolution-independent icons, icon buttons, or symbol libraries.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wpf-dev-pack:creating-wpf-vector-iconshaikuThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create scalable, resolution-independent icons using WPF geometry.
Create scalable, resolution-independent icons using WPF geometry.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!-- Check mark -->
<PathGeometry x:Key="CheckIconGeometry">
M 2,7 L 5,10 L 10,3
</PathGeometry>
<!-- Close (X) -->
<PathGeometry x:Key="CloseIconGeometry">
M 2,2 L 10,10 M 10,2 L 2,10
</PathGeometry>
<!-- Plus -->
<PathGeometry x:Key="PlusIconGeometry">
M 6,2 L 6,10 M 2,6 L 10,6
</PathGeometry>
<!-- Minus -->
<PathGeometry x:Key="MinusIconGeometry">
M 2,6 L 10,6
</PathGeometry>
<!-- Arrow right -->
<PathGeometry x:Key="ArrowRightIconGeometry">
M 2,6 L 10,6 M 7,3 L 10,6 L 7,9
</PathGeometry>
<!-- Search (magnifier) -->
<PathGeometry x:Key="SearchIconGeometry">
M 7,7 A 4,4 0 1 1 7,6.99 M 10,10 L 14,14
</PathGeometry>
</ResourceDictionary>
<!-- Menu (hamburger) icon -->
<GeometryGroup x:Key="MenuIconGeometry">
<RectangleGeometry Rect="0,0,16,2"/>
<RectangleGeometry Rect="0,6,16,2"/>
<RectangleGeometry Rect="0,12,16,2"/>
</GeometryGroup>
<!-- Settings (gear) icon -->
<GeometryGroup x:Key="SettingsIconGeometry">
<EllipseGeometry Center="8,8" RadiusX="3" RadiusY="3"/>
<PathGeometry>
M 8,0 L 9,3 L 7,3 Z
M 8,16 L 9,13 L 7,13 Z
M 0,8 L 3,9 L 3,7 Z
M 16,8 L 13,9 L 13,7 Z
</PathGeometry>
</GeometryGroup>
<!-- Home icon -->
<GeometryGroup x:Key="HomeIconGeometry">
<PathGeometry>M 8,1 L 1,7 L 3,7 L 3,14 L 6,14 L 6,10 L 10,10 L 10,14 L 13,14 L 13,7 L 15,7 Z</PathGeometry>
</GeometryGroup>
<Path Data="{StaticResource CheckIconGeometry}"
Fill="Green"
Width="16" Height="16"
Stretch="Uniform"/>
<Button Width="32" Height="32">
<Path Data="{StaticResource CloseIconGeometry}"
Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType=Button}}"
Width="12" Height="12"
Stretch="Uniform"/>
</Button>
<Style x:Key="IconButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Width" Value="32"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="4">
<Path x:Name="IconPath"
Data="{TemplateBinding Content}"
Fill="{TemplateBinding Foreground}"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="16" Height="16"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E3F2FD"/>
<Setter TargetName="IconPath" Property="Fill" Value="#2196F3"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#BBDEFB"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="IconPath" Property="Fill" Value="#BDBDBD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Usage -->
<Button Style="{StaticResource IconButtonStyle}"
Content="{StaticResource CloseIconGeometry}"
ToolTip="Close"/>
<Button Style="{StaticResource IconButtonStyle}"
Content="{StaticResource SearchIconGeometry}"
ToolTip="Search"/>
<Style x:Key="IconTextButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Padding" Value="12,8"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
CornerRadius="4">
<StackPanel Orientation="Horizontal">
<Path Data="{TemplateBinding Tag}"
Fill="{TemplateBinding Foreground}"
Width="16" Height="16"
Stretch="Uniform"
Margin="0,0,8,0"/>
<ContentPresenter VerticalAlignment="Center"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Usage -->
<Button Style="{StaticResource IconTextButtonStyle}"
Tag="{StaticResource PlusIconGeometry}"
Content="Add Item"/>
<!-- Icon that inherits foreground color -->
<Path Data="{StaticResource CheckIconGeometry}"
Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ContentControl}}"
Width="16" Height="16"
Stretch="Uniform"/>
<!-- Icon with binding -->
<Path Data="{StaticResource CheckIconGeometry}"
Fill="{Binding IconColor}"
Width="16" Height="16"
Stretch="Uniform"/>
| Command | Description | Example |
|---|---|---|
| M | MoveTo | M 10,10 |
| L | LineTo | L 100,100 |
| H | Horizontal line | H 50 |
| V | Vertical line | V 50 |
| A | Arc | A 50,50 0 0 1 100,100 |
| Z | Close path | Z |
Lowercase = relative, Uppercase = absolute
npx claudepluginhub christian289/dotnet-with-claudecode --plugin wpf-dev-packImplements WPF 2D graphics with Shape, Geometry, Brush, and Pen classes for vector UIs, icons, charts, and diagrams in WPF apps.
Implements scalable icon systems with SVG sprites or React/Vue components. Use when setting up icon libraries, creating icon sizing tokens, optimizing SVGs, or building accessible icon buttons.
Implements Makepad 2.0 Vector widget for resolution-independent vector graphics using SVG-like syntax with paths, shapes, gradients, filters, groups, transforms, and tween animations.