Skip to content

Instantly share code, notes, and snippets.

@JokerMartini
Last active April 24, 2020 00:57
Show Gist options
  • Save JokerMartini/8299c77e743a94631278 to your computer and use it in GitHub Desktop.
Save JokerMartini/8299c77e743a94631278 to your computer and use it in GitHub Desktop.
XAML data paths for C# applications using WPF
// X Symbol
<Path Data="M0,0 L1,1 M0,1 L1,0" Stretch="Uniform" Stroke="Red" />
// Arrow Right
<Path Data="M4.12,0 L9.67,5.47 L4.12,10.94 L0,10.88 L5.56,5.47 L0,0.06" Stretch="Uniform" Fill="Red"/>
// Three Dots
<Path Data="M12.5,6.5 C12.5,9.8137085 9.8137085,12.5 6.5,12.5 C3.1862915,12.5 0.5,9.8137085 0.5,6.5 C0.5,3.1862915 3.1862915,0.5 6.5,0.5 C9.8137085,0.5 12.5,3.1862915 12.5,6.5 z M30.5,6.5 C30.5,9.8137085 27.813708,12.5 24.5,12.5 C21.186292,12.5 18.5,9.8137085 18.5,6.5 C18.5,3.1862915 21.186292,0.5 24.5,0.5 C27.813708,0.5 30.5,3.1862915 30.5,6.5 z M48.5,6.5 C48.5,9.8137085 45.813708,12.5 42.5,12.5 C39.186292,12.5 36.5,9.8137085 36.5,6.5 C36.5,3.1862915 39.186292,0.5 42.5,0.5 C45.813708,0.5 48.5,3.1862915 48.5,6.5 z" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="13" Margin="23.75,21.75,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="49"/>
// Paper Airplane
<Path Width="30" Data="M0,0 100,0 40,80 32,44 60,20 24,28z" Fill="Black" Stretch="Uniform" StrokeThickness="3"/>
<Path Width="30" Data="M0,0 100,50 0,100 10,60 50,50 10,40z" Fill="Black" Stretch="Uniform" StrokeThickness="3"/>
// Triangle
// Will start at 10,100, draw a line to 100,100, then another line to 100,50, then close the path by drawing a line back to the starting point.
//You can also use lower-case letters to use relative positions. For example,
<Path Stroke="Blue" Data="M 10 100 l 90 0 l 0 -50 Z" />
//Would draw the same shape, but use relative paths. It will start at 10,100, draw a line going +90 along the x, and 0 along the y, then another line going 0 along the x and -50 along the y.
//A shorter version of the same line would be
<Path Stroke="Blue" Data="M 10 100 h 90 v -50 Z" />
//which starts at 10,100, goes horizontal 90, then vertically -50
// Align Icon
<Path Data="M35,0 L35,70
M10,10 L60,10 L60,30 L10,30 Z
M20,40 L50,40 L50,60 L20,60 Z"
Stretch="Uniform" Stroke="Black" StrokeThickness="1" SnapsToDevicePixels="True" Fill="White"/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment