win10 uwp 使用动画修改 Grid column 的宽度

今天 wurstmitbrot 问如何通过动画修改 Grid 的 column ,虽然 column 是一个依赖属性,可以绑定,但是做出动画还是比较难的。 本文告诉大家如何对 Grid 做动画。

首先发出我做出的效果

实际上我动画做的是 double ,当然通过 double 进行绑定,可以看到,如果使用绑定需要进行转换,首先写一个转换的代码

public class DoubletoGridConvert : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        var n = (double) value;
        return new GridLength(n);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

需要两个依赖属性,可以绑定界面,动画。

  public static readonly DependencyProperty RcProperty = DependencyProperty.Register(
        "Rc", typeof(double), typeof(MainPage), new PropertyMetadata(100d));

    public double Rc
    {
        get { return (double) GetValue(RcProperty); }
        set { SetValue(RcProperty, value); }
    }

    public static readonly DependencyProperty LcProperty = DependencyProperty.Register(
        "Lc", typeof(double), typeof(MainPage), new PropertyMetadata(500d));

    public double Lc
    {
        get { return (double) GetValue(LcProperty); }
        set { SetValue(LcProperty, value); }
    }

然后写一个简单界面,请看代码。

      <Grid>
          <Grid.RowDefinitions>
              <RowDefinition Height="{x:Bind Rc,Mode=OneWay,Converter={StaticResource double}}"/>
              <RowDefinition Height="{x:Bind Lc,Mode=OneWay,Converter={StaticResource double}}"/>
          </Grid.RowDefinitions>
          <Grid Background="#FF565656"></Grid>
          <Grid Grid.Row="1" Background="#FFa2a2a2"></Grid>
      </Grid>
      <Button Margin="47,662,0,10" Content="set" Click="Button_OnClick"></Button>

点击按钮就可以进行动画。

动画我写在后台,于是会遇到几个问题,如果对于布局的,需要设置EnableDependentAnimation 如果没有设置,那么动画将不会做什么,这是需要知道的。最近看了 h 神的博客我才知道这个。然后需要知道,一个Storyboard只能设置一个SetTarget到一个对象,所以需要分为多个 Storyboard ,我现在还不知道方法,可以绑定多个。

看起来的按钮点击需要下面的代码。

       var storyboard = new Storyboard();
        var animation = new DoubleAnimation();
        Storyboard.SetTargetName(animation, nameof(MainPage));
        Storyboard.SetTarget(animation, this);
        Storyboard.SetTargetProperty(animation,"Rc");
        animation.EnableDependentAnimation = true;
        animation.From = 100;
        animation.To = 200;
        animation.Duration = new Duration(TimeSpan.FromMilliseconds(500));
        storyboard.Children.Add(animation);
        storyboard.Begin();

        storyboard = new Storyboard();
        animation = new DoubleAnimation();
        Storyboard.SetTarget(animation, this);
        Storyboard.SetTargetName(animation,nameof(MainPage));
        Storyboard.SetTargetProperty(animation, nameof(Lc));
        animation.From = 500;
        animation.To = 150;
        animation.Duration = new Duration(TimeSpan.FromMilliseconds(500));
        animation.EnableDependentAnimation = true;
        storyboard.Children.Add(animation);

        storyboard.Begin();

上面的代码还需要在动画完成进行设置,因为在配置比较低的机器,可能直接就没动画,所以在这里需要设置。

如果在开发遇到动画的问题,欢迎来问我。


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏埋名

React UI 组件库【uiw】发布

高品质的UI工具包,基于React 16+的组件库。 ? 为了表示支持,点击 阅读原文 搞点Star,多多益善。

1612
来自专栏韦弦的偶尔分享

微信小程序分享图片的简易canvas工具类

如有需要请自取:GitHub微信小程序保存图片分享的 canvas 简易自用工具类

1982
来自专栏吴老师移动开发

【iOS开发】iOS 动画详解

在移动开发中,为了提高用户体验,会用到一些动画来提高应用的视觉效果。让人有眼前一亮的感觉。同时有动画的过渡过程,会让应用看起来不是那么的生硬,更吸引用户。

2616
来自专栏HTML5学堂

CSS3圆角 border-radius

HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加...

5737
来自专栏林德熙的博客

win10 uwp 进度条 WaveProgressControl

昨天看到了有个大神做出好看的进度条样式,于是我就去抄袭他的代码,但是发现看不懂,于是本文主要翻译就是大神说这个控件如何做。

870
来自专栏有趣的django

博客园美化大全

3050
来自专栏河湾欢儿的专栏

css3过渡与动画

过渡 当触发的时候会有过渡的效果 1.transition-property:none|all|某一个属性值 2.transition-duration:...

6951
来自专栏算法channel

Python-GUI|Tkinter模块

01 Tkinter Tkinter模块是Python的标准Tk GUI工具包的接口,它并不是必须掌握的,但是掌握一个Python的标准图形库还是非常有意思的...

60710
来自专栏向治洪

VectorDrawable与AnimatedVectorDrawable

VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图。先来一个例子吧...

2075
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何快速实现手机上的资源上传功能

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

1022

扫码关注云+社区

领取腾讯云代金券