Last active
May 15, 2020 15:33
-
-
Save s-fernandez-v/87390a18869d6159759d9b7e4fb873d8 to your computer and use it in GitHub Desktop.
Button: Custom Styles
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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