UWP-Circle-Button-Style-/circleButtonStyle.xaml at master · colinkiama/UWP-Circle-Button-Style- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<Style x:Key="CircleButtonStyle" TargetType="Button">
                        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAccentBrush}"/>
                        <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="Left"/>
                        <Setter Property="VerticalAlignment" Value="Center"/>
                        <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">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualState x:Name="Normal">
                                                    <Storyboard>
                                                        <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="CircleArea"
                                                                         From="{ThemeResource SystemAccentColorLight1}"
                                                                         EnableDependentAnimation="True">
                                                            <ColorAnimation.EasingFunction>
                                                                <CubicEase/>
                                                            </ColorAnimation.EasingFunction>
                                                        </ColorAnimation>

                                                        <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="CircleArea"
                                                                         From="{ThemeResource SystemAccentColorLight1}"
                                                                         EnableDependentAnimation="True">
                                                            <ColorAnimation.EasingFunction>
                                                                <CubicEase/>
                                                            </ColorAnimation.EasingFunction>
                                                        </ColorAnimation>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="PointerOver">
                                                    <Storyboard>
                                                        <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="CircleArea"
                                                                         To="{ThemeResource SystemAccentColorLight1}"
                                                                         EnableDependentAnimation="True">
                                                            <ColorAnimation.EasingFunction>
                                                                <CubicEase/>
                                                            </ColorAnimation.EasingFunction>
                                                        </ColorAnimation>

                                                        <ColorAnimation Duration="0:0:0.5" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="CircleArea"
                                                                         To="{ThemeResource SystemAccentColorLight1}"
                                                                         EnableDependentAnimation="True">
                                                            <ColorAnimation.EasingFunction>
                                                                <CubicEase/>
                                                            </ColorAnimation.EasingFunction>
                                                        </ColorAnimation>
                                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Pressed">
                                                    <Storyboard>
                                                        <ColorAnimation Duration="0:0:2" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="CircleArea"
                                                            To="{ThemeResource SystemAccentColorDark1}">
                                                            <ColorAnimation.EasingFunction>
                                                                <CubicEase/>
                                                            </ColorAnimation.EasingFunction>
                                                        </ColorAnimation>
                                                        <ColorAnimation Duration="0:0:2" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="CircleArea"
                                                            To="{ThemeResource SystemAccentColorDark1}">
                                                            <ColorAnimation.EasingFunction>
                                                                <CubicEase/>
                                                            </ColorAnimation.EasingFunction>
                                                        </ColorAnimation>
                                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                                    </Storyboard>
                                                </VisualState>

                                                <VisualState x:Name="Disabled">
                                                    <Storyboard>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CircleArea">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="CircleArea">
                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
                                                        </ObjectAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Ellipse x:Name="CircleArea" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"
                                                     Width="{TemplateBinding Width}"
                                                     Height="{TemplateBinding Height}"/>

                                        <ContentPresenter x:Name="ContentPresenter" Foreground="{TemplateBinding Foreground}"
                                          VerticalAlignment="Center" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>