Windows Phone 边框的双动画

Question

我需要为 Border 元素制作某种类型的属性 "EnableBlinking" 以启用带间隔的不透明度的 DoubleAnimation。

<Border CornerRadius="5" Background="Red" EnableBlinking="True" />

我找到了示例，但据我了解，Windows Phone 不支持此示例。还有 VisualStateManager。有人可以给我任何例子或好的教程吗？我不明白我是否需要创建样式或新元素。

谢谢

Answer 1

您可以使用高级 XAML 概念，并可以使用 Attached 属性和用户控制。

Create User Control

<UserControl
    .................
         <UserControl.Resources>
                <Storyboard x:Name="storyBoard">
                    <DoubleAnimation Storyboard.TargetName="brd"
                             Storyboard.TargetProperty="Opacity"
                             From="0"
                             To="1"
                             RepeatBehavior="Forever"
                             AutoReverse="True"
                             Duration="0:0:0.1"/>
                </Storyboard>

            </UserControl.Resources>
            <Grid>
                <Border  x:Name="brd" CornerRadius="5" Background="Red"/>
            </Grid>
        </UserControl>


public sealed partial class BorderControl : UserControl
    {
        public BorderControl()
        {
            this.InitializeComponent();
        }

        public static bool GetEnableBlinking(DependencyObject obj)
        {
            return (bool)obj.GetValue(EnableBlinkingProperty);
        }

        public static void SetEnableBlinking(DependencyObject obj, bool value)
        {
            obj.SetValue(EnableBlinkingProperty, value);
        }

        // Using a DependencyProperty as the backing store for EnableBlinking.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty EnableBlinkingProperty =
            DependencyProperty.RegisterAttached("EnableBlinking", typeof(bool), typeof(MainPage), new PropertyMetadata(0, (s, e) =>
            {
                (s as BorderControl).storyBoard.Begin();
            }));
    } 



 MainPage.xaml
<Grid>
        <local:BorderControl EnableBlinking="true" HorizontalAlignment="Center" VerticalAlignment="Center" Height="100" Width="100"/>
    </Grid>

这是源代码： https://onedrive.live.com/?id=58D8C7A3527E52FB%21105&cid=58D8C7A3527E52FB

Windows Phone 边框的双动画

Windows Phone DoubleAnimation for Border

xaml

windows-phone-8