Using Dependency Object for WP8 Color Animation

Question

I use the button where I formed it in the ControlTemplate. I also added a storyboard to controlTemplate. The storyboard changes the border of an element in my checklist. I access this from the code behind and activate it, the problem is when I do this by phone, there is a lag. I structured my code after the MVVM structure, my opinion:

<Button x:Name="Button1" BorderThickness="0" BorderBrush="Transparent"> <Button.Template> <ControlTemplate x:Name="Control"> <Path x:Name="Control2" Style="{StaticResource style_ColorButton}" Data="{Binding Data}" Fill="{StaticResource Background}"> <Path.Resources> <Storyboard x:Name="StoryBoard1"> <ColorAnimation Storyboard.TargetName="Control2" Storyboard.TargetProperty="(Stroke).(SolidColorBrush.Color)" To="Blue" Duration="0"/> </Storyboard> </Path.Resources> </Path> </ControlTemplate> </Button.Template> 

And my part of ViewModel is where I activate my storyboard:

  foreach (UIElement x in ElementsAtPoint) { f = x as FrameworkElement; if (f is Path) { try { h = f as Path; Storyboard sb = h.Resources["StoryBoard1"] as Storyboard; sb.Begin(); } catch { } break; } } 

I read that you can use a Dependency object for animation, but I'm not sure how it works or if it will work, but any attempt to try to implement a dependency object for animation will be appreciated.

Answer 1

I would recommend VisualStates do what you are looking for. I changed the button style to add a story to MouseOver VisualState, and then added an event listen button for MouseEnter and MouseLeave. These events are triggered when you touch the device and drag your finger over the item, and then drag it again. You can change the code below to check if something is being dragged. You can also take a look at the drag and drop function .

Using the following style

 <Style x:Key="ButtonStyle" TargetType="Button"> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/> <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/> <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/> <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/> <Setter Property="Padding" Value="10,5,10,6"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid Background="Transparent"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> <DiscreteObjectKeyFrame KeyTime="0" Value="White"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Orange"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}"> <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> 

Note that it has a MouseOver VisualState. Then assign a style and subscribe to event handlers

 <Button Content="Drag over me" Style="{StaticResource ButtonStyle}" MouseEnter="OnButtonMouseEnter" MouseLeave="OnButtonMouseLeave"/> 

And in the case when the handler changes the visual state.

 private void OnButtonMouseEnter(object sender, MouseEventArgs e) { VisualStateManager.GoToState((Control)sender, "MouseOver", true); } private void OnButtonMouseLeave(object sender, MouseEventArgs e) { VisualStateManager.GoToState((Control)sender, "Normal", true); } 

At the same time, when you click and drag your finger on the button, it turns orange with white text.