Skip to content

Instantly share code, notes, and snippets.

@s-fernandez-v
Last active May 15, 2020 15:33
Show Gist options
  • Save s-fernandez-v/87390a18869d6159759d9b7e4fb873d8 to your computer and use it in GitHub Desktop.
Save s-fernandez-v/87390a18869d6159759d9b7e4fb873d8 to your computer and use it in GitHub Desktop.
Button: Custom Styles
<Grid
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
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">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Viewbox StretchDirection="DownOnly">
<Viewbox Width="400">
<StackPanel HorizontalAlignment="Center">
<StackPanel.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="FontSize" Value="48"/>
<Setter Property="FontWeight" Value="Bold"/>
<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="Base">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<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="Base" Data="{StaticResource BackgroundGeometry}" Stretch="Fill" RenderTransformOrigin="0,0.5">
<Path.RenderTransform>
<ScaleTransform ScaleX="0.95"/>
</Path.RenderTransform>
<Path.Fill>
<LinearGradientBrush 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>
</Path.Fill>
</Path>
<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>
</StackPanel.Resources>
<Button Content="NEW GAME">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<noesis:SetFocusAction/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="SETTINGS" Margin="0,20,0,0">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<noesis:SetFocusAction/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
</StackPanel>
</Viewbox>
</Viewbox>
</Grid>
</Grid>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment