Skip to content

Instantly share code, notes, and snippets.

@ScottIsAFool
Created August 10, 2016 09:04
Show Gist options
  • Save ScottIsAFool/a6744be2da45836e56295b19c392885c to your computer and use it in GitHub Desktop.
Save ScottIsAFool/a6744be2da45836e56295b19c392885c to your computer and use it in GitHub Desktop.
A button control template that accepts path data as its content.
<Page
x:Class="App4.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App4"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style x:Key="PathIconButtonStyle"
TargetType="Button">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Foreground"
Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="BorderBrush"
Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
<Setter Property="BorderThickness"
Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="Padding"
Value="8,4,8,4" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="VerticalAlignment"
Value="Stretch" />
<Setter Property="FontFamily"
Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight"
Value="Normal" />
<Setter Property="FontSize"
Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
Storyboard.TargetName="PathIcon">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlHighlightAccentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="PathIcon">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="PathIcon">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlForegroundAccentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
Storyboard.TargetName="PathIcon">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
Storyboard.TargetName="RootGrid">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill"
Storyboard.TargetName="PathIcon">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke"
Storyboard.TargetName="PathIcon">
<DiscreteObjectKeyFrame KeyTime="0"
Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="PathIcon"
Data="{TemplateBinding Content}"
Stretch="Uniform"
Fill="{TemplateBinding Foreground}"
Stroke="Transparent"
StrokeThickness="1"
Margin="4" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Content="F1 M 26,36C 27.0445,36 28.0356,36.2288 28.9259,36.639L 33,29L 31,29L 31,27L 37,27L 37,29L 35,29L 33.4,32L 43.4615,32L 44,31L 41,31L 41,29L 47,29L 47,31L 46,31L 44.6538,33.5L 45,33.5L 46.8543,36.745C 47.8,36.2684 48.8686,36 50,36C 53.866,36 57,39.134 57,43C 57,46.866 53.866,50 50,50C 46.4735,50 43.5561,47.3923 43.0709,44L 39,44L 38,44L 37,44L 31.9231,34.7692L 30.4259,37.5765C 31.997,38.8601 33,40.8129 33,43C 33,46.866 29.866,50 26,50C 22.134,50 19,46.866 19,43C 19,39.134 22.134,36 26,36 Z M 40.0769,42L 43.0709,42C 43.3144,40.2974 44.1706,38.7925 45.409,37.7157L 43.8515,34.9901L 40.0769,42 Z M 42.3846,34L 33.5,34L 37.9894,42.1626L 42.3846,34 Z M 26,38C 23.2386,38 21,40.2386 21,43C 21,45.7615 23.2386,48 26,48C 28.7614,48 31,45.7615 31,43C 31,41.5808 30.4086,40.2996 29.4589,39.3895L 27,44L 25,44L 27.9822,38.4083C 27.3744,38.1456 26.7042,38 26,38 Z M 50,38C 49.2298,38 48.5003,38.1742 47.8487,38.4852L 51,44L 50.5,44L 49,44L 45.1,44C 45.5632,46.2823 47.581,48 50,48C 52.7614,48 55,45.7614 55,43C 55,40.2386 52.7614,38 50,38 Z M 45.1,42L 47.8571,42L 46.4288,39.5005C 45.7671,40.1756 45.2953,41.0376 45.1,42 Z "
Style="{StaticResource PathIconButtonStyle}"
VerticalAlignment="Center"
Height="60"
Width="60"/>
</Grid>
</Page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment