WP7 -在自定义按钮闪烁背景

Question

这是我的自定义按钮:

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

如何设置自定义按钮的动画?我试过了:

    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个我想把这个动画设置为选中的一个:

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

我不在乎它是在代码中还是在xaml中，但我如何通过coloranimation获得一些自定义按钮闪烁(闪烁)?由于

编辑:我用visualstatemanager尝试了许多选项，就像haven的答案一样，但它没有帮助。真的没有人知道哪里可能有问题吗?

Answer 1

我有一个非常简单的想法，我希望它对你的情况有帮助。每个按钮都有click事件，对吧?

 private void Button1_Click_1(object sender, RoutedEventArgs e)
    {
        DispatcherTimer dispatcherTimer = new DispatcherTimer();
        dispatcherTimer.Tick += dispatcherTimer_Tick;
        dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 10);
        dispatcherTimer.Start();
    }
    private void dispatcherTimer_Tick(object sender, EventArgs e)
    {
        Random rnd = new Random();            
        Button1.Background = new System.Windows.Media.SolidColorBrush(System.Windows.Media.Color.FromArgb(
                      Convert.ToByte(rnd.Next(255)),
                      Convert.ToByte(rnd.Next(255)),
                      Convert.ToByte(rnd.Next(255)),
                      Convert.ToByte(rnd.Next(255))
                      ));             
    }

Answer 2

如果我理解你的问题正确，你不知道如何将动画设置为你的按钮的选定实例，并在按钮被按下时运行。

有几种方法可以实现。其中之一就是使用视觉状态。

在您的例子中，xaml代码应该看起来像这样:

    <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中动画和视觉样式的更多信息:

http://windowsphonegeek.com/articles/WP7-Animations-in-depthndash-Overview-and-Getting-Started

http://www.windowsphonegeek.com/articles/WP7-working-with-VisualStates-How-to-make-a-ToggleSwitch-from-CheckBox

Answer 3

我认为你应该使用Expression Blend来制作这个动画。您可以实时看到转换，并且无需编译就可以进行适当的更改。

这里有一个很好的指南http://msdn.microsoft.com/en-us/magazine/cc721608.aspx