Skip to content

Instantly share code, notes, and snippets.

@s-fernandez-v

s-fernandez-v/Aero Matics Regular.ttf

Last active May 20, 2020 21:04
Show Gist options
  • Save s-fernandez-v/7899ac1bd7ba837db023409bc0f43c3f to your computer and use it in GitHub Desktop.
Save s-fernandez-v/7899ac1bd7ba837db023409bc0f43c3f to your computer and use it in GitHub Desktop.
Download ZIP
Buttons Sample
Raw
Main.xaml
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions"
d:DesignWidth="1280" d:DesignHeight="720">
<Grid.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources.xaml"/>
</ResourceDictionary.MergedDictionaries>
<Storyboard x:Key="Intro">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="StartButton">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="StartButton">
<EasingDoubleKeyFrame KeyTime="0" Value="-200"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="-200"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="SettingsButton">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="SettingsButton">
<EasingDoubleKeyFrame KeyTime="0" Value="-200"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="-200"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="ExitButton">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.5"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ExitButton">
<EasingDoubleKeyFrame KeyTime="0" Value="-200"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="-200"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ResourceDictionary>
</Grid.Resources>
<Grid.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource Intro}"/>
</EventTrigger>
</Grid.Triggers>
<Grid x:Name="LayoutRoot" Background="{StaticResource NoesisLogoBg}">
<Grid.RowDefinitions>
<RowDefinition Height="100*"/>
<RowDefinition Height="300*"/>
<RowDefinition Height="120*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="300*"/>
<ColumnDefinition Width="60*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="1" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="200*"/>
<RowDefinition Height="800*"/>
</Grid.RowDefinitions>
<Viewbox x:Name="Logo" Stretch="Uniform">
<StackPanel Orientation="Horizontal">
<Path Data="{StaticResource NoesisLogoGeometry}" Fill="{StaticResource NoesisLogoBlueBg}" Stretch="Uniform"/>
<Path Data="{StaticResource NoesisTextGeometry}" Fill="White" Stretch="Uniform" Margin="40,0,0,0" VerticalAlignment="Center"/>
<Path Data="{StaticResource NoesisGuiTextGeometry}" Fill="{StaticResource NoesisLogoBlueBg}" Stretch="Uniform" Margin="40,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Viewbox>
<Viewbox Grid.Row="1" Stretch="Uniform">
<Grid Height="460" Width="768">
<Grid.RowDefinitions>
<RowDefinition Height="100*"/>
<RowDefinition Height="100*"/>
<RowDefinition Height="30*"/>
<RowDefinition Height="100*"/>
<RowDefinition Height="30*"/>
<RowDefinition Height="100*"/>
</Grid.RowDefinitions>
<Button x:Name="StartButton" Grid.Row="1" Content="START" Margin="60,0,0,0" RenderTransformOrigin="0.5,0.5">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<noesis:SetFocusAction/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Button.RenderTransform>
</Button>
<Button x:Name="SettingsButton" Grid.Row="3" Content="SETTINGS" Margin="60,0,0,0" RenderTransformOrigin="0.5,0.5">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<noesis:SetFocusAction/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Button.RenderTransform>
</Button>
<Button x:Name="ExitButton" Grid.Row="5" Content="EXIT" Margin="60,0,0,0" RenderTransformOrigin="0.5,0.5">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<noesis:SetFocusAction/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Button.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Button.RenderTransform>
</Button>
</Grid>
</Viewbox>
</Grid>
</Grid>
</Grid>
Raw
Resources.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<LinearGradientBrush x:Key="NoesisLogoBg" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0" Color="#FF184C79"/>
<GradientStop Offset="0.05" Color="#FF1B5688"/>
<GradientStop Offset="1" Color="#FF123859"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="NoesisLogoFg" Color="#07000000"/>
<SolidColorBrush x:Key="NoesisLogoBlueBg" Color="#FF2AA6E2"/>
<Geometry x:Key="NoesisLogoGeometry">
M64.552314,61.408115 L90.473059,64.639252 65.938536,97.224111 96.858771,170.22477 151.36087,176.44062 176.65871,144.70187 186.30899,167.69955 161.59547,200.607 80.812194,191.57223 39.827483,94.941438 z
M48.254649,23.461594 L152.39867,36.273918 169.09616,74.476677 153.32091,95.305482 137.28592,57.748096 58.689337,48.038651 58.673125,48.036747 26.085236,92.157874 40.901858,129.9017 16.161385,126.74894 0.032970434,88.96424 z
M136.8885,0 L177.71051,4.9764633 210.32399,79.460176 147.07187,163.27949 105.70369,158.62394 95.540381,134.55325 136.09376,139.68585 183.81151,76.187043 161.88087,25.886173 121.79224,19.86055 z
</Geometry>
<Geometry x:Key="NoesisTextGeometry">
M92.8579999677658,70.3415300000004L91.6092999677657,70.3415300000004C89.1117999677657,70.3415300000004 86.3690999677657,69.0553500000004 84.6772999677657,67.5409700000003 83.3359999677656,66.3402600000004 81.3786999677656,63.7640900000003 79.5695999677656,61.6829800000004L48.2047999677656,14.2132800000004C44.6023999677656,9.61943000000042 40.5841999677656,5.85798000000045 37.5730999677657,3.3297700000004 32.8352999677656,1.39255000000037 29.1355999677657,0.416200000000344 22.8921999677656,0.416200000000344L-3.22343520764434E-08,0.416200000000344 -3.22343520764434E-08,91.5688500000003 21.6435999677657,91.5688500000003 21.6435999677657,21.6435500000003 22.8921999677656,21.6435500000003C25.3893999677656,21.6435500000003 27.0235999677656,22.4759800000004 29.1048999677656,23.7246500000003 31.1705999677658,25.5488600000003 33.1231999677656,27.6454000000003 34.6437999677657,30.1582000000003L66.0398999677656,78.0749800000003C69.6422999677656,82.7973200000003 72.2215999677657,85.6954300000003 75.5205999677657,88.6398700000003 80.0990999677657,90.7209900000004 84.9497999677657,91.9850800000002 91.6092999677657,91.9850800000002L114.501399967766,91.9850800000002 114.501399967766,2.27373673749166E-13 92.8579999677658,2.27373673749166E-13z
M206.253499967766,3.41060514011881E-13L160.667099967766,3.41060514011881E-13C137.774799967766,3.41060514011881E-13,126.120799967766,9.57309000000032,126.120799967766,29.1355300000003L126.120799967766,62.4333200000003C126.120799967766,81.5795200000003,137.774799967766,91.5688500000003,160.667099967766,91.5688500000003L206.253499967766,91.5688500000003C229.145899967766,91.5688500000003,240.800099967766,81.9957600000003,240.800099967766,62.4333200000003L240.800099967766,29.1355300000003C240.800099967766,9.98931000000039,229.145899967766,3.41060514011881E-13,206.253499967766,3.41060514011881E-13z
M218.323899967766,62.4333200000003C218.323899967766,67.4279700000003,214.161899967766,70.3415300000004,206.253499967766,70.3415300000004L160.667099967766,70.3415300000004C152.758899967766,70.3415300000004,148.596999967766,67.8441800000004,148.596999967766,62.4333200000003L148.596999967766,29.1355300000003C148.596999967766,23.7246500000003,152.758899967766,21.2273400000003,160.667099967766,21.2273400000003L206.253499967766,21.2273400000003C214.161899967766,21.2273400000003,218.323899967766,23.7246500000003,218.323899967766,29.1355300000003z
M274.513899967766,65.7631100000002L274.513899967766,56.6062200000003 366.277899967766,56.6062200000003 366.277899967766,35.3788800000003 274.513899967766,35.3788800000003 274.513899967766,26.2219700000003C274.513899967766,23.3084200000003,276.178999967766,21.6435500000002,279.508699967766,21.6435500000002L366.694299967766,21.6435500000002 366.694299967766,2.27373673749166E-13 279.508699967766,2.27373673749166E-13C261.194999967766,2.27373673749166E-13,252.037899967766,7.49200000000019,252.037899967766,22.0597700000002L252.037899967766,68.6766500000002C252.037899967766,83.6606500000002,261.194999967766,91.1526500000002,279.508699967766,91.1526500000002L367.110299967766,91.1526500000002 367.110299967766,69.9253100000002 279.508699967766,69.9253100000002C276.178999967766,70.3415300000001,274.513899967766,68.6766500000002,274.513899967766,65.7631100000002z
M464.725099967766,34.9626400000003L404.986699967766,34.9626400000003C401.656899967766,34.9626400000003,399.575899967766,33.7139800000003,399.575899967766,31.6328800000003L399.575899967766,24.5570900000003C399.575899967766,22.4759800000004,401.240899967766,21.2273400000003,404.986699967766,21.2273400000003L489.281899967766,21.2273400000003 489.281899967766,3.41060514011881E-13 404.986699967766,3.41060514011881E-13C386.672899967766,3.41060514011881E-13,377.516099967766,7.4920000000003,377.516099967766,22.0597700000003L377.516099967766,36.6275400000003C377.516099967766,49.5304200000003,386.672899967766,56.1899800000003,404.986699967766,56.1899800000003L464.725099967766,56.1899800000003C468.054699967766,56.1899800000003,469.719799967766,57.4386300000003,469.719799967766,59.5197500000004L469.719799967766,67.0117400000004C469.719799967766,69.0928600000004,468.054699967766,70.3415300000004,464.725099967766,70.3415300000004L380.429599967766,70.3415300000004 380.429599967766,91.5688500000003 464.725099967766,91.5688500000003C483.038799967766,91.5688500000003,492.195599967766,84.0768600000003,492.195599967766,69.5090700000003L492.195599967766,57.0224100000002C492.195599967766,42.4546400000002,483.038799967766,34.9626400000003,464.725099967766,34.9626400000003z
M503.433699967766,3.41060514011881E-13L525.909499967766,3.41060514011881E-13 525.909499967766,91.1526500000003 503.433699967766,91.1526500000003z
M625.010299967766,34.9626400000003L565.054499967766,34.9626400000003C561.724799967766,34.9626400000003,559.643599967766,33.7139800000003,559.643599967766,31.6328800000003L559.643599967766,24.5570900000003C559.643599967766,22.4759800000004,561.308399967766,21.2273400000003,565.054499967766,21.2273400000003L649.567499967766,21.2273400000003 649.567499967766,3.41060514011881E-13 565.054499967766,3.41060514011881E-13C546.740699967766,3.41060514011881E-13,537.583799967766,7.4920000000003,537.583799967766,22.0597700000003L537.583799967766,36.6275400000003C537.583799967766,49.5304200000003,546.740699967766,56.1899800000003,565.054499967766,56.1899800000003L625.010299967766,56.1899800000003C628.340199967766,56.1899800000003,630.005099967766,57.4386300000003,630.005099967766,59.5197500000004L630.005099967766,67.0117400000004C630.005099967766,69.0928600000004,628.340199967766,70.3415300000004,625.010299967766,70.3415300000004L540.497399967766,70.3415300000004 540.497399967766,91.5688500000003 625.010299967766,91.5688500000003C643.324099967766,91.5688500000003,652.481199967766,84.0768600000003,652.481199967766,69.5090700000003L652.481199967766,57.0224100000002C652.064899967766,42.4546400000002,642.907899967766,34.9626400000003,625.010299967766,34.9626400000003z
</Geometry>
<Geometry x:Key="NoesisGuiTextGeometry">
M218.200700106049,67.01174C218.200700106049,69.09286,216.535800106049,70.34153,213.205900106049,70.34153L153.648800106049,70.34153C150.319100106049,70.34153,148.237800106049,69.09286,148.237800106049,67.01174L148.237800106049,0.416200000000003 125.762100106049,0.416200000000003 125.762100106049,69.50907C125.762100106049,84.49309,134.918800106049,91.98508,153.232600106049,91.98508L212.789900106049,91.98508C231.103500106049,91.98508,240.260500106049,84.49309,240.260500106049,69.92531L240.260500106049,2.5410988417629E-21 217.784500106049,2.5410988417629E-21 217.784500106049,67.01174z
M251.914700106049,2.5410988417629E-21L274.390700106049,2.5410988417629E-21 274.390700106049,91.15265 251.914700106049,91.15265z
M64.3942001060486,35.79507L64.3942001060486,58.27109 92.2812001060488,58.27109 92.2812001060488,70.34153 27.4707001060488,70.34153C24.1410001060485,70.34153,22.0598001060485,68.67665,22.0598001060485,65.76311L22.0598001060485,25.80576C22.0598001060485,22.89222,23.7246001060485,21.2273399999999,27.4707001060488,21.2273399999999L112.259700106049,21.2273399999999 112.259700106049,2.5410988417629E-21 27.4707001060488,2.5410988417629E-21C9.15670010604844,2.5410988417629E-21,1.06048446468776E-07,7.49199999999996,1.06048446468776E-07,22.05977L1.06048446468776E-07,68.67665C1.06048446468776E-07,83.66065,9.15670010604844,91.15265,27.4707001060488,91.15265L114.757000106049,91.15265 114.757000106049,35.37888 64.3942001060486,35.37888z
</Geometry>
<ScaleTransform x:Key="NoesisLogoTransform" ScaleX="1.5" ScaleY="1.5"/>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContentControl}">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="FontFamily" Value="./#Aero Matics"/>
<Setter Property="FontSize" Value="48"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ControlTemplate.Resources>
<Geometry x:Key="BackgroundGeometry">
M739.2,0 L768,29 739.2,57.6 739.2,57.6 2.6830986,57.6 C0.84507042,57.595981 0.004258133,57.122541 0,56.17857 L0,1.2790178 C0,0.4642857 0.92957746,0.0066964284 2.5352113,0 L739.2,0
</Geometry>
<Geometry x:Key="OuterGeometry">
M763.49945,29 L738.14788,55.050287 4.0466106,55.050287 4.0466106,2.5497334 738.14788,2.5497334 z
</Geometry>
<Geometry x:Key="OuterHiGeometry">
M4.0466106,2.5497334 L738.14788,2.5497334
</Geometry>
<Geometry x:Key="InnerGeometry">
M752.94514,29 L732.36003,47.708038 9.4939725,47.708038 9.4939725,9.8921791 732.36003,9.8921791 z
</Geometry>
<Geometry x:Key="IndicatorGeometry">
M22.669079,2.25 L30.000323,2.25 41.087033,23.9 30.000323,45.39 22.669079,45.39 33.584941,23.816666 z
</Geometry>
</ControlTemplate.Resources>
<Viewbox Stretch="Uniform">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" To="Focused">
<VisualTransition.GeneratedEasingFunction>
<BackEase EasingMode="EaseOut" Amplitude="0.5"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
<VisualTransition From="Focused" GeneratedDuration="0:0:0.2">
<VisualTransition.GeneratedEasingFunction>
<SineEase EasingMode="EaseInOut"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="LeftRect">
<EasingColorKeyFrame KeyTime="0" Value="#334096BF"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="Bg">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="BaseOuter">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="BaseInner">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(Brush.Opacity)" Storyboard.TargetName="FocusedInner">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(Brush.Opacity)" Storyboard.TargetName="FocusedOuter">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(Brush.Opacity)" Storyboard.TargetName="FocusedOuterHi">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(Brush.Opacity)" Storyboard.TargetName="Indicator">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="FocusedOuter">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="FocusedOuterHi">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="FocusedInner">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="Indicator">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="ContentHost">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="10"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="Bg">
<EasingColorKeyFrame KeyTime="0" Value="#B2083C5E"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="Bg">
<EasingColorKeyFrame KeyTime="0" Value="#990D3559"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="Bg">
<EasingColorKeyFrame KeyTime="0" Value="#7F0D3559"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="Bg">
<EasingColorKeyFrame KeyTime="0" Value="#3F0B3150"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="Indicator" AutoReverse="True" RepeatBehavior="Forever">
<EasingColorKeyFrame KeyTime="0" Value="#FF2AA6E2">
<EasingColorKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut"/>
</EasingColorKeyFrame.EasingFunction>
</EasingColorKeyFrame>
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="#332AA6E2">
<EasingColorKeyFrame.EasingFunction>
<SineEase EasingMode="EaseInOut"/>
</EasingColorKeyFrame.EasingFunction>
</EasingColorKeyFrame>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentHost">
<EasingColorKeyFrame KeyTime="0" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="LeftRect">
<EasingDoubleKeyFrame KeyTime="0" Value="4">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CircleEase EasingMode="EaseIn"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="LayoutRoot" Height="81" Width="568" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False">
<Grid.RenderTransform>
<TranslateTransform/>
</Grid.RenderTransform>
<Path x:Name="Bg" Data="{StaticResource BackgroundGeometry}" Stretch="Fill" RenderTransformOrigin="0,0.5">
<Path.RenderTransform>
<ScaleTransform ScaleX="0.95"/>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#2D0C2B45" Offset="0"/>
<GradientStop Color="#660C2943" Offset="0.2"/>
<GradientStop Color="#7F0C2943" Offset="0.853"/>
<GradientStop Color="#99082C45" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Path x:Name="BaseOuter" Data="{StaticResource OuterGeometry}" Stretch="Fill" Margin="3,2.666,3.333,2.666" StrokeThickness="4" RenderTransformOrigin="0,0.5">
<Path.RenderTransform>
<ScaleTransform ScaleX="0.95"/>
</Path.RenderTransform>
<Path.Stroke>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#191F4A6F" Offset="0.02"/>
<GradientStop Color="#991F4A6F" Offset="0.5"/>
<GradientStop Color="#CC215078" Offset="1"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path x:Name="BaseInner" Data="{StaticResource InnerGeometry}" Stretch="Fill" Margin="7.002,9.418,11.086,9.418" StrokeThickness="4" RenderTransformOrigin="0,0">
<Path.RenderTransform>
<ScaleTransform ScaleX="0.95"/>
</Path.RenderTransform>
<Path.Stroke>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#001F466B" Offset="0.05"/>
<GradientStop Color="#9916395A" Offset="0.5"/>
<GradientStop Color="#CC1A4061" Offset="1"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path x:Name="FocusedOuter" Data="{StaticResource OuterGeometry}" Stretch="Fill" Margin="3,2.666,3.333,2.666" StrokeThickness="4" RenderTransformOrigin="0,0.5">
<Path.RenderTransform>
<ScaleTransform ScaleX="0.95"/>
</Path.RenderTransform>
<Path.Stroke>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0" Opacity="0">
<GradientStop Color="#0C4096BF" Offset="0.02"/>
<GradientStop Color="#7F4096BF" Offset="0.5"/>
<GradientStop Color="#B24096BF" Offset="1"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path x:Name="FocusedOuterHi" Data="{StaticResource OuterHiGeometry}" Stretch="Fill" Margin="3,2.666,21.949,74.334" StrokeThickness="4" RenderTransformOrigin="0,0.5">
<Path.RenderTransform>
<ScaleTransform ScaleX="0.95"/>
</Path.RenderTransform>
<Path.Stroke>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0" Opacity="0">
<GradientStop Color="#0C4096BF" Offset="0.02"/>
<GradientStop Color="#7F4096BF" Offset="0.35"/>
<GradientStop Color="#B25BB6E2" Offset="0.65"/>
<GradientStop Color="#004096BF" Offset="1"/>
<GradientStop Color="#9BDCF4FF" Offset="0.55"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path x:Name="FocusedInner" Data="{StaticResource InnerGeometry}" Stretch="Fill" Margin="7.002,9.418,11.086,9.418" StrokeThickness="4" RenderTransformOrigin="0,0.5">
<Path.RenderTransform>
<ScaleTransform ScaleX="0.95"/>
</Path.RenderTransform>
<Path.Stroke>
<LinearGradientBrush EndPoint="1,0" StartPoint="0,0" Opacity="0">
<GradientStop Color="#002D6986" Offset="0.05"/>
<GradientStop Color="#99265A73" Offset="0.5"/>
<GradientStop Color="#B22D6986" Offset="1"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path x:Name="Indicator" Data="{StaticResource IndicatorGeometry}" Margin="0,18.75,21.63,18.75" Stretch="Fill" HorizontalAlignment="Right" Width="18.412" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TranslateTransform X="-70"/>
</Path.RenderTransform>
<Path.Fill>
<SolidColorBrush Color="#FF2AA6E2" Opacity="0"/>
</Path.Fill>
</Path>
<Rectangle x:Name="LeftRect" Margin="10" HorizontalAlignment="Left" Width="9" Fill="#0C215078" RenderTransformOrigin="0,0.5">
<Rectangle.RenderTransform>
<ScaleTransform/>
</Rectangle.RenderTransform>
</Rectangle>
<TextBlock x:Name="ContentHost" HorizontalAlignment="Center" VerticalAlignment="Center"
Text="{TemplateBinding Content}" Foreground="#FF488EB5" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TranslateTransform X="-30"/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
</Viewbox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment