Delay when the button frame color changes to WP8

Question

I move an object over a bunch of buttons, and when this object is turned upside down, I change the border color. This is not a problem, I can do this through bindings, storyboards or stylists / visual state. When I run it on my emulator, it works beautifully and smoothly, but when I run it on my Windows phone, there is a slight lag when changing the border of the country. Is there any way to avoid this?

1. Code Example

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

and activation

 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; } } 

Extra

One difference that comes to mind between the emulator and the actual device is the accuracy of the touch point. In the emulator, you use a mouse with a much higher resolution. On the device where you use your finger, the accuracy is much lower, i.e. Millimeters versus pixels.

I just checked this with a simple counter and breakpoint in the manipulation_completed_event file. But in both cases the calculation is the same. And he only tried to run the storyboard once.

Extra2

To clarify the lag, I see:

I drag the item that follows my finger smoothly, when I go to the new button, the item that I drag stops for a while. The color of the button changes and the item moves again.

When I go back, the button will change color. The item moves smoothly with my finger as I move between the buttons.

Therefore, there is a time when the storyboard is activated, and it is clear that the element that I flip cannot follow the finger.

Therefore, I am trying to find alternative ways to change the color, which may have better performance, on the phone. Beacuse works great on an emulator.

I tested on two different beams 920 and one lumia 520

2. Code Example

Using Visual State Manager with Shawn Kendrot from another question: Using a Dependency object for WP8 color animation , replicated below:

 <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); } 

Still with a delay, does anyone else have a solution that could be tested?

Extra

Since the problem can be low fps, that is, the rendering problem, when I want to change the color, can I use the dispatcher?

So, in the first code example, where I start the storyboard, could I instead call the function in the view to use the dispatcher? Does anyone have an idea to do this and if it is a good idea?

appreciating all the help, since I can’t understand why I can move objects on the screen, but when I want to change the border color, I see that it is behind: /

Answer 1

I had performance issues when animating in my applications, and often resolved them by setting the CacheMode property on BitmapCache for roaming items.

The idea is that it shows that the structure takes a screenshot of the control and stores the resulting raster map in the GPU memory, so that the control does not need to be redrawn on every frame.

You can see this article: CacheMode and why it is important for a deeper understanding.

Answer 2

What is the debugging / performance information that you get when connecting to the debugger?

Include them at the end of the App constructor:

  // Show graphics profiling information while debugging. if (Debugger.IsAttached) { // Display the current frame rate counters. Application.Current.Host.Settings.EnableFrameRateCounter = true; // Show the areas of the app that are being redrawn in each frame. //Application.Current.Host.Settings.EnableRedrawRegions = true; // Enable non-production analysis visualization mode, // which shows areas of a page that are handed off to GPU with a colored overlay. //Application.Current.Host.Settings.EnableCacheVisualization = true; // Prevent the screen from turning off while under the debugger by disabling // the application idle detection. // Caution:- Use this under debug mode only. Application that disables user idle detection will continue to run // and consume battery power when the user is not using the phone. PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Disabled; }