Shape流动效果
<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流动效果的更多相关文章
- 基于HTML5实现3D监控应用流动效果
http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html 流动效果在3D领域有着广泛的应用场景,如 ...
- HT for Web中3D流动效果的实现与应用
流动效果在3D领域有着广泛的应用场景,如上图中医学领域可通过3D的流动直观的观察人体血液的流动,燃气领域可用于监控管道内流动的液体或气体的流向.流速和温度等指标. 如今企业数据中心机房普遍面临着设备散 ...
- WPF Path实现虚线流动效果
原文:WPF Path实现虚线流动效果 最近闲来无事,每天上上网,看看博客生活也过得惬意,这下老总看不过去了,给我一个任务,叫我用WPF实现虚线流动效果,我想想,不就是虚线流动嘛,这简单于是就答应下来 ...
- HTML+CSS 实现水流流动效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- android shape图形优化Button效果
android shape可以让我们通过定义xml文件的方式创建图形,当然只能实现一些比较简单的图形(圆形,矩形,椭圆,线段),但是已经相当不错了,通过shape创建的图形作为控件的背景已经基本可以满 ...
- 详解shape标签
转载自:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...
- Android中shape属性详解
一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标签怎么用. 1.新建shape文件 首先在res/drawable文件夹下,新建一个文件,命名为:shape_radius.x ...
- android shape.xml 属性详解
转载源:http://blog.csdn.net/harvic880925/article/details/41850723 一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标 ...
- 使用CSS实现多种Noise噪点效果
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在插画中添加噪点肌理可以营造出一种自然的氛围.噪点肌理可以用于塑造阴影.高 ...
随机推荐
- Windows服务时间控件怎么调试
写了timer,调试的话在构造函数里面把Elapsed方法写成null,null就可以调试了 public PSJCService() { InitializeComponent(); Getuser ...
- 高并发数据库之MySql性能优化实战总结
向MySQL发送一个请求时MySQL具体的操作过程 慢查询 1.慢查询 SHOW VARIABLES LIKE '%quer%' 索引优化技巧 1.对于创建的多列索引(复合)索引,只要查询条件使用了最 ...
- dialog 菜单
dialog 菜单 # 默认将所有输出用 stderr 输出,不显示到屏幕 使用参数 --stdout 可将选择赋给变量 # 退出状态 0正确 1错误 窗体类型 --calendar # 日历 --c ...
- Net::HTTP 一次添加 cookie, body 发送post请求
use Net::HTTP::Request; use Net::HTTP::URL; use Net::HTTP::Transport; my $url = Net::HTTP::URL.new(& ...
- casper Dom的操作
phantom.casperTest = true; phantom.outputEncoding="utf-8"; var casper = require('casper'). ...
- 【坐在马桶上看算法】算法6:只有五行的Floyd最短路算法
暑假,小哼准备去一些城市旅游.有些城市之间有公路,有些城市之间则没有,如下图.为了节省经费以及方便计划旅程,小哼希望在出发之前知道任意两个城市之前的最短路程. 上图中有 ...
- python 列表元组加减乘除法
元组(typle)列表(list)没有减法和除法,但有加法和乘法. 1.加法,即把元素相加.只可以list和tuple相加,不能加其他类型. t= (1, ) + (2, 3, 4) print(t, ...
- android 通用 Intent
通用 Intent 本文内容显示详细信息 闹钟 日历 相机 联系人/人员应用 电子邮件 文件存储 本地操作 地图 音乐或视频 新笔记 电话 搜索 设置 发送短信 网络浏览器 使用 Android 调试 ...
- Android安全系列之:如何在native层保存关键信息
相信大家在日常开发中都要安全层面的需求,最典型的莫过于加密.而apk是脆弱的,反编译拿到你的源码轻而易举,这时候我们就需要更保险的手段来保存密钥之类的关键信息.本文就细致地讲解简单却实用的native ...
- goodrain云平台 mysql主从同步应用创建
mysql 主从同步原理 1)在Slave 服务器上执行sart slave命令开启主从复制开关,开始进行主从复制. 2)此时,Slave服务器的IO线程会通过在master上已经授权的复制用户权限请 ...