<Window x:Class="MvvmLight1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:localBehavior="clr-namespace:MvvmLight1"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ignore="http://www.ignore.com"
mc:Ignorable="d ignore"
Height="400"
Width="600"
Title="MVVM Light Application"
DataContext="{Binding Main, Source={StaticResource Locator}}"> <Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources> <StackPanel>
<Ellipse StrokeDashArray="2,4" Stroke="Red" StrokeThickness="3" Height="100" Width="100">
<i:Interaction.Behaviors>
<localBehavior:FluidBehavior FlowRate="{Binding ElementName=FlowRate,Path=Value}"
WhetherFluid="{Binding ElementName=FluidCheckBox, Path=IsChecked}"/>
</i:Interaction.Behaviors>
</Ellipse>
<Rectangle StrokeDashArray="1,2" Stroke="Blue" StrokeThickness="3" Height="100" Width="100">
<i:Interaction.Behaviors>
<localBehavior:FluidBehavior FlowRate="{Binding ElementName=FlowRate,Path=Value}"
WhetherFluid="{Binding ElementName=FluidCheckBox, Path=IsChecked}"/>
</i:Interaction.Behaviors>
</Rectangle>
<Path x:Name="MyPath"
StrokeThickness="3"
StrokeDashArray="5,10"
Stroke="Black">
<i:Interaction.Behaviors>
<localBehavior:FluidBehavior FlowRate="{Binding ElementName=FlowRate,Path=Value}"
WhetherFluid="{Binding ElementName=FluidCheckBox, Path=IsChecked}"/>
</i:Interaction.Behaviors>
<Path.Data>
<PathGeometry Figures="M 10,100 C 10,300 300,-160 300,100" />
</Path.Data>
</Path>
<StackPanel>
<CheckBox x:Name="FluidCheckBox" Content="流动效果"/>
<Slider x:Name="FlowRate" Minimum="1" Maximum="10"/>
<TextBlock Text="{Binding ElementName=FlowRate,Path=Value}"/>
</StackPanel>
</StackPanel> </Window>

由Xaml可以看出核心就是一个FluidBehavior,效果,就不过多阐述了

最核心的就是用一个定时器对于Shape的StrokeDashOffset进行改变,其中抽象FlowRate以及WhetherFluid用于控制流动速率以及是否流动

using System;
using System.Windows;
using System.Windows.Interactivity;
using System.Windows.Shapes;
using System.Windows.Threading; namespace MvvmLight1
{
/// <summary>
/// 流动行为
/// </summary>
public class FluidBehavior : Behavior<Shape>
{
#region 依赖属性 /// <summary>
/// 流动速度
/// </summary>
public int FlowRate
{
get { return (int)GetValue(FlowRateProperty); }
set { SetValue(FlowRateProperty, value); }
} // Using a DependencyProperty as the backing store for FlowRate. This enables animation, styling, binding, etc...
public static readonly DependencyProperty FlowRateProperty =
DependencyProperty.Register("FlowRate", typeof(int), typeof(FluidBehavior), new PropertyMetadata()); /// <summary>
/// 是否流动
/// </summary>
public bool WhetherFluid
{
get { return (bool)GetValue(WhetherFluidProperty); }
set { SetValue(WhetherFluidProperty, value); }
} // Using a DependencyProperty as the backing store for WhetherFluid. This enables animation, styling, binding, etc...
public static readonly DependencyProperty WhetherFluidProperty =
DependencyProperty.Register("WhetherFluid", typeof(bool), typeof(FluidBehavior), new PropertyMetadata(true, OnWhetherFluidChanged)); private static void OnWhetherFluidChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var behavior = d as FluidBehavior;
if (Convert.ToBoolean(e.NewValue))
{
behavior._timer.Start();
}
else
{
behavior._timer.Stop();
}
} #endregion protected override void OnAttached()
{
base.OnAttached();
Fluid();
} private readonly DispatcherTimer _timer = new DispatcherTimer(); //流动
private void Fluid()
{
_timer.Tick += (sender, e) =>
{
AssociatedObject.StrokeDashOffset -= FlowRate;
};
_timer.Interval = TimeSpan.FromSeconds(1d / );
if (WhetherFluid)
{
_timer.Start();
}
}
}
}

Shape流动效果的更多相关文章

  1. 基于HTML5实现3D监控应用流动效果

    http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html 流动效果在3D领域有着广泛的应用场景,如 ...

  2. HT for Web中3D流动效果的实现与应用

    流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. 如今企业数据中心机房普遍面临着设备散 ...

  3. WPF Path实现虚线流动效果

    原文:WPF Path实现虚线流动效果 最近闲来无事,每天上上网,看看博客生活也过得惬意,这下老总看不过去了,给我一个任务,叫我用WPF实现虚线流动效果,我想想,不就是虚线流动嘛,这简单于是就答应下来 ...

  4. HTML+CSS 实现水流流动效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. android shape图形优化Button效果

    android shape可以让我们通过定义xml文件的方式创建图形,当然只能实现一些比较简单的图形(圆形,矩形,椭圆,线段),但是已经相当不错了,通过shape创建的图形作为控件的背景已经基本可以满 ...

  6. 详解shape标签

    转载自:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...

  7. Android中shape属性详解

    一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标签怎么用. 1.新建shape文件 首先在res/drawable文件夹下,新建一个文件,命名为:shape_radius.x ...

  8. android shape.xml 属性详解

    转载源:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...

  9. 使用CSS实现多种Noise噪点效果

    声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在插画中添加噪点肌理可以营造出一种自然的氛围.噪点肌理可以用于塑造阴影.高 ...

随机推荐

  1. 修改el-table滚动条样式

    <include file="Trade:header" /> <style type="text/css" media="scre ...

  2. alloffthelights使用方法

    官网上的demo没有用,因为官网用的jquery是谷歌的CDN,download下来的demo也没有用,因为demo的路径下少了jquery.所以自己写demo的时候要把jquery和alloffth ...

  3. JQuery对CheckBox的一些相关操作

    一.通过选择器选取CheckBox: 1.给CheckBox设置一个id属性,通过id选择器选取: <input type="checkbox" name="myB ...

  4. ios TextField限制输入两位小数

    只需要实现textField的这个代理方法就可以实现 - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange: ...

  5. HDU 2056 龟兔赛跑 (DP)

    题意:见题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2059 解题报告:以前一直没看出来这题是个DP题,知道是DP题就简单了 .首先要把起点和终点看成 ...

  6. CTSC/APIO2018滚粗记

    CTSC/APIO2018滚粗记 前言 从\(5.5\)晚上的火车到\(5.14\)早上的高铁 \(10\)天的时间真的过去的很快. 眨眼间,就到了今天晚上的颁奖. 至于结果如何,反而并不是那么重要了 ...

  7. 以python代码解释fork系统调用

    import os print('Process (%s) start...' % os.getpid()) # Only works on Unix/Linux/Mac: pid = os.fork ...

  8. redis从入门到踩坑

    背景 Redis在互联网项目的使用也是非常普遍的,作为最常用的NO-SQL数据库,对Redis的了解已经成为了后端开发的必备技能.小编对Redis的使用时间不长,但是项目中确两次踩中了Redis的坑, ...

  9. 深入理解C语言的函数调用过程 【转】

    转自:http://blog.chinaunix.net/uid-25909619-id-4240084.html 原文地址:深入理解C语言的函数调用过程 作者:wjlkoorey258     本文 ...

  10. Winform/WPF Clipboard之剪切复制粘贴

    Winform // <summary> /// 复制或剪切文件至剪贴板(方法) /// </summary> /// <param name="files&q ...