WPF 用户控件Loading（加载）样式

最新推荐文章于 2024-06-05 23:35:32 发布
最新推荐文章于 2024-06-05 23:35:32 发布
阅读量1.7k 收藏 4
点赞数
分类专栏： WPF
原文链接：https://blog.csdn.net/lhx527099095/article/details/8005095
版权

WPF 用户控件Loading（加载）样式

一、第一种样式
首先添加一个用户控件：usercontrol

<UserControl x:Class="WpfApp2.LoadingControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:WpfApp2"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800" IsVisibleChanged="HandleVisibleChanged">
    <UserControl.Background>
        <SolidColorBrush Color="Black" Opacity="0.2"  />
    </UserControl.Background>
    <UserControl.Resources>
        <SolidColorBrush Color="#FF007BE5" x:Key="CirclesColor" />
        <!--<SolidColorBrush Color="Black" x:Key="BackgroundColor" Opacity=".20" />-->
    </UserControl.Resources>

    <Viewbox Width="100" Height="100"  
            HorizontalAlignment="Center"  
            VerticalAlignment="Center">
        <Grid x:Name="LayoutRoot"   
                Background="Transparent"  
                ToolTip="Please wait...."  
                HorizontalAlignment="Center"  
                VerticalAlignment="Center">
            <TextBlock Text="Loading..."  HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="14" Foreground="#FFE3953D" FontWeight="Bold" />
            <Canvas RenderTransformOrigin="0.5,0.5"  
                    HorizontalAlignment="Center"  
                    VerticalAlignment="Center" Width="120"  
                    Height="120" Loaded="HandleLoaded"  
                    Unloaded="HandleUnloaded"  >
                <Ellipse x:Name="C0" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="1.0"/>
                <Ellipse x:Name="C1" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.9"/>
                <Ellipse x:Name="C2" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.8"/>
                <Ellipse x:Name="C3" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.7"/>
                <Ellipse x:Name="C4" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.6"/>
                <Ellipse x:Name="C5" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.5"/>
                <Ellipse x:Name="C6" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.4"/>
                <Ellipse x:Name="C7" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.3"/>
                <Ellipse x:Name="C8" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.2"/>
                <Canvas.RenderTransform>
                    <RotateTransform x:Name="SpinnerRotate"  
                         Angle="0" />
                </Canvas.RenderTransform>
            </Canvas>
        </Grid>
    </Viewbox>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace WpfApp2
{
    /// <summary>
    /// LoadingControl.xaml 的交互逻辑
    /// </summary>
    public partial class LoadingControl : UserControl
    {
        private readonly DispatcherTimer animationTimer;

        public LoadingControl()
        {
            InitializeComponent();

            animationTimer = new DispatcherTimer(
                DispatcherPriority.ContextIdle, Dispatcher);
            animationTimer.Interval = new TimeSpan(0, 0, 0, 0, 90);
        }

        private void Start()
        {
            animationTimer.Tick += HandleAnimationTick;
            animationTimer.Start();
        }

        private void Stop()
        {
            animationTimer.Stop();
            animationTimer.Tick -= HandleAnimationTick;
        }

        private void HandleAnimationTick(object sender, EventArgs e)
        {
            SpinnerRotate.Angle = (SpinnerRotate.Angle + 36) % 360;
        }

        private void HandleLoaded(object sender, RoutedEventArgs e)
        {
            const double offset = Math.PI;
            const double step = Math.PI * 2 / 10.0;

            SetPosition(C0, offset, 0.0, step);
            SetPosition(C1, offset, 1.0, step);
            SetPosition(C2, offset, 2.0, step);
            SetPosition(C3, offset, 3.0, step);
            SetPosition(C4, offset, 4.0, step);
            SetPosition(C5, offset, 5.0, step);
            SetPosition(C6, offset, 6.0, step);
            SetPosition(C7, offset, 7.0, step);
            SetPosition(C8, offset, 8.0, step);
        }

        private void SetPosition(Ellipse ellipse, double offset,
            double posOffSet, double step)
        {
            ellipse.SetValue(Canvas.LeftProperty, 50.0
                + Math.Sin(offset + posOffSet * step) * 50.0);

            ellipse.SetValue(Canvas.TopProperty, 50
                + Math.Cos(offset + posOffSet * step) * 50.0);
        }

        private void HandleUnloaded(object sender, RoutedEventArgs e)
        {
            Stop();
        }

        private void HandleVisibleChanged(object sender,
            DependencyPropertyChangedEventArgs e)
        {
            bool isVisible = (bool)e.NewValue;

            if (isVisible)
                Start();
            else
                Stop();
        }
    }
}

主窗体引用代码：

<Window x:Class="WpfApp2.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:local="clr-namespace:WpfApp2"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
            <Button  Content="show" Width="70" Height="30" Click="ShowButton_Click" />
            <Button  Content="hide" Width="70" Height="30" Click="HideButton_Click"/>
        </StackPanel>

        <Grid Background="#FF484848" DockPanel.Dock="Bottom">
            <TextBlock Text="asdfasdfasdf" Foreground="White"/>
            <local:LoadingControl x:Name="_loading"  Visibility="Collapsed"/>
        </Grid>
    </DockPanel>
</Window>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp2
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void ShowButton_Click(object sender, RoutedEventArgs e)
        {
            this._loading.Visibility = Visibility.Visible;
        }

        private void HideButton_Click(object sender, RoutedEventArgs e)
        {
            this._loading.Visibility = Visibility.Collapsed;
        }
    }
}

效果：
在这里插入图片描述
二、第二种样式

<Grid Width="35" Height="35">
            <Grid.Resources>
                <DrawingBrush x:Key="brush" Stretch="None" AlignmentX="Center" AlignmentY="Top">
                    <DrawingBrush.Drawing>
                        <GeometryDrawing Brush="Black">
                            <GeometryDrawing.Geometry>
                                <!--<EllipseGeometry RadiusX="2" RadiusY="5"/>-->
                                <RectangleGeometry Rect="0,0,3,8"></RectangleGeometry>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Grid.Resources>

            <Rectangle x:Name="r01" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="0"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="r02" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="30"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="r03" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="60"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="r04" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="90"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="r05" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="120"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="r06" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="150"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="r07" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="180"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="r08" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="210"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="r09" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="240"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="r10" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="270"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="r11" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="300"/>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="r12" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">
                <Rectangle.RenderTransform>
                    <RotateTransform Angle="330"/>
                </Rectangle.RenderTransform>
            </Rectangle>

            <Grid.Triggers>
                <EventTrigger RoutedEvent="Grid.Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimation Storyboard.TargetName="r01" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.00000" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="r02" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.08333" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="r03" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.16666" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="r04" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.24999" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="r05" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.33332" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="r06" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.41665" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="r07" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.49998" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="r08" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.58331" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="r09" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.66664" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="r10" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.74997" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="r11" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.83330" To="0"/>
                            <DoubleAnimation Storyboard.TargetName="r12" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.91663" To="0"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Grid.Triggers>
        </Grid>

效果：
在这里插入图片描述
在这里插入图片描述

Danny_hi
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF实现Loading加载文字水波纹动画效果
dnazhd的博客
06-24 1359
实现效果如下： 思路：基本原理同博文WPF实现聚光灯动画效果一致，难点在与正弦曲线的绘制和动态效果。 步骤： 1、自定义控件UserControl的封装 添加自定义Value属性： public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(MyLoadingControl), new PropertyMet
WPF 用户控件 Loading 效果
01-24
"WPF 用户控件 Loading 效果"通常指的是设计一个自定义的用户控件，用于在界面操作正在进行时向用户显示一个动画式的加载指示。 在WPF中实现Loading效果，我们可以利用以下几个关键知识点： 1. **动画(Animation)*...
LoadingMask（WPF加载数据loading遮罩）
09-23
LoadingMask（WPF加载数据loading遮罩） 博客地址http://blog.csdn.net/lhx527099095/article/details/8005095
WPF添加加载动画遮罩
IT Tech
11-14 1040
项目中是一个主窗口里开tab页方式，如果是tab中界面加载时，动画是要遮住整个主窗口的，这样遮罩定义只能放在主窗口中，就需要在tab界面中将是否显示传递给主窗口。项目使用的是prism框架，在这使用Event Aggregation事件聚合实现。
WPF基础控件
最新发布
代码改变世界
06-05 1400
在这篇博客中，我们将探讨 WPF 中一些常用的控件，包括 TextBlock、Label、ListBox、DataGrid、ListView、ToggleButton 等。我们将介绍每个控件的作用、常用属性和事件，并提供示例代码来演示它们的用法。无论您是初学者还是有经验的 WPF 开发者，本文都将为您提供有价值的信息，帮助您更好地理解和使用这些控件。
WPF自定义控件(教程含源码)-loading 等待控件
lhyriver的博客
11-07 1027
loading 加载等待提示控件
WPF UI开发教程自定义loading等待控件
liaohaiyin的专栏
08-16 562
在项目开发过程中总会遇到一个需求：Loading...正在加载中，这样一个需求作为加载的过渡效果。 控件主要原理以半径X,Y轴进行旋转，按照时钟原理画12个点，这里的RenderTransformOrigin="0.5,0.5"表示以图片的圆心为指定变换原点，每个点旋转角度从0到360度，每次以30度递增。 在控件加载事件中取透明值依赖属性进行时间段递增显示。 先显示loading等待控件效果 WPF UI开发教程自定义loading等待控件 控件样式代码： <Style Targ
WPF：Loading等待动画、加载动画
热门推荐
pandawangyt的博客
08-21 1万+
类型1 效果 思路： 1、用8个浅灰色的圆当背景 2、4个渐变深灰色的圆，一直改变其旋转角度，表示Loading的过程 首先，定位下图圆的位置（红色线为辅助线），剩余的直接旋转角度就行。 画布长宽为100 <Canvas Width="100" Height="100"> 圆的半径是25，设计其基础的样式。因为剩余的圆是通过该圆旋转得到的，旋转的中心是上图中几条红色直线相交的那个点，不难算出RenderTransformOrigin为0.5,2，这个很关键。 <Style x:K
超炫酷的WPF实现Loading控件效果
ht_zhaoliubin的专栏
12-25 5390
这篇文章主要介绍了超炫酷的WPF实现Loading控件效果，感兴趣的小伙伴们可以参考一下 Win8系统的Loading效果还是很不错的，网上也有人用CSS3等技术实现，研究了一下，并打算用WPF自定义一个Loading控件实现类似的效果，并可以让用户对Loading的颗粒（Particle）背景颜色进行自定义，话不多说，直接上代码： 1、用VS2012新建一个WPF的用户控
WPF控件样式、模板
jixiangsichuan的博客
01-09 1935
初次写博客，新手请多指教。 写WPF已有一年有余了，平时在工作项目当中喜欢总结一些公用库，通用样式之类的，以便于日后工作中遇到，可以直接复用，提供工作效率。 本文提供 Windows、Button、SwitchButton、CheckBox、RadioButton、ComboBox、DatePicker、ProgressBar、Loading、MessageBox、ListBox、DataGr...
WPF自定义loading加载控件
08-25
"WPF自定义loading加载控件"的主题旨在教你如何构建一个显示忙碌状态或加载过程的专用控件。这个自定义控件可以提升用户体验，因为它提供了视觉反馈，让用户知道应用程序正在处理数据或执行任务。 首先，让我们理解...
wpf加载等待动画（loading）
03-17
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）应用程序中实现一个加载等待动画，也就是我们常说的“Loading”效果。WPF是.NET框架的一部分，它为开发富客户端应用提供了强大的图形用户界面...
wpf之loading加载动画
09-29
"wpf之loading加载动画" 主题主要涵盖了如何在WPF应用中实现加载或等待动画，以提供更好的用户体验。当应用程序执行耗时操作时，如加载数据或初始化界面，这样的加载动画可以向用户显示进度，让他们知道程序正在运行...
WPF 实现的Loading组件
05-19
在Windows Presentation Foundation（WPF）中，开发一个自定义的Loading组件可以极大地提升用户体验，特别是在进行后台处理或数据加载时。这个"WPF实现的Loading组件"可能包含了一个美观且可自定义的等待动画，用于...
wpf进度条，wpf等待条，wpf loading
07-27
在Windows Presentation Foundation (WPF) 中，进度条和等待条（通常称为loading指示器）是用户界面中的关键元素，它们提供了用户体验的反馈，表明应用程序正在执行后台任务或数据加载过程。这些组件对于保持用户对...
WPF Loading 效果
07-26
在Windows Presentation Foundation（WPF）中，Loading效果通常用于在应用程序执行耗时操作时向用户展示一个等待界面，以提高用户体验并告知用户程序正在处理事务。这种效果有助于避免用户在操作过程中感到不耐烦或...
WPF怎么解决控件加载缓慢的问题
06-09
WPF控件加载缓慢的问题可能是由于以下几个方面引起的： 1. 数据加载慢：如果控件需要加载大量的数据，可能会导致控件加载缓慢。可以使用异步加载或分页加载的方式来解决这个问题。 2. 控件复杂度高：控件的复杂度越高，加载所需的时间就越长。可以考虑优化控件的结构和样式，减少控件的复杂度。 3. 控件绑定方式：WPF支持多种数据绑定方式，有些绑定方式比较耗费资源，会导致控件加载缓慢。可以使用轻量级的绑定方式，如OneWay绑定，来提高控件加载速度。 4. 控件缓存：WPF控件默认启用了缓存机制，可以提高控件的性能。但是，如果控件的数据频繁变化，缓存机制可能会导致控件加载缓慢。可以禁用控件缓存或调整缓存机制的参数来解决这个问题。 5. 视觉树优化：WPF的控件加载过程中会生成视觉树，如果视觉树过于复杂，也会导致控件加载缓慢。可以使用工具分析视觉树，删除不必要的节点，优化视觉树结构来提高控件加载速度。 综上所述，可以通过优化数据加载方式、控件结构和样式、绑定方式、缓存机制和视觉树等方面来解决WPF控件加载缓慢的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值