WPF实现炫酷Loading控件
WPF实现炫酷Loading控件
Win8系统的Loading效果还是很不错的，网上也有人用CSS3等技术实现，研究了一下，并打算用WPF自定义一个Loading 控件实现类似的效果，并可以让用户对Loading的颗粒（Particle）背景颜色进行自定义，话不多说，直接上代码：
1、用VS2012新建一个WPF的用户控件库项目WpfControlLibraryDemo，VS自动生成如下结构：
2、删除UserControl1.xaml，并新建一个Loading的CustomControl(不是UserControl),如下图所示：
3、如果报错找不到Loading类型，请编译，下面在Generic.xaml主题文件中对Loading的样式和内容进行定义（注意添加 xmlns:system = "clr-namespace:System;assembly=mscorlib"），代码如下：
1 xmlns="https://www.360docs.net/doc/3e2933864.html,/winfx/2006/xaml/presentation" 3 xmlns:x="https://www.360docs.net/doc/3e2933864.html,/winfx/2006/xaml" 4 xmlns:system = "clr-namespace:System;assembly=mscorlib" 5 xmlns:local="clr-namespace:WpfControlLibraryDemo"> 6 7 8 71 72 Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)" 85 From = "{StaticResource ParticleBeginAngle1}" 86 To = "{StaticResource ParticleEndAngle1}"87 BeginTime = "{StaticResource ParticleBeginTime1}" 88 Duration = "{StaticResource ParticleDuration1}"/> 89 105 Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"115 From = "{StaticResource ParticleBeginAngle1}"116 To = "{StaticResource ParticleEndAngle1}"117 BeginTime = "{StaticResource ParticleBeginTime1}"118 Duration = "{StaticResource ParticleDuration1}"/>119 Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"122 From = "{StaticResource ParticleBeginAngle2}"123 To = "{StaticResource ParticleEndAngle2}"124 BeginTime = "{StaticResource ParticleBeginTime2}"125 Duration = "{StaticResource ParticleDuration2}"/>126 Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"129 From = "{StaticResource ParticleBeginAngle3}"130 To = "{StaticResource ParticleEndAngle3}"131 BeginTime = "{StaticResource ParticleBeginTime3}"132 Duration = "{StaticResource ParticleDuration3}"/>133 134135 138BeginTime = "{StaticResource StoryBoardBeginTimeP2}"139 Duration = "{StaticResource StoryBoardDuration}"140 RepeatBehavior = "Forever">141142 Storyboard.TargetName = "p2"144 Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"145 From = "{StaticResource ParticleBeginAngle1}"146 To = "{StaticResource ParticleEndAngle1}"147 BeginTime = "{StaticResource ParticleBeginTime1}"148 Duration = "{StaticResource ParticleDuration1}"/>149 Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"176 From = "{StaticResource ParticleBeginAngle1}"177 To = "{StaticResource ParticleEndAngle1}"178 BeginTime = "{StaticResource ParticleBeginTime1}"179 Duration = "{StaticResource ParticleDuration1}"/>180 Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"183 From = "{StaticResource ParticleBeginAngle2}"184 To = "{StaticResource ParticleEndAngle2}"185 BeginTime = "{StaticResource ParticleBeginTime2}"186 Duration = "{StaticResource ParticleDuration2}"/>187 Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"190 From = "{StaticResource ParticleBeginAngle3}"191 To = "{StaticResource ParticleEndAngle3}"192 BeginTime = "{StaticResource ParticleBeginTime3}"193 Duration = "{StaticResource ParticleDuration3}"/>194 195196197 200BeginTime = "{StaticResource StoryBoardBeginTimeP4}"201 Duration = "{StaticResource StoryBoardDuration}"202 RepeatBehavior = "Forever">203204 Storyboard.TargetName = "p4"206 Storyboard.TargetProperty = "(UIElement.RenderTransform).(RotateTransform.Angle)"207 From = "{StaticResource ParticleBeginAngle1}"208 To = "{StaticResource ParticleEndAngle1}"209 BeginTime = "{StaticResource ParticleBeginTime1}"210 Duration = "{StaticResource ParticleDuration1}"/>211 229230 237 240 246247 248249 Opacity = "{StaticResource ParticleOpacity}">253 256 259 265266 267268 Opacity = "{StaticResource ParticleOpacity}">272 275 278 284285 286287 Opacity = "{StaticResource ParticleOpacity}">291 294 297 303304 305306 Opacity = "{StaticResource ParticleOpacity}">310 313 316 322323 324325326 327328329330331332 333334335336337338
在构建中发现，一开始在设定绑定时，写成
4、编辑Loading.cs文件，对自定义属性FillColor和逻辑进行编码：
1using System; 2using System.Collections.Generic; 3using System.Linq; 4using System.Text; 5using System.Threading.Tasks;6using System.Windows;7using System.Windows.Controls;8using System.Windows.Data; 9using System.Windows.Documents;10using System.Windows.Input;11using System.Windows.Media;12using System.Windows.Media.Imaging;13using
System.Windows.Navigation;14using System.Windows.Shapes;1516namespace WpfControlLibraryDemo17 {18using https://www.360docs.net/doc/3e2933864.html,ponentModel;19///
xmlns:MyNamespace="clr-namespace:WpfControlLibraryDemo"27///28///29///步骤 1b) 在其他项目中存在的 XAML 文件中使用该自定义控件。30///将此 XmlNamespace 特性添加到要使用该特性的标记文件的根31///元素中:32///33///
xmlns:MyNamespace="clr-namespace:WpfControlLibraryDemo;assembly=WpfControlLibraryDemo"34
///35///您还需要添加一个从 XAML 文件所在的项目到此项目的项目引用，36///并重新生成以避免编译错误:37///38///在解决方案资源管理器中右击目标项目，然后依次单击39///“添加引用”->“项目”->[浏览查找并选择此项目]40///41///42///步骤 2)43///继续操作并在 XAML 文件中使用控件。44///45///
FillColor55 FillColorProperty = DependencyProperty.Register("FillColor",56
typeof(Color),57typeof(Loading),58new
UIPropertyMetadata(Colors.DarkBlue,59new
PropertyChangedCallback(OnUriChanged))60 );61//Colors.DarkBlue为控件初始化默认值6263 }64//属性变更回调函数65private static void
OnUriChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)66 {67
//Border b = (Border)d;68//MessageBox.Show(e.NewValue.ToString());6970 }71 #region自定义Fields72// DependencyProperty属性定义
FillColorProperty=FillColor+Property组成73public static readonly DependencyProperty FillColorProperty;74#endregion75//VS设计器属性支持76 [Description("背景色"), Category("个性配置"), DefaultValue("#FF668899")]77public Color FillColor78
{79//GetValue,SetValue为固定写法，此处一般不建议处理其他逻辑80get { return (Color)GetValue(FillColorProperty); }81set { SetValue(FillColorProperty,
value); }82 }83 }84 }
5、编译，如果无误后，可以添加WPF应用程序WpfAppLoadingTest进行测试（添加项目引用）。
打开MainWindow.xaml，将Loading控件拖放到设计界面上，如下图所示：
6、控件颜色修改，选中控件，在属性栏中进行配置即可：
7.总结
可以看到WPF自定义控件还是比较容易的，但是难点在于UI的设计，如果需要做的美观，需要美工的参与，而且需要转换成XAML。
wpf自定义slider控件
自定义Slider控件 最终效果： 界面：