在WP8上更改按钮边框颜色时滞后

时间:2014-04-11 13:27:03

标签: c# performance visual-studio xaml windows-phone-8

我在一堆按钮上移动一个物体,当这个物体在一个按钮上时,我改变了边框的颜色。这没问题,我可以通过绑定,故事板或样式设置器/可视状态来实现。当我在我的模拟器上运行它时,它工作得很好而且流畅,但是当我在Windows手机上运行它时,当国家边界发生变化时会有一个小的滞后。有没有办法避免这种情况?

1。代码示例

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

和激活

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

附加

模拟器和实际设备之间的一个区别是触摸点的准确性。在模拟器中,您使用具有更高分辨率的鼠标。在您使用手指的设备上,精度要低得多,即毫米与像素。

我刚刚在manip_completed_event中用一个简单的计数器和一个断点来测试它。但两种情况下的计数都相同。它只试图运行一次故事板。

Extra2

澄清我看到的滞后:

我正在拖动一个平滑地跟随手指的元素,当我进入一个新的按钮时,我拖动的元素停止了一会儿。按钮的颜色会发生变化,元素会再次移动。

当按钮改变颜色后我向后移动。当我在按钮之间移动时,元素会用手指平滑移动。

因此,当故事板被激活时会出现延迟,并且可以看出我拖动的元素不能跟随手指。

因此,我试图在电话上找到改变可能具有更好性能的颜色的替代方法。因为它在模拟器上工作正常。

我已经测试了两种不同的lumia 920s和一种lumia 520

2。代码示例

在Shawn Kendrot的帮助下使用Visual State Manager,来自另一个问题:Using Dependency object for color animation WP8在下面复制:

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

注意它有一个MouseOver VisualState。然后分配样式并订阅事件处理程序

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

并在事件处理程序中更改视觉状态。

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

还有滞后,其他人都有可以测试的解决方案吗?

附加

由于问题可能是低fps,即当我想更改颜色时出现渲染问题,是否可以使用调度程序?

因此,在我开始编写故事板的第一个代码示例中,我可以调用视图中的函数来使用调度程序?任何人都有这样做的想法,或者这是一个好主意吗?

感谢所有的帮助,因为我无法理解为什么我可以在屏幕上平滑移动物体但是当我想要改变边框的颜色时我可以看到它滞后:/

2 个答案:

答案 0 :(得分:3)

我的应用中的动画遇到了性能问题,并且通常会在移动的元素上将CacheMode属性设置为BitmapCache来解决这些问题。

这个想法是它表明框架采用控件的屏幕截图并将生成的位图存储在GPU的内存中,这样就不必在每一帧上重绘控件。

您可以查看以下文章:CacheMode and why it matters以获取更多信息。

答案 1 :(得分:1)

运行附加到调试器时获得的调试/性能信息是什么?

启用它们在App构造函数的末尾添加以下内容:

        // 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's 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;
        }