WP7 - 在自定义按钮闪烁背景 [英] WP7 - blinking background in custom button

问题描述

这是我的自定义按钮：

<Style TargetType="local:AnswerButton">
    <Setter Property="Background" Value="{StaticResource BlueGradient}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:AnswerButton">
                <Grid>
                    <Border BorderBrush="Blue" BorderThickness="2" CornerRadius="10">
                        <Border Name="myBorder" Background="{TemplateBinding Background}" CornerRadius="9">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="100"/>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0"
                                       TextAlignment="Center" VerticalAlignment="Center" 
                                       Text="{TemplateBinding Option}" Foreground="Yellow" />
                                <TextBlock Grid.Column="1"
                                       TextAlignment="Left" VerticalAlignment="Center" 
                                       Text="{TemplateBinding Text}" Foreground="Black" />
                            </Grid>
                        </Border>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如何设置自定义按钮动画？我想这样的：

How can I set animation for custom button? I tried this:

    ColorAnimation myColorAnimation = new ColorAnimation();
    myColorAnimation.From = Colors.Blue;
    myColorAnimation.To = Colors.Green;
    myColorAnimation.AutoReverse = true;
    myColorAnimation.Duration = TimeSpan.FromSeconds(1);


    Storyboard.SetTargetName(myColorAnimation, "myBorder");
    Storyboard.SetTargetProperty(myColorAnimation,
        new PropertyPath(Border.BackgroundProperty));
    Storyboard myStoryboard = new Storyboard();
    myStoryboard.Children.Add(myColorAnimation);

    myStoryboard.Begin();

但它与目标名称问题。我知道这是错误的，但我怎么能设置目标自定义的控制？我有我的第4页，我想设置这个动画，其中一个是选用：

But it has problem with target name. I know it's wrong but how can I set target to custom control? I have 4 in my page and I want to set this animation for one which is choosed:

    <Controls:AnswerButton Name="btnAnswerA" Tap="AnswerButton_Tap"/>
    <Controls:AnswerButton Name="btnAnswerB" Tap="AnswerButton_Tap"/>
    <Controls:AnswerButton Name="btnAnswerC" Tap="AnswerButton_Tap"/>
    <Controls:AnswerButton Name="btnAnswerD" Tap="AnswerButton_Tap"/>

我不在乎，如果这将是code或XAML中，但我怎么能得到一些由coloranimation闪烁（闪烁）的自定义按钮？谢谢

I don't care if it would be in code or in xaml but how can I get some of that custom buttons blinking (flashing) by coloranimation? Thanks

编辑：
我试着用visualstatemanager很多选择像Thaven的答案，但它并没有帮助。真的没有一个谁知道哪里有可能出现的问题？

I tried many options with visualstatemanager like in Thaven's answer but it didn't help. Really there is no one who knows where could be possible problem?

推荐答案

如果我明白你的问题正确的，你不知道如何设置动画选择你的按钮实例，并在运行时按钮pressed 。

If i understand your question correct, you don't know how to set animation to chosen instance of yours button, and run in when button is pressed.

有几个是方式来实现这一点。其中之一是使用Visual国。

there is several way to achieve that. One of them is to use Visual States.

在你的情况，XAML code应该是一些像这样的：

In your case, xaml code should look some like this:

    <Style TargetType="local:AnswerButton">
<Setter Property="Background" Value="Blue"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="local:AnswerButton">
            <Grid>
                <Grid.Resources>
                    <Storyboard x:Name="AnimateChosen"/>
                </Grid.Resources>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition GeneratedDuration="0:0:0.2" To="Pressed"/>
                            <VisualTransition GeneratedDuration="0:0:0.2" To="Normal"/>
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ColorAnimation Duration="0" To="Lime" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="myBorder" d:IsOptimized="True"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border BorderBrush="Blue" BorderThickness="2" CornerRadius="10" Background="Black">
                    <Border x:Name="myBorder" CornerRadius="9" Background="Blue">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"/>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="0"
                                TextAlignment="Center" VerticalAlignment="Center" 
                                Text="{TemplateBinding Option}" Foreground="Yellow" />
                            <TextBlock Grid.Column="1"
                                TextAlignment="Left" VerticalAlignment="Center" 
                                Text="{TemplateBinding Text}" Foreground="Black" />
                        </Grid>
                    </Border>
                </Border>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

关于动画和视觉风格在Windows Phone的更多信息：

More information about animation and visual styles in windows phone :

<一个href=\"http://windowsphonegeek.com/articles/WP7-Animations-in-depthndash-Overview-and-Getting-Started\" rel=\"nofollow\">http://windowsphonegeek.com/articles/WP7-Animations-in-depthndash-Overview-and-Getting-Started

<一个href=\"http://www.windowsphonegeek.com/articles/WP7-working-with-VisualStates-How-to-make-a-ToggleSwitch-from-CheckBox\" rel=\"nofollow\">http://www.windowsphonegeek.com/articles/WP7-working-with-VisualStates-How-to-make-a-ToggleSwitch-from-CheckBox

这篇关于WP7 - 在自定义按钮闪烁背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！