Skip to content

Instantly share code, notes, and snippets.

@DamianSuess

DamianSuess/WpfLockUserControl.xaml

Last active October 6, 2021 17:26
Show Gist options
  • Save DamianSuess/954d66268a9e27f24476afdc0763ed0b to your computer and use it in GitHub Desktop.
Save DamianSuess/954d66268a9e27f24476afdc0763ed0b to your computer and use it in GitHub Desktop.
Download ZIP
WPF Canvas Lock Image Using Paths
Raw
WpfLockUserControl.xaml
<!-- Source: https://stackoverflow.com/questions/36483179/scaling-complex-svg-paths-in-wpf-xaml -->
<StackPanel>
<Viewbox Height="20" Margin="5">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Canvas Canvas.Left="0" Canvas.Top="0">
<Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
<Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Canvas>
</Viewbox>
<Viewbox Height="50" Margin="5">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Canvas Canvas.Left="0" Canvas.Top="0">
<Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
<Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Canvas>
</Viewbox>
<Viewbox Height="100" Margin="5">
<Canvas Width="213.333" Height="213.333" Clip="F1 M 0,0L 213.333,0L 213.333,213.333L 0,213.333L 0,0" UseLayoutRounding="False">
<Canvas Canvas.Left="0" Canvas.Top="0">
<Path Width="213.333" Height="213.333" Canvas.Left="0" Canvas.Top="3.05176e-005" Stretch="Fill" Fill="#FFEDEDED" Data="F1 M 213.333,106.667C 213.333,165.579 165.579,213.333 106.667,213.333C 47.7547,213.333 0,165.579 0,106.667C 0,47.7547 47.7547,3.05176e-005 106.667,3.05176e-005C 165.579,3.05176e-005 213.333,47.7547 213.333,106.667 Z "/>
<Canvas Width="92.2653" Height="115.307" Canvas.Left="60.588" Canvas.Top="46.828">
<Path Width="57.6053" Height="40.3173" Canvas.Left="17.276" Canvas.Top="0" Stretch="Fill" Fill="#FF424242" Data="F1 M 46.0787,0C 30.1827,0 17.276,13.0107 17.276,28.7973L 17.276,40.3173L 28.7973,40.3173L 28.7973,28.7973C 28.7973,19.308 36.584,11.5213 46.0787,11.5213C 55.5733,11.5213 63.36,19.308 63.36,28.7973L 63.36,40.3173L 74.8813,40.3173L 74.8813,28.7973C 74.8813,13.0107 61.9747,0 46.0787,0 Z "/>
</Canvas>
<Path Width="92.2667" Height="74.9907" Canvas.Left="60.588" Canvas.Top="87.1454" Stretch="Fill" Fill="#FFFB8C00" Data="F1 M 141.229,162.136L 72.104,162.136C 65.812,162.136 60.588,156.907 60.588,150.615L 60.588,98.6667C 60.588,92.3747 65.812,87.1454 72.104,87.1454L 141.333,87.1454C 147.625,87.1454 152.855,92.3747 152.855,98.6667L 152.855,150.505C 152.745,156.907 147.625,162.136 141.229,162.136 Z "/>
<Path Width="17.28" Height="17.2813" Canvas.Left="98.0267" Canvas.Top="116.052" Stretch="Fill" Fill="#FFC76E00" Data="F1 M 115.307,124.693C 115.307,129.495 111.469,133.333 106.667,133.333C 101.864,133.333 98.0267,129.495 98.0267,124.693C 98.0267,119.896 101.864,116.052 106.667,116.052C 111.469,116.052 115.307,119.896 115.307,124.693 Z "/>
</Canvas>
</Canvas>
</Viewbox>
</StackPanel>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment