Add animations example for buttons

SergeyNefyodov · Nov 28, 2024 · 4725628 · 4725628
1 parent 4faf2d8
commit 4725628
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 3 deletions.
diff --git a/source/ExtensibleStorageExample/ViewModels/SchemaViewerViewModel.cs b/source/ExtensibleStorageExample/ViewModels/SchemaViewerViewModel.cs
@@ -30,6 +30,8 @@ private void SelectElement()
             _element = Context.Document.GetElement(reference);
             CollectValues();
             RaiseShowRequest();
+
+            var color = System.Windows.Media.Colors.Green;
         }
 
         [RelayCommand]

diff --git a/source/ExtensibleStorageExample/Views/Dictionary.xaml b/source/ExtensibleStorageExample/Views/Dictionary.xaml
@@ -31,4 +31,87 @@
     </DataTemplate>
 
     <views:DataGridCellSelector x:Key="DataGridCellSelector" />
+
+
+
+    <Style
+        TargetType="Button"
+        x:Key="TrigerredButtonStyle">
+        <Style.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Trigger.Setters>
+                    <Setter Property="BorderThickness" Value="3"/>
+                    <Setter Property="RenderTransform">
+                        <Setter.Value>
+                            <ScaleTransform ScaleX="1.05" ScaleY="1.05" />
+                        </Setter.Value>
+                    </Setter>
+                </Trigger.Setters>
+            </Trigger>
+            <Trigger Property="IsMouseOver" Value="False">
+                <Trigger.Setters>
+                    <Setter Property="BorderThickness" Value="1"/>
+                    <Setter Property="RenderTransform">
+                        <Setter.Value>
+                            <ScaleTransform ScaleX="1" ScaleY="1" />
+                        </Setter.Value>
+                    </Setter>
+                </Trigger.Setters>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+    <Style
+        TargetType="Button"
+        x:Key="AnimatedButtonStyle">
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="RenderTransform">
+            <Setter.Value>
+                <ScaleTransform ScaleX="1" ScaleY="1" />
+            </Setter.Value>
+        </Setter>
+
+        <Style.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Trigger.EnterActions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <DoubleAnimation
+                                Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
+                                To="1.05"
+                                Duration="0:0:0.5" />
+                            <DoubleAnimation
+                                Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
+                                To="1.05"
+                                Duration="0:0:0.5" />
+                            <ThicknessAnimation
+                                Storyboard.TargetProperty="BorderThickness"
+                                To="3"
+                                Duration="0:0:0.5" />
+                        </Storyboard>
+                    </BeginStoryboard>
+                </Trigger.EnterActions>
+                <Trigger.ExitActions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <DoubleAnimation
+                                Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
+                                To="1"
+                                Duration="0:0:0.5" />
+                            <DoubleAnimation
+                                Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
+                                To="1"
+                                Duration="0:0:0.5" />
+                            <ThicknessAnimation
+                                Storyboard.TargetProperty="BorderThickness"
+                                To="1"
+                                Duration="0:0:0.5" />
+                        </Storyboard>
+                    </BeginStoryboard>
+                </Trigger.ExitActions>
+            </Trigger>
+        </Style.Triggers>
+    </Style>
+
+
 </ResourceDictionary>
diff --git a/source/ExtensibleStorageExample/Views/SchemaViewerView.xaml b/source/ExtensibleStorageExample/Views/SchemaViewerView.xaml
@@ -50,15 +50,23 @@
             </DataGrid.Columns>                    
         </DataGrid>
         <Button 
-            Margin="5"
+            Margin="10"
+            Padding="5"
+            HorizontalAlignment="Center"
             Content="Select another element"
             Command="{Binding SelectElementCommand}"/>        
         <Button 
-            Margin="5"
+            Style="{StaticResource TrigerredButtonStyle}"
+            Margin="10"
+            Padding="5"
+            HorizontalAlignment="Center"
             Content="Create new schema"
             Command="{Binding CreateNewSchemaCommand}"/>
         <Button 
-            Margin="5"
+            Style="{StaticResource AnimatedButtonStyle}"
+            Margin="10"
+            Padding="5"
+            HorizontalAlignment="Center"
             Content="Save data"
             Command="{Binding SaveDataCommand}"/>
     </StackPanel>