WPF实现炫酷Loading控件

WPF漂亮的窗体样式、按钮样式、复选框样式<!--窗体样式--><ControlTemplate x:Key="WindowTemplateKey" TargetType="{x:Type Window}"><Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"><Grid><AdornerDecorator><ContentPresenter/></AdornerDecorator><ResizeGrip x:Name="WindowResizeGrip" HorizontalAlignment="Right" VerticalAlignment="Bottom" IsTabStop="false" Visibility="Collapsed"/></Grid></Border><ControlTemplate.Triggers><MultiTrigger><MultiTrigger.Conditions><Condition Property="ResizeMode" Value="CanResizeWithGrip"/><Condition Property="WindowState" Value="Normal"/></MultiTrigger.Conditions><Setter Property="Visibility" TargetName="WindowResizeGrip" Value="Visible"/></MultiTrigger></ControlTemplate.Triggers></ControlTemplate><ControlTemplate x:Key="WindowControlRectangleTemplate" TargetType="{x:Type Window}"><Border Background="{TemplateBinding Background}" BorderThickness="1,1,1,1" CornerRadius="0,0,0,0" ><Border.BorderBrush><ImageBrush ImageSource="/Controls;component\Images\bgtop.png"></ImageBrush></Border.BorderBrush><Grid Width="Auto" Height="Auto" VerticalAlignment="Stretch"><Grid.ColumnDefinitions><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="25"/><RowDefinition/></Grid.RowDefinitions><Border x:Name="topborder" Margin="0" Grid.Column="0" BorderBrush="{x:Null}" BorderThickness="0" CornerRadius="0,0,0,0" Grid.ColumnSpan="1"><Border.Background><ImageBrush ImageSource="/Controls;component/images/bgtop.png"></ImageBrush></Border.Background><Grid HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Width="Auto" Height="Auto"><Grid.ColumnDefinitions><ColumnDefinition Width="9.27"/><ColumnDefinition Width="137.397"/><ColumnDefinition/><ColumnDefinition Width="28.207"/><ColumnDefinition Width="0"/><ColumnDefinition Width="27.398"/><ColumnDefinition Width="7.586"/></Grid.ColumnDefinitions><TextBlock Margin="0,0,0,-8" Name="txtTile" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" FontFamily="微软雅⿊" Height="25" Width="122" FontSize="12" Foreground="White"/><Button x:Name="btnMin" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="2.668,2.795,2.777,3.776" Content="－" Style="{StaticResource ButtonMini}" Height="25" Width="30" Grid.Column="3" FontWeight= <Button x:Name="btnClose" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="2.668,2.795,1.968,3.776" Content="×" Style="{StaticResource ButtonClose}" Height="25" Width="30" FontWeight="Bold</Grid></Border><Grid Margin="0" Grid.Row="1"><Grid.ColumnDefinitions><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition/></Grid.RowDefinitions><ContentPresenter HorizontalAlignment="Stretch" Margin="0" Width="Auto" Grid.Column="0" Grid.ColumnSpan="1" Grid.RowSpan="1"/></Grid></Grid></Border></ControlTemplate><Style x:Key="WindowRectangleStyle" TargetType="{x:Type Window}"><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/><Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/><Setter Property="Template" Value="{StaticResource WindowControlRectangleTemplate}"/><Style.Triggers><Trigger Property="ResizeMode" Value="CanResizeWithGrip"><Setter Property="Template" Value="{StaticResource WindowTemplateKey}"/></Trigger></Style.Triggers></Style><!--登录按钮样式--><Style x:Key="ButtonOther" TargetType="{x:Type Button}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Grid><Grid.ColumnDefinitions><ColumnDefinition x:Name="columnDefinition1" Width="0.982*"/><ColumnDefinition x:Name="columnDefinition" Width="0.018*"/></Grid.ColumnDefinitions><Rectangle x:Name="rectangle" Stroke="{x:Null}" Fill="#dfa854" /><ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding V </Grid><ControlTemplate.Triggers><Trigger Property="IsFocused" Value="True"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="#dfa854"/></Trigger><Trigger Property="IsDefaulted" Value="True"><Setter Property="Fill" TargetName="rectangle" Value="#dfa854"/><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/></Trigger><Trigger Property="IsMouseOver" Value="True"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="#efbc6e"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="#dfa854"/></Trigger><Trigger Property="IsEnabled" Value="False"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><!--最⼩化按钮样式--><Style x:Key="ButtonMini" TargetType="{x:Type Button}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Grid><Grid.ColumnDefinitions><ColumnDefinition x:Name="columnDefinition1" Width="0.982*"/><ColumnDefinition x:Name="columnDefinition" Width="0.018*"/></Grid.ColumnDefinitions><Rectangle x:Name="rectangle" Stroke="{x:Null}" Fill="{x:Null}" /><ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding V </Grid><ControlTemplate.Triggers><Trigger Property="IsFocused" Value="True"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/></Trigger><Trigger Property="IsDefaulted" Value="True"><Setter Property="Fill" TargetName="rectangle" Value="#00a1da"/><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/></Trigger><Trigger Property="IsMouseOver" Value="True"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="#00a1da"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="#3e86cc"/><Setter Property="Width" TargetName="columnDefinition" Value="Auto"/><Setter Property="MinWidth" TargetName="columnDefinition" Value="0"/><Setter Property="Width" TargetName="columnDefinition1" Value="*"/></Trigger><Trigger Property="IsEnabled" Value="False"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><!--关闭按钮样式--><Style x:Key="ButtonClose" TargetType="{x:Type Button}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Grid><Grid.ColumnDefinitions><ColumnDefinition x:Name="columnDefinition1" Width="0.982*"/><ColumnDefinition x:Name="columnDefinition" Width="0.018*"/></Grid.ColumnDefinitions><!--RadiusY="2" RadiusX="2"圆⾓属性--><Rectangle x:Name="rectangle" Stroke="{x:Null}" Fill="{x:Null}" Grid.ColumnSpan="1" /><ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding V </Grid><ControlTemplate.Triggers><Trigger Property="IsFocused" Value="True"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/></Trigger><Trigger Property="IsDefaulted" Value="True"><Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/></Trigger><Trigger Property="IsMouseOver" Value="True"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="#d44027"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="#3e86cc"/><Setter Property="Width" TargetName="columnDefinition" Value="Auto"/><Setter Property="MinWidth" TargetName="columnDefinition" Value="0"/><Setter Property="Width" TargetName="columnDefinition1" Value="*"/></Trigger><Trigger Property="IsEnabled" Value="False"><Setter Property="Stroke" TargetName="rectangle" Value="{x:Null}"/><Setter Property="Fill" TargetName="rectangle" Value="{x:Null}"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><!-- 复选框样式 --><Style TargetType="CheckBox"><Setter Property="Background"><Setter.Value><SolidColorBrush Color="#FFFFBA00"/></Setter.Value></Setter><Setter Property="Foreground" Value="#FF000000"/><Setter Property="HorizontalContentAlignment" Value="Left"/><Setter Property="VerticalContentAlignment" Value="Top"/><Setter Property="Padding" Value="4,1,0,0"/><Setter Property="BorderThickness" Value="1"/><Setter Property="BorderBrush" Value="#dcdcdc"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="CheckBox"><Grid><vsm:VisualStateManager.VisualStateGroups><vsm:VisualStateGroup x:Name="CommonStates"><vsm:VisualState x:Name="Normal"/><vsm:VisualState x:Name="MouseOver"><Storyboard><!--<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="Opacity"><SplineDoubleKeyFrame KeyTime="0" Value="1"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddleBackground" Storyboard.TargetProperty="Opacity"><SplineDoubleKeyFrame KeyTime="0" Value="1"/></DoubleAnimationUsingKeyFrames>--><ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"><SplineColorKeyFrame KeyTime="0" Value="#e9e9ef"/></ColorAnimationUsingKeyFrames><ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"><SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/></ColorAnimationUsingKeyFrames><ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"><SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/></ColorAnimationUsingKeyFrames></Storyboard></vsm:VisualState><vsm:VisualState x:Name="Pressed"><Storyboard><!--<DoubleAnimationUsingKeyFrames Storyboard.TargetName="BackgroundOverlay" Storyboard.TargetProperty="Opacity"><SplineDoubleKeyFrame KeyTime="0" Value="1"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddleBackground" Storyboard.TargetProperty="Opacity"><SplineDoubleKeyFrame KeyTime="0" Value="1"/></DoubleAnimationUsingKeyFrames>--><ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"><SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/></ColorAnimationUsingKeyFrames><ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"><SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/></ColorAnimationUsingKeyFrames><ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"><SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/></ColorAnimationUsingKeyFrames><ColorAnimationUsingKeyFrames Storyboard.TargetName="BoxMiddle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"><SplineColorKeyFrame KeyTime="0" Value="#e9e9e9"/></ColorAnimationUsingKeyFrames><!--<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Opacity)"><SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.5"/></DoubleAnimationUsingKeyFrames>--></Storyboard></vsm:VisualState><vsm:VisualState x:Name="Disabled"><Storyboard><DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)"><SplineDoubleKeyFrame KeyTime="0" Value=".55"/></DoubleAnimationUsingKeyFrames><DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)"><SplineDoubleKeyFrame KeyTime="0" Value="0.55"/></DoubleAnimationUsingKeyFrames></Storyboard></vsm:VisualState></vsm:VisualStateGroup><vsm:VisualStateGroup x:Name="CheckStates"><vsm:VisualState x:Name="Checked"><Storyboard><DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckIcon" Storyboard.TargetProperty="(UIElement.Opacity)"><SplineDoubleKeyFrame KeyTime="0" Value="1"/></DoubleAnimationUsingKeyFrames></Storyboard></vsm:VisualState><vsm:VisualState x:Name="Unchecked"/><vsm:VisualState x:Name="Indeterminate"><Storyboard><DoubleAnimationUsingKeyFrames Storyboard.TargetName="IndeterminateIcon" Storyboard.TargetProperty="(UIElement.Opacity)"><SplineDoubleKeyFrame KeyTime="0" Value="1"/></DoubleAnimationUsingKeyFrames></Storyboard></vsm:VisualState></vsm:VisualStateGroup><vsm:VisualStateGroup x:Name="FocusStates"><vsm:VisualState x:Name="Focused"><!--<Storyboard><DoubleAnimationUsingKeyFrames Storyboard.TargetName="ContentFocusVisualElement" Storyboard.TargetProperty="Opacity"><SplineDoubleKeyFrame KeyTime="0" Value="1"/></DoubleAnimationUsingKeyFrames></Storyboard>--></vsm:VisualState><vsm:VisualState x:Name="Unfocused"/></vsm:VisualStateGroup></vsm:VisualStateManager.VisualStateGroups><Grid.ColumnDefinitions><ColumnDefinition Width="20"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid HorizontalAlignment="Left" VerticalAlignment="Top" x:Name="grid"><Rectangle Height="18" Margin="1" x:Name="Background" Width="18" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" RadiusX="1" RadiusY="1" Fill="{x:Null}"/><Rectangle Height="18" Margin="1" x:Name="BackgroundOverlay" Width="18" Opacity="0" Fill="{StaticResource NormalBrush}" Stroke="#00000000" StrokeThickness="1" RadiusX="1" RadiusY="1"/><Rectangle Height="14" x:Name="BoxMiddleBackground" Width="14" Fill="{TemplateBinding Background}" Stroke="#00000000" StrokeThickness="1" RadiusX="1" RadiusY="1"/><Rectangle Height="14" x:Name="BoxMiddle" Width="14" StrokeThickness="1" RadiusX="1" RadiusY="1" Stroke="{x:Null}"><Rectangle.Fill><LinearGradientBrush EndPoint="0.64,0.88" StartPoint="0.62,0.15"><GradientStop Color="#FFFFFFFF" Offset="0.013"/><GradientStop Color="#F9FFFFFF" Offset="0.375"/><GradientStop Color="#EAFFFFFF" Offset="0.603"/><GradientStop Color="#D8FFFFFF" Offset="1"/></LinearGradientBrush></Rectangle.Fill></Rectangle><Rectangle Height="14" x:Name="BoxMiddleLine" Width="14" Opacity=".4" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" RadiusX="1" RadiusY="1"/><Path Height="14" Margin="1,1,0,1.5" x:Name="CheckIcon" Width="14.5" Opacity="0" Fill="Green" Stretch="Fill" Data="M102.03442,598.79645 L105.22962,597.78918 L106.78825,600.42358 C106.78825,600.42358 108.51028 <!--<Rectangle Height="2" x:Name="IndeterminateIcon" Width="6" Opacity="0" Fill="#FF333333"/><Rectangle Height="14" x:Name="DisabledVisualElement" Width="14" Opacity="0" Fill="#FFFFFFFF" RadiusX="1" RadiusY="1"/>--><!--<Rectangle Height="16" x:Name="ContentFocusVisualElement" Width="16" IsHitTestVisible="false" Opacity="0" Stroke="{StaticResource HighlightBrush}" StrokeThickness="1" RadiusX="2" RadiusY="2"/>--></Grid><ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" VerticalAlignment="{TemplateBinding VerticalContentAlignment}</Grid></ControlTemplate></Setter.Value></Setter></Style>以上代码是窗体各个控件的样式源码和效果图，简单的样式其实不复杂，但是如果想要界⾯效果惊艳⼀些；就需要使⽤微软的另⼀个⼯具Microsoft Expression Blend 4去画⾃⼰想实现呈现的效果。

四叶花瓣旋转loading代码
四叶花瓣旋转loading是一种常见的加载动画效果，它以四个花瓣旋转的形式展现在用户面前。

这个效果有如下几个特点：首先是简洁明了，四个花瓣的旋转动作非常简单易懂，不会给用户带来困扰；其次是美观大方，四叶花形状的设计给人一种优雅的感觉，增加了用户的审美享受；最后是加载效果明显，旋转的花瓣能够清晰地告诉用户当前页面正在加载中，避免用户的不耐烦。

在实现四叶花瓣旋转loading效果时，我们可以使用HTML和CSS来完成。

首先，我们可以使用div元素来创建一个容器，然后通过CSS设置容器的样式，包括宽度、高度、背景颜色等。

接着，我们可以使用伪元素::before和::after来创建四个花瓣，通过CSS设置它们的样式，包括大小、形状、颜色、动画等。

最后，通过CSS 的@keyframes规则来定义花瓣旋转的动画效果，使其循环播放。

通过以上的步骤，我们就可以实现一个简单的四叶花瓣旋转loading效果。

当用户访问一个需要加载的页面时，页面会展示这个loading效果，告诉用户当前页面正在加载中。

当页面加载完成后，loading效果会消失，用户就可以正常使用页面了。

四叶花瓣旋转loading是一种简洁美观且效果明显的加载动画，它能够增加用户的审美享受，同时也能够有效地告知用户当前页面正在加载中。

在实现时，我们可以使用HTML和CSS来完成，通过设置容器和花瓣的样式，以及定义旋转的动画效果，来实现这个
loading效果。

这个loading效果的实现不仅简单易懂，而且能够有效地提升用户体验。

Winform圆形环绕的Loading动画实现代码之前写了⼀个WPF的圆形环绕的Loading动画，现在写⼀个Winform的圆形环绕的Loading动画。

1.新建Winform项⽬，添加⼀个pictureBox控件，命名为：pictureBox；2.引⽤中添加using System.Drawing.Drawing2D;3.Form窗体命名为：Loading，cs全部代码如下：复制代码代码如下:using System;using System.Collections.Generic;using ponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows.Forms;using System.Collections;using System.Drawing.Drawing2D;namespace Circle_ProcessBar{public partial class Loading : Form{private int count = -1;private ArrayList images = new ArrayList();public Bitmap[] bitmap = new Bitmap[8];private int _value = 1;private Color _circleColor = Color.Red;private float _circleSize = 0.8f;public Loading(){InitializeComponent();}public Color CircleColor{get { return _circleColor; }set{_circleColor = value;Invalidate();}}public float CircleSize{get { return _circleSize; }set{if (value <= 0.0F)_circleSize = 0.05F;else_circleSize = value > 4.0F ? 4.0F : value;Invalidate();}}public Bitmap DrawCircle(int j)const float angle = 360.0F / 8; Bitmap map = new Bitmap(150, 150); Graphics g = Graphics.FromImage(map);g.TranslateTransform(Width / 2.0F, Height / 2.0F);g.RotateTransform(angle * _value);g.InterpolationMode = InterpolationMode.HighQualityBicubic;g.SmoothingMode = SmoothingMode.AntiAlias;int[] a = new int[8] { 25, 50, 75, 100, 125, 150, 175, 200 };for (int i = 1; i <= 8; i++){int alpha = a[(i + j - 1) % 8];Color drawColor = Color.FromArgb(alpha, _circleColor);using (SolidBrush brush = new SolidBrush(drawColor)){float sizeRate = 3.5F / _circleSize;float size = Width / (6 * sizeRate);float diff = (Width / 10.0F) - size;float x = (Width / 80.0F) + diff;float y = (Height / 80.0F) + diff;g.FillEllipse(brush, x, y, size, size);g.RotateTransform(angle);}}return map;}public void Draw(){for (int j = 0; j < 8; j++){bitmap[7-j] = DrawCircle(j);}}protected override void OnResize(EventArgs e){SetNewSize();base.OnResize(e);}protected override void OnSizeChanged(EventArgs e){SetNewSize();base.OnSizeChanged(e);}private void SetNewSize(){int size = Math.Max(Width, Height);Size = new Size(size, size);}public void set(){for (int i = 0; i < 8; i++){Draw();Bitmap map = new Bitmap((bitmap[i]), new Size(120, 110));images.Add(map);pictureBox.Image = (Image)images[0];pictureBox.Size = pictureBox.Image.Size;}private void pictureBox_Click(object sender, EventArgs e) {this.Visible = false;base.Dispose();}private void Timer_Tick(object sender, EventArgs e){set();count = (count + 1) % 8;pictureBox.Image = (Image)images[count];}private void button1_Click(object sender, EventArgs e){this.Visible = false;base.Dispose();}}}4.效果如图：。

C#-WPF实现抽屉式风格主题框架源码-使⽤MaterialDesignThemes实现W。

使⽤C#-WPF实现抽屉式风格源码，应⽤MaterialDesignThemes实现炫酷漂亮的界⾯效果1.使⽤Nuget安装MaterialDesignThemes2.在App.xaml的<Application.Resources>中的添加以下代码<ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/><ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/><ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/><ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary>3.界⾯中添加以下代码<Window.Resources><Storyboard x:Key="MenuOpen"><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu"><EasingDoubleKeyFrame KeyTime="0" Value="60"/><EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/></DoubleAnimationUsingKeyFrames></Storyboard><Storyboard x:Key="MenuClose"><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu"><EasingDoubleKeyFrame KeyTime="0" Value="200"/><EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/></DoubleAnimationUsingKeyFrames></Storyboard></Window.Resources><Window.Triggers><EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu"><BeginStoryboard Storyboard="{StaticResource MenuOpen}"/></EventTrigger><EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu"><BeginStoryboard Storyboard="{StaticResource MenuClose}"/></EventTrigger></Window.Triggers><Grid Background="LightGray"><Grid x:Name="GridTitle" Height="50" VerticalAlignment="Top" Background="#FF1368BD" MouseDown="GridTitle_MouseDown" Margin="60,0,0,0"><TextBlock Text="智慧⼯程管理监控系统" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" Foreground="White"/><StackPanel VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right"><TextBlock Text="欢迎使⽤" VerticalAlignment="Center" FontSize="14" Foreground="White"/><materialDesign:PopupBox Foreground="White" Margin="10" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False"><StackPanel Width="150"><Button Content="账号"/><Button Content="设置"/><Button Content="帮助"/><Separator/><Button Content="最⼩化"/><Button Content="最⼤化"/><Button x:Name="ButtonPopUpLogout" Content="退出" Click="ButtonPopUpLogout_Click"/></StackPanel></materialDesign:PopupBox></StackPanel></Grid><Grid x:Name="gdMian" Background="White" MouseDown="GridTitle_MouseDown" Margin="60,50,0,0"></Grid><Grid x:Name="GridMenu" Width="60" HorizontalAlignment="Left" Background="#FF1B3861" Margin="0" SizeChanged="GridMenu_SizeChanged"><StackPanel><Grid Background="#FF1368BD"><Button x:Name="ButtonCloseMenu" Width="60" Height="50" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="Collapsed" Click="ButtonCloseMenu_Click"<materialDesign:PackIcon Kind="ArrowLeft" Foreground="#FF1B3861" Width="25" Height="25"/></Button><Button x:Name="ButtonOpenMenu" Width="60" Height="50" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Click="ButtonOpenMenu_Click"><materialDesign:PackIcon Kind="Menu" Foreground="#FF1B3861" Width="25" Height="25"/></Button></Grid><ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Foreground="#FF1368BD"><ListViewItem Height="60" MouseLeftButtonUp="ListViewItem_MouseLeftButtonUp"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="ViewDashboard" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/><TextBlock Text="⾸页" VerticalAlignment="Center" Margin="20 10" Foreground="White"/></StackPanel></ListViewItem><ListViewItem Height="60" MouseLeftButtonUp="ListViewItem_MouseLeftButtonUp"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="Pencil" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/><TextBlock Text="设备管理" VerticalAlignment="Center" Margin="20 10" Foreground="White"/></StackPanel></ListViewItem><ListViewItem Height="60" MouseLeftButtonUp="ListViewItem_MouseLeftButtonUp"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="Ticket" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/><TextBlock Text="策略模式" VerticalAlignment="Center" Margin="20 10" Foreground="White"/></StackPanel></ListViewItem><ListViewItem Height="60" MouseLeftButtonUp="ListViewItem_MouseLeftButtonUp"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="Message" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/><TextBlock Text="数据统计" VerticalAlignment="Center" Margin="20 10" Foreground="White"/></StackPanel></ListViewItem><ListViewItem Height="60" MouseLeftButtonUp="ListViewItem_MouseLeftButtonUp"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="Account" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/><TextBlock Text="个⼈中⼼" VerticalAlignment="Center" Margin="20 10" Foreground="White"/></StackPanel></ListViewItem></ListView></StackPanel></Grid></Grid>4.在代码中添加事件定义代码private void ButtonPopUpLogout_Click(object sender, RoutedEventArgs e){Application.Current.Shutdown();}private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e){ButtonOpenMenu.Visibility = Visibility.Collapsed;ButtonCloseMenu.Visibility = Visibility.Visible;}private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e){ButtonOpenMenu.Visibility = Visibility.Visible;ButtonCloseMenu.Visibility = Visibility.Collapsed;}private void GridTitle_MouseDown(object sender, MouseButtonEventArgs e){DragMove();}private void GridMenu_SizeChanged(object sender, SizeChangedEventArgs e){gdMian.Margin = new Thickness(e.NewSize.Width, 50, 0, 0);}private void ListViewItem_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) {}。

最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单.1.最重要的就是每个子项的顺序填充,我是把界面看做N列,然后在每列里依次加载子项.最后结果就是,界面放一个Uniform,设置Columns,再添加几个ItemsControl.2.添加Item的时候,判断每个ItemsControl的实际高度,把子项添加到最小的那个ItemsControl,这样避免了某一列拉得很长.3.再做一层封装,就变成了一个支持Binding的WaterfallControl.这里上几段控件的源码,供参考:1.WaterfallControl.cs1 [TemplatePart(Name = "grdRoot", Type = typeof(UniformGrid))]2public class WaterfallControl : ItemsControl3{4private UniformGrid grdRoot;56private List<ItemsControl> itemsContorls;78public int Columns9{10get { return (int)GetValue(ColumnsProperty); }11set { SetValue(ColumnsProperty, value); }12}1314// Using a DependencyProperty as the backing store for Columns. This enables animation, styling, binding, etc...15public static readonly DependencyProperty ColumnsProperty =16DependencyProperty.Register("Columns", typeof(int), typeof(WaterfallControl), new PropertyMetadata(3, OnColumnsChanged));1718private static void OnColumnsChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)19{20int columns = (int)e.NewValue;21if (columns < 1)22{23throw new ArgumentOutOfRangeException("Columns"); 24}25var control = sender as WaterfallControl;26control.Columns = columns;27control.InitPanel();28}2930public WaterfallControl()31{32this.Loaded += WaterfallControl_Loaded;33this.itemsContorls = new List<ItemsControl>();34}3536void WaterfallControl_Loaded(object sender, RoutedEventArgs e) 37{38this.InitPanel();39}4041private void InitPanel()42{43if (!this.IsLoaded)44{45return;46}4748grdRoot.Children.Clear();49itemsContorls.Clear();50for (var i = 0; i < this.Columns; i++)51{52var ic = new ItemsControl();53ic.ItemTemplate = this.ItemTemplate;54ic.VerticalAlignment =System.Windows.VerticalAlignment.Top;55grdRoot.Children.Add(ic);56itemsContorls.Add(ic);57}5859if (this.ItemsSource != null)60{61var enumerator = this.ItemsSource.GetEnumerator();62while (enumerator.MoveNext())63{64this.AddChild(enumerator.Current);65}66}67}6869public override void OnApplyTemplate()70{71base.OnApplyTemplate();72grdRoot = (UniformGrid)this.GetTemplateChild("grdRoot"); 73}7475protected override void AddChild(object value)76{77var ic = itemsContorls.OrderBy(t =>t.ActualHeight).FirstOrDefault();78ic.Items.Add(value);79ic.UpdateLayout();80}8182protected override voidOnItemsChanged(System.Collections.Specialized.NotifyCollectionChangedEventArg s e)83{84if (e.Action == NotifyCollectionChangedAction.Add || e.Action == NotifyCollectionChangedAction.Remove)85{86var enumerator = e.NewItems.GetEnumerator();87while (enumerator.MoveNext())88{89if (e.Action == NotifyCollectionChangedAction.Add) 90{91this.AddChild(enumerator.Current);92}93else94{95foreach (var ic in this.itemsContorls)96{97ic.Items.Remove(enumerator.Current);98}99}100}101}102}103}2.WaterfallControl的样式<Style TargetType="controls:WaterfallControl"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="controls:WaterfallControl"><ScrollViewerHorizontalScrollBarVisibility="{TemplateBindingScrollViewer.HorizontalScrollBarVisibility}"VerticalScrollBarVisibility="{TemplateBindingScrollViewer.VerticalScrollBarVisibility}"><UniformGrid Name="grdRoot"Columns="{TemplateBinding Columns}"></UniformGrid></ScrollViewer></ControlTemplate></Setter.Value></Setter></Style>3.调用WaterfallControl继承自ItemsControl,所以和ItemsControl的使用没有区别,只需要额外指定一个Columns即可.可能遇到的问题:1.遇到图片不能直接计算高度,可能导致某列很长.可以用扩展属性给图片指定一个初始占位高度.2.遇到界面大小变化,列数是不是应该动态变化,这个要实现也简单,监视下Window.SizeChanged,然后改变Columns就行了.3.我直接把ScrollViewer放到WaterfallControl的模板里了,建议抽出来,监视下滚动事件,实现滚动到底加载数据.4.不知道是否有更简单明了的方法.WPF制作的小型笔记本-仿有道云笔记楼主所在的公司不允许下载外部资源, 不允许私自安装应用程序, 平时记录东西都是用记事本,时间久了很难找到以前记的东西. 平时在家都用有道笔记, 因此就模仿着做了一个, 先看下实际运行图片:1. 初始化的时候2.添加了些笔记3. 添加笔记本窗口4.改了模板,做的一个还算好看的菜单5.日记列表可以选择不同的视图, 比如我改成了简单列表视图6.模仿云笔记做的历史版本功能,只能看,还没做还原和对比功能7.日记可以导出成不同格式,这个东西真心没用8.顶部也有个菜单谈下这个小东西:1. 程序采用WPF+MVVM实现, 修改了大部分控件的Template, 以达到高仿的目的. 同时, 也得感谢有道在安装目录下有一套图片资源,可以原封不动的搬过来美化界面.2. 实现了笔记本的增删改, 笔记的增删改. 笔记的查询只实现了关键字查询.3. 自己做了一些有意思的控件, 比如一个LoadingButton, 在Loading的时候会转个圈圈, 后台处理完毕后隐藏. 还做了一个文本编辑框, 其实有道的编辑框相当漂亮,但是没有放出按钮图片,我只有网上淘了些山寨的图片, 而且有些功能就没去实现,比如添加表格添加超链接什么的,我自己都不知道这个能干嘛用.4. 采用SQLite数据库把所有数据保存到了本地, 我自己也有虚拟主机, 本来想顺便公布一套WEB API实现真正的云笔记, 但是现在的客户端设计怕是要经过大改才能实现, 这个想到就头痛.5. 历史版本功能本来是可以继续做下去的, 比如还原到某一版本这个功能就很好做. 但是有道有个对比不同文本的功能,这个就像源码管理工具那样,我不知道该怎么整了.6. 本来想实现插入图片的, 但是有两个问题, 第一就是我们公司没有截图程序, 我用不上, 第二就是这里的图片只能保存到RTF, 加载时会写入内存, 数据量大或者图片大了会影响性能.7. 本来也想实现插入文件的, 这个对我很有用, 不过还没想好UI怎么画, 一直就没做.8. 编辑框输入很卡, 还没去研究什么原因.9. 微软的个人版TFS相当不错, 我在不能用U盘的情况下, 家里和办公室都可以开发.最后, 实在是觉得很遗憾,一个项目我可以兴冲冲的很快完成70%的代码,但是剩下的30%就实在太折磨人了. 现在一打开VS就犯困, 实在是没法把剩下的东西全部实现完. 这个笔记目前在公司运行良好, 我需要的功能几乎都有, 也就不打算再继续下去了. 在此放出源代码, 供有兴趣的同学研究下控件样式, MVVM, Prism, 依赖注入等WPF里面常见的问题.。

wpf常用控件和使用方法WPF（Windows Presentation Foundation）是微软开发的用于创建用户界面的框架。

它提供了丰富的控件库，可以用来构建各种功能强大、美观的应用程序。

下面介绍一些常用的WPF控件及其使用方法。

1. Button（按钮）按钮是WPF应用程序中最常用的控件之一、它用于触发事件或执行命令。

使用Button控件可以通过设置Content属性来显示文本或图像。

示例代码：```xaml<Button Content="Click Me" Click="Button_Click"/>```在代码中，我们设置了按钮的Content属性为“Click Me”，并订阅了按钮的Click事件。

在代码中定义事件处理程序：```csharpprivate void Button_Click(object sender, RoutedEventArgs e) //处理点击按钮的逻辑```2. TextBox（文本框）文本框用于输入和显示文本信息。

可以通过设置Text属性来设置文本框中的文本内容。

示例代码：```xaml<TextBox Text="Hello World"/>```示例代码：```xaml<TextBox Text="Hello World" IsReadOnly="True"/>```可以通过订阅TextChanged事件来捕获用户输入的文本变化。

示例代码：```xaml```4. ListBox（列表框）列表框用于显示一组项目的列表。

可以通过设置ItemsSource属性来设置数据源，通过设置ItemTemplate属性来设置项目的显示方式。

示例代码：```xaml<ListBox><ListBoxItem>Item 1</ListBoxItem><ListBoxItem>Item 2</ListBoxItem><ListBoxItem>Item 3</ListBoxItem></ListBox>```可以使用数据绑定的方式来动态设置列表框的数据源。

WPF实现炫酷Loading控件WPF是一个用于创建Windows桌面应用程序的框架，它提供了丰富的用户界面控件和功能。

在WPF中实现一个炫酷的Loading控件可以为应用程序增添一些动感和交互性。

下面我会介绍一个简单的实现方式，通过使用WPF动画和样式来创建一个漂亮的Loading控件。

```markup<UserControl x:Class="YourNamespace.CircularLoading"mc:Ignorable="d"d:DesignHeight="300" d:DesignWidth="300"><Grid><Ellipse x:Name="circle" Width="100" Height="100" StrokeThickness="10" Stroke="#FF007ACC"><Ellipse.RenderTransform><RotateTransform x:Name="rotate" CenterX="50" CenterY="50"/> </Ellipse.RenderTransform><Ellipse.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard RepeatBehavior="Forever"><DoubleAnimationStoryboard.TargetProperty="(Ellipse.RenderTransform).(RotateTran sform.Angle)" From="0" To="360" Duration="0:0:1"/></Storyboard></BeginStoryboard></EventTrigger></Ellipse.Triggers></Ellipse><Label Content="Loading..." HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,120,0,0" FontSize="20" FontWeight="Bold"/></Grid></UserControl>```接下来，我们可以在应用程序中使用这个Loading控件，例如在一个MainWindow中的Grid中添加一个Loading控件。

前端开发实训案例利用CSS动制作一个炫酷的Loading效果前端开发实训案例：利用CSS动画制作一个炫酷的Loading效果在前端开发的实训中，为了提升用户体验，我们常常需要使用一些动效来增加页面的吸引力。

本文将介绍一种利用CSS动画制作一个炫酷的Loading效果的实例。

1. 准备工作首先，我们需要在HTML文件中创建一个占位符用来展示Loading 效果。

可以使用div元素，并给予一个合适的id，比如"loading"。

```html<div id="loading"></div>```2. CSS动画的制作接下来，我们要利用CSS来为这个占位符添加动画效果。

可以通过@keyframes关键字定义一个动画，并将它应用在该元素上。

```css#loading {width: 50px;height: 50px;border: 5px solid #fff;border-top-color: #000;border-radius: 50%;animation: spin 1s infinite linear;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}```在上面的代码中，我们为#loading元素设置了宽度、高度、边框、边框颜色和边框圆角属性。

然后通过animation属性，将spin动画应用在该元素上。

spin动画会使该元素以线性动画方式无限旋转。

3. 更多效果的实现上述的示例只是一个简单的旋转效果，我们还可以通过修改相关属性和增加新的关键帧，来实现更多复杂的Loading效果。

以下是一个带有颜色变化和大小变化的实例：```css#loading {width: 50px;height: 50px;border: 5px solid #fff;border-radius: 50%;animation: spin 1s infinite linear, color 2s infinite alternate;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes color {0% {background-color: red;transform: scale(1);}50% {background-color: blue;transform: scale(1.5);}100% {background-color: green;transform: scale(1);}}```在这个示例中，我们为#loading元素添加了一个新的keyframes动画color。

使用CSS3 实现超炫的Loading（加载）动画效果
SpinKit 是一套网页动画效果，包含8种基于CSS3实现的很炫的加载动画。

借助CSS3 Animation 的强大功能来创建平滑，易于定制的动画。

SpinKit 的目标不是提供一个每个浏览器都兼容的解决方案，而是给现代浏览器提供更优的技术实现方案和更佳的使用体验。

（为保证最佳的效果，请在Chrome、Firefox 和Safari 等现代浏览器中浏览）
Loading 动画效果一
HTML 代码：
CSS 代码：
Loading 动画效果二HTML 代码：
CSS 代码：
Loading 动画效果三HTML 代码：
CSS 代码：
Loading 动画效果四 HTML 代码：
CSS 代码：
Loading 动画效果五 HTML 代码：
CSS 代码：
Loading 动画效果六 HTML 代码：
CSS 代码：
Loading 动画效果七HTML 代码：
CSS 代码：
Loading 动画效果八HTML 代码：
CSS 代码：
+ View Code?。