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噪点效果
声明:本文涉及图文和模型素材仅用于个人学习.研究和欣赏,请勿二次修改.非法传播.转载.出版.商用.及进行其他获利行为. 背景 在插画中添加噪点肌理可以营造出一种自然的氛围.噪点肌理可以用于塑造阴影.高 ...
随机推荐
- [六字真言]5.咪.功力不足,学习前端JavaScript异常
A Guide to Proper Error Handling in JavaScript 这是关于JavaScript中异常处理的故事.如果你相信 墨菲定律 ,那么任何事情都可能出错,不,一定会出 ...
- 转自知乎大神---什么是 JS 原型链?
我们知道 JS 有对象,比如 var obj = { name: 'obj' } 我们可以对 obj 进行一些操作,包括 「读」属性 「新增」属性 「更新」属性 「删除」属性 下面我们主要来看一下「读 ...
- git 学习小记
话说 git 出了已经很久了,可是我一直没用过.其实也不是没用过,只不过在 github 上下载东西那根本就不是在用 git,只是单纯的HTTP下载而已.我们公司用的是 svn,所以我只会一点点svn ...
- MYSQL查询重复记录的方法
select * from hengtu_demandpush a where (a.did,a.mid) in (select did,mid from hengtu_demandpush grou ...
- Windows bat 学习(初级)
http://steve-jansen.github.io/guides/windows-batch-scripting/part-1-getting-started.html 注释:REM 或 :: ...
- 第9月第26天 pairs和ipairs cocos2dx 动画
1. a={ ip = "127.0.0.1", port = 6789 } for i,v in pairs(a) do print(i,v) end a={1} for i,v ...
- requests下载文件并重新上传
import re import requests from io import BytesIO from django.core.files.uploadedfile import InMemory ...
- Opencv学习笔记——release和debug两个模式的运行问题
本文为原创作品,转载请注明出处 欢迎关注我的博客:http://blog.csdn.net/hit2015spring和http://www.cnblogs.com/xujianqing/ 作者:晨凫 ...
- C#上传图片(含有图片大小格式过滤以及改变像素安全存储)
示例一: public JsonResult Upload(string parameter) { ]; try { //LogHelper.Info("文件长度:" + file ...
- emulator: ERROR: x86 emulation currently requires hardware acceleration!Please ensure Intel HAXM is properly installed and usable.CPU acceleration status: HAX kernel module is not installed!
Android Studio 1.0 已经放出来了,以后的Android平台开发激昂逐步从Eclipse向Android Studio迁移,为了能不落伍我也特意从Google下载了Android St ...