Add VisualStateManager for smoothness

Xefise · Dec 8, 2019 · 68e3cf2 · 68e3cf2
1 parent d2beb65
commit 68e3cf2
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 37 deletions.
diff --git a/Themes/Dark.xaml b/Themes/Dark.xaml
@@ -1,34 +1,42 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:local="clr-namespace:WPFtest">
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ControlTemplate TargetType="Button" x:Key="Buttons">
         <Border x:Name="buttonBorder"
                 BorderBrush="{TemplateBinding BorderBrush}"
-                Background="{TemplateBinding Background}"
                 Height="{TemplateBinding Height}"
                 Width="{TemplateBinding Width}" >
-            <ContentControl Margin="{TemplateBinding Padding}"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            Foreground="#323232"
-                            Content="{TemplateBinding Content}" />
+            <Grid>
+                <Grid.Background>
+                    <SolidColorBrush x:Name="ButtonBackground" Color="#000000"/>
+                </Grid.Background>
+                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,5,4,4"/>
+            </Grid>
+
+            <VisualStateManager.VisualStateGroups>
+                <VisualStateGroup x:Name="CommonStates">
+                    <VisualState x:Name="Normal">
+                        <Storyboard>
+                            <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="#333333" SpeedRatio="2"/>
+                        </Storyboard>
+                    </VisualState>
+                    <VisualState x:Name="MouseOver">
+                            <Storyboard>
+                            <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="#202020" SpeedRatio="3.5"/>
+                        </Storyboard>
+                    </VisualState>
+                    <VisualState x:Name="Pressed">
+                        <Storyboard>
+                            <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="#191919" SpeedRatio="5"/>
+                        </Storyboard>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateManager.VisualStateGroups>
         </Border>
-        <ControlTemplate.Triggers>
-            <Trigger Property="IsMouseOver" Value="true">
-                <Setter TargetName="buttonBorder" Property="Background" Value="#1A1A1A" />
-                <Setter TargetName="buttonBorder" Property="BorderBrush" Value="#DDDDDD" />
-            </Trigger>
-            <Trigger Property="IsPressed" Value="true">
-                <Setter TargetName="buttonBorder" Property="Background" Value="#171717" />
-                <Setter TargetName="buttonBorder" Property="BorderBrush" Value="#BBBBBB" />
-            </Trigger>
-        </ControlTemplate.Triggers>
     </ControlTemplate>
     <Style x:Key="WindowStyle" TargetType="Window">
         <Setter Property="Background" Value="#232323" />
     </Style>
     <Style TargetType="Button">
-        <Setter Property="Background" Value="#343434"/>
         <Setter Property="BorderBrush" Value="#AAAAAA"/>
         <Setter Property="Foreground" Value="#EEEEEE"/>
     </Style>

diff --git a/Themes/Light.xaml b/Themes/Light.xaml
@@ -1,32 +1,42 @@
 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-                    xmlns:local="clr-namespace:WPFtest">
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <ControlTemplate TargetType="Button" x:Key="Buttons">
         <Border x:Name="buttonBorder"
                 BorderBrush="{TemplateBinding BorderBrush}"
-                Background="{TemplateBinding Background}"
                 Height="{TemplateBinding Height}"
-                Width="{TemplateBinding Width}" >
-            <ContentControl Margin="{TemplateBinding Padding}"
-                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            Foreground="#323232"
-                            Content="{TemplateBinding Content}" />
+                Width="{TemplateBinding Width}">
+            <Grid>
+                <Grid.Background>
+                    <SolidColorBrush x:Name="ButtonBackground" Color="#FFFFFF"/>
+                </Grid.Background>
+                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,5,4,4"/>
+            </Grid>
+
+            <VisualStateManager.VisualStateGroups>
+                <VisualStateGroup x:Name="CommonStates">
+                    <VisualState x:Name="Normal">
+                        <Storyboard>
+                            <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="#E6E6E6" SpeedRatio="2"/>
+                        </Storyboard>
+                    </VisualState>
+                    <VisualState x:Name="MouseOver">
+                            <Storyboard>
+                            <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="#C1C1C1" SpeedRatio="3.5"/>
+                        </Storyboard>
+                    </VisualState>
+                    <VisualState x:Name="Pressed">
+                        <Storyboard>
+                            <ColorAnimation Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Color" To="#B2B2B2" SpeedRatio="5"/>
+                        </Storyboard>
+                    </VisualState>
+                </VisualStateGroup>
+            </VisualStateManager.VisualStateGroups>
         </Border>
-        <ControlTemplate.Triggers>
-            <Trigger Property="IsMouseOver" Value="true">
-                <Setter TargetName="buttonBorder" Property="Background" Value="#AFAFAF" />
-            </Trigger>
-            <Trigger Property="IsPressed" Value="true">
-                <Setter TargetName="buttonBorder" Property="Background" Value="#999999" />
-            </Trigger>
-        </ControlTemplate.Triggers>
     </ControlTemplate>
     <Style x:Key="WindowStyle" TargetType="Window">
         <Setter Property="Background" Value="#FFFDFDFD" />
     </Style>
     <Style TargetType="Button">
-        <Setter Property="Background" Value="#DFDFDF"/>
         <Setter Property="BorderBrush" Value="#666666"/>
         <Setter Property="Foreground" Value="#313131"/>
     </Style>

diff --git a/bin/Release/Timer.exe b/bin/Release/Timer.exe
diff --git a/bin/Release/Timer.pdb b/bin/Release/Timer.pdb