WPF之ProgressBar控件详解

文章目录

    • 1. ProgressBar控件简介
    • 2. ProgressBar的基本属性和用法
      • 2.1 基本属性
      • 2.2 基本用法
      • 2.3 代码中修改进度
    • 3. 确定与不确定模式
      • 3.1 确定模式(Determinate)
      • 3.2 不确定模式(Indeterminate)
    • 4. 在多线程环境中更新ProgressBar
      • 4.1 使用Dispatcher
      • 4.2 使用BackgroundWorker
      • 4.3 使用Task和Progress<T>
    • 5. 自定义ProgressBar外观样式
      • 5.1 基本样式设置
      • 5.2 使用样式资源
      • 5.3 带文本的进度条
      • 5.4 动画效果
    • 6. 使用MVVM模式与ProgressBar
      • 6.1 ViewModel示例
      • 6.2 XAML绑定
    • 7. 实际应用案例
      • 7.1 文件下载进度条
      • 7.2 批量处理进度显示
      • 7.3 带动画的加载指示器
    • 8. 最佳实践
      • 8.1 性能考虑
      • 8.2 用户体验提示
    • 9. 总结
    • 10. 学习资源

可以根据Github拉取示例程序运行
GitHub程序演示地址(点击直达)
也可以在本文资源中下载
在这里插入图片描述

1. ProgressBar控件简介

ProgressBar(进度条)是WPF中常用的用户界面控件,主要用于向用户展示操作的进度或者任务的完成情况。无论是文件下载、数据处理、长时间的计算操作,还是需要让用户了解当前进度的任何场景,ProgressBar都是理想的选择。

WPF中的ProgressBar控件提供了丰富的功能和高度的可定制性,它可以:

  • 显示确定性进度(具体的百分比进度)
  • 显示不确定性进度(无法预估完成时间的操作)
  • 通过样式和模板完全自定义外观
  • 支持动画和视觉效果
  • 与MVVM模式无缝集成

本文将详细介绍ProgressBar控件的基本属性、使用方法、自定义样式以及在实际项目中的应用技巧。

2. ProgressBar的基本属性和用法

2.1 基本属性

ProgressBar控件继承自RangeBase类,因此拥有以下重要属性:

属性名类型描述
Minimumdouble进度条的最小值,默认为0
Maximumdouble进度条的最大值,默认为100
Valuedouble当前进度值
IsIndeterminatebool是否为不确定模式,默认为false
OrientationOrientation进度条的方向(水平或垂直)
ForegroundBrush进度条填充颜色
BackgroundBrush进度条背景颜色

2.2 基本用法

下面是一个简单的ProgressBar控件XAML示例:

<ProgressBar Width="200" Height="20" Minimum="0" Maximum="100" Value="75" Foreground="Green"/>

这段代码创建了一个宽度为200,高度为20的进度条,最小值为0,最大值为100,当前值为75,填充颜色为绿色。

2.3 代码中修改进度

在C#代码中,可以通过设置Value属性来更新进度条的进度:

// 将进度设置为指定值
progressBar.Value = 50;// 增加进度值
progressBar.Value += 10;// 检查是否完成
if (progressBar.Value >= progressBar.Maximum)
{// 处理完成逻辑
}

3. 确定与不确定模式

ProgressBar控件有两种工作模式:确定模式和不确定模式。

3.1 确定模式(Determinate)

当您知道任务的总量并能够计算出完成百分比时,应该使用确定模式。在这种模式下,进度条会显示完成的比例。

<ProgressBar Width="200" Height="20" Minimum="0" Maximum="100" Value="45" IsIndeterminate="False"/>

3.2 不确定模式(Indeterminate)

当无法估计任务的完成时间或无法计算进度百分比时,应该使用不确定模式。在这种模式下,进度条会显示一个动画,表示任务正在进行中,但没有具体的完成百分比。

<ProgressBar Width="200" Height="20" IsIndeterminate="True"/>

不确定模式下的进度条会显示一个来回移动的动画,让用户知道程序正在工作,但不显示具体的完成进度。

4. 在多线程环境中更新ProgressBar

在WPF应用程序中,UI元素(包括ProgressBar)只能在创建它们的线程上更新。当在后台线程执行长时间运行的任务时,需要使用特殊方法来更新UI上的ProgressBar。

4.1 使用Dispatcher

// 假设在后台线程中执行任务
void WorkerMethod()
{for (int i = 0; i <= 100; i++){// 通过Dispatcher更新UIDispatcher.Invoke(() =>{progressBar.Value = i;});// 模拟工作Thread.Sleep(100);}
}

4.2 使用BackgroundWorker

BackgroundWorker是一个更便捷的方式来实现后台处理并更新UI:

private void StartProcess()
{BackgroundWorker worker = new BackgroundWorker();worker.WorkerReportsProgress = true;worker.DoWork += Worker_DoWork;worker.ProgressChanged += Worker_ProgressChanged;worker.RunWorkerCompleted += Worker_RunWorkerCompleted;worker.RunWorkerAsync();
}private void Worker_DoWork(object sender, DoWorkEventArgs e)
{for (int i = 0; i <= 100; i++){// 执行耗时操作Thread.Sleep(100);// 报告进度(sender as BackgroundWorker).ReportProgress(i);}
}private void Worker_ProgressChanged(object sender, ProgressChangedEventArgs e)
{// 更新进度条progressBar.Value = e.ProgressPercentage;
}private void Worker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{// 处理完成后的逻辑MessageBox.Show("处理完成!");
}

4.3 使用Task和Progress

在现代WPF应用程序中,推荐使用Task和IProgress来实现后台处理和进度报告:

private async void StartProcessAsync()
{// 创建进度报告器var progress = new Progress<int>(value => {progressBar.Value = value;});// 异步执行任务await Task.Run(() => ProcessDataWithProgress(progress));MessageBox.Show("处理完成!");
}private void ProcessDataWithProgress(IProgress<int> progress)
{for (int i = 0; i <= 100; i++){// 执行耗时操作Thread.Sleep(100);// 报告进度progress.Report(i);}
}

5. 自定义ProgressBar外观样式

WPF的强大之处在于它提供了丰富的样式和模板定制能力,ProgressBar控件同样可以完全自定义外观。

5.1 基本样式设置

<ProgressBar Width="200" Height="20" Value="75"><ProgressBar.Foreground><LinearGradientBrush StartPoint="0,0" EndPoint="1,0"><GradientStop Color="LightBlue" Offset="0"/><GradientStop Color="Blue" Offset="1"/></LinearGradientBrush></ProgressBar.Foreground><ProgressBar.Background><SolidColorBrush Color="LightGray"/></ProgressBar.Background>
</ProgressBar>

5.2 使用样式资源

<Window.Resources><Style x:Key="CustomProgressBar" TargetType="ProgressBar"><Setter Property="Foreground" Value="Orange"/><Setter Property="Background" Value="#EEEEEE"/><Setter Property="Height" Value="10"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ProgressBar"><Grid><Border Background="{TemplateBinding Background}"BorderBrush="Gray"BorderThickness="1"CornerRadius="5"/><Border x:Name="PART_Indicator"Background="{TemplateBinding Foreground}"BorderBrush="DarkOrange"BorderThickness="1"CornerRadius="5"HorizontalAlignment="Left"/></Grid></ControlTemplate></Setter.Value></Setter></Style>
</Window.Resources><!-- 使用自定义样式 -->
<ProgressBar Width="200" Value="75" Style="{StaticResource CustomProgressBar}"/>

5.3 带文本的进度条

WPF的ProgressBar默认不显示文本,但我们可以通过叠加控件来实现带有文本显示的进度条:

<Grid><ProgressBar x:Name="progressBar" Width="200" Height="25" Value="45"/><TextBlock Text="{Binding Value, ElementName=progressBar, StringFormat={}{0:0}%}"HorizontalAlignment="Center"VerticalAlignment="Center"/>
</Grid>

5.4 动画效果

可以添加动画效果使ProgressBar更具视觉吸引力:

<Style x:Key="AnimatedProgressBar" TargetType="ProgressBar"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ProgressBar"><Grid><Border Background="{TemplateBinding Background}"BorderBrush="Gray"BorderThickness="1"CornerRadius="5"/><Border x:Name="PART_Indicator"Background="{TemplateBinding Foreground}"BorderThickness="0"CornerRadius="5"HorizontalAlignment="Left"><Border.Effect><DropShadowEffect Color="Blue" ShadowDepth="0" BlurRadius="10"/></Border.Effect></Border></Grid></ControlTemplate></Setter.Value></Setter><Style.Triggers><EventTrigger RoutedEvent="ProgressBar.ValueChanged"><BeginStoryboard><Storyboard><ColorAnimation Storyboard.TargetProperty="(Border.Effect).(DropShadowEffect.Color)"To="LightBlue" Duration="0:0:0.5" AutoReverse="True"/></Storyboard></BeginStoryboard></EventTrigger></Style.Triggers>
</Style>

6. 使用MVVM模式与ProgressBar

在MVVM(Model-View-ViewModel)架构中,ProgressBar通常绑定到ViewModel中的属性,而不是直接在代码后台操作。

6.1 ViewModel示例

public class MainViewModel : INotifyPropertyChanged
{private double _progress;public double Progress{get { return _progress; }set{if (_progress != value){_progress = value;OnPropertyChanged(nameof(Progress));}}}public ICommand StartProcessCommand { get; }public MainViewModel(){StartProcessCommand = new RelayCommand(ExecuteStartProcess);}private async void ExecuteStartProcess(){Progress = 0;for (int i = 0; i <= 100; i++){await Task.Delay(100); // 模拟工作Progress = i;}}public event PropertyChangedEventHandler PropertyChanged;protected void OnPropertyChanged(string propertyName){PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}
}

6.2 XAML绑定

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfApp"Title="ProgressBar Demo" Height="200" Width="400"><Window.DataContext><local:MainViewModel/></Window.DataContext><StackPanel Margin="20"><ProgressBar Height="20" Minimum="0" Maximum="100" Value="{Binding Progress}"/><TextBlock Text="{Binding Progress, StringFormat=进度: {0:0}%}"Margin="0,10,0,10"/><Button Content="开始处理" Command="{Binding StartProcessCommand}" Width="100" HorizontalAlignment="Left"/></StackPanel>
</Window>

7. 实际应用案例

7.1 文件下载进度条

private async void DownloadFile(string url, string destination)
{using (WebClient client = new WebClient()){client.DownloadProgressChanged += (sender, e) =>{progressBar.Value = e.ProgressPercentage;statusText.Text = $"下载进度: {e.ProgressPercentage}% - 已下载 {e.BytesReceived / 1024} KB / 共 {e.TotalBytesToReceive / 1024} KB";};client.DownloadFileCompleted += (sender, e) =>{if (e.Error == null)statusText.Text = "文件下载完成!";elsestatusText.Text = $"下载出错: {e.Error.Message}";};await client.DownloadFileTaskAsync(new Uri(url), destination);}
}

7.2 批量处理进度显示

private async Task ProcessFilesAsync(string[] files)
{progressBar.Minimum = 0;progressBar.Maximum = files.Length;progressBar.Value = 0;for (int i = 0; i < files.Length; i++){statusText.Text = $"正在处理: {System.IO.Path.GetFileName(files[i])}";await Task.Run(() => ProcessSingleFile(files[i]));progressBar.Value = i + 1;}statusText.Text = "所有文件处理完成!";
}private void ProcessSingleFile(string filePath)
{// 实际的文件处理逻辑Thread.Sleep(1000); // 模拟耗时操作
}

7.3 带动画的加载指示器

<Grid><Grid.Resources><Style x:Key="FancyProgressBar" TargetType="ProgressBar"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ProgressBar"><Grid x:Name="TemplateRoot"><Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"CornerRadius="10"/><Grid x:Name="PART_Track"><Rectangle x:Name="PART_Indicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" RadiusX="10" RadiusY="10"/></Grid></Grid><ControlTemplate.Triggers><Trigger Property="IsIndeterminate" Value="true"><Setter TargetName="PART_Indicator" Property="Width" Value="30"/><Setter TargetName="PART_Indicator" Property="HorizontalAlignment" Value="Left"/><Trigger.EnterActions><BeginStoryboard><Storyboard RepeatBehavior="Forever"><DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Indicator" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"><SplineDoubleKeyFrame KeyTime="0:0:0" Value="-30"/><SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="300"/></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></Trigger.EnterActions></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Setter Property="Foreground" Value="#FF1BA1E2"/><Setter Property="Background" Value="#FFE6E6E6"/><Setter Property="BorderBrush" Value="#FFADADAD"/><Setter Property="BorderThickness" Value="1"/><Setter Property="MinHeight" Value="10"/></Style></Grid.Resources><ProgressBar Style="{StaticResource FancyProgressBar}" IsIndeterminate="True" Height="20" Width="200"/>
</Grid>

8. 最佳实践

8.1 性能考虑

  • 避免过于频繁地更新进度条,可以考虑每隔一定时间间隔更新一次
  • 在处理大量数据时,可以考虑使用批处理更新进度
  • 使用异步方法和Task而不是Thread可以更好地保持UI响应性
// 优化的进度更新
private async Task ProcessLargeDataAsync(List<DataItem> items)
{const int batchSize = 100; // 每100项更新一次进度int count = 0;foreach (var item in items){await ProcessItemAsync(item);count++;if (count % batchSize == 0 || count == items.Count){double progress = (double)count / items.Count * 100;progressBar.Value = progress;await Task.Delay(1); // 允许UI更新}}
}

8.2 用户体验提示

  • 对于预计需要较长时间的操作,提供取消选项
  • 添加文本反馈,让用户了解具体进度和剩余时间
  • 对于已完成的进度条,考虑添加成功/失败的视觉提示
private async void StartLongOperation(CancellationTokenSource cts)
{try{DateTime startTime = DateTime.Now;int totalItems = 1000;for (int i = 0; i < totalItems; i++){// 检查取消请求if (cts.Token.IsCancellationRequested){statusText.Text = "操作已取消";return;}await Task.Delay(10, cts.Token);// 更新进度和时间估计double progress = (double)(i + 1) / totalItems;progressBar.Value = progress * 100;// 计算预估剩余时间if (i > 0){TimeSpan elapsed = DateTime.Now - startTime;TimeSpan estimated = TimeSpan.FromTicks((long)(elapsed.Ticks / progress));TimeSpan remaining = estimated - elapsed;statusText.Text = $"进度: {progress:P0} - 预计剩余时间: {(int)remaining.TotalMinutes}{remaining.Seconds}秒";}}// 成功完成progressBar.Foreground = Brushes.Green;statusText.Text = "操作成功完成";}catch (OperationCanceledException){statusText.Text = "操作已取消";}catch (Exception ex){// 处理失败progressBar.Foreground = Brushes.Red;statusText.Text = $"操作失败: {ex.Message}";}
}

9. 总结

ProgressBar是WPF应用程序中非常实用的控件,它能直观地向用户展示操作进度,提高用户体验。通过本文的学习,我们了解了:

  • ProgressBar控件的基本属性和用法
  • 确定模式和不确定模式的区别和应用场景
  • 如何在多线程环境中正确更新ProgressBar
  • 自定义ProgressBar外观的多种方法
  • 在MVVM架构中使用ProgressBar的最佳实践
  • 实际应用案例和优化技巧

通过掌握ProgressBar控件的使用,您可以大幅提升WPF应用程序的用户体验,让用户清楚了解操作的进度,减少等待过程中的不确定感。

10. 学习资源

  • Microsoft WPF ProgressBar官方文档
  • ProgressBar样式和模板指南
  • WPF多线程编程指南
  • WPF社区资源

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/903816.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IntelliJ IDEA 保姆级安装教程(附安装包)

文章目录 一、下载二、安装三、启动 一、下载 Ultimate 2021.1.1 - Windows x64 (exe) 二、安装 三、启动 首次安装启动 非首次安装启动

Performance API 性能上报

以下是关于 Performance API 性能上报的基本知识点总结: 一、性能监控核心指标体系 1. 关键性能指标(Web Vitals) 指标标准采集方式健康阈值LCP (最大内容绘制)测量加载性能PerformanceObserver≤2.5sFID (首次输入延迟)测量交互响应PerformanceObserver≤100msCLS (累积布…

C语言-指针(一)

目录 指针 内存 概念 指针变量 取地址操作符&#xff08;&&#xff09; 操作符“ * ” 指针变量的大小 注意 指针类型的意义 作用 void * 指针 const修饰指针变量 const放在*前 const放在*后 双重const修饰 指针的运算 1.指针 - 整数 2.指针 - 指针 3.指…

华为云Astro大屏连接器创建操作实例:抽取物联网iotda影子设备数据的连接器创建

目录 样图(API连接器创建成功) 说明 操作场景(以Astro大屏抽取iotda影子参数为例) 实际操作步骤 新建连接器 设置基本信息。 接口鉴权方式,支持API鉴权、AK/SK、API Key和无身份验证 无身份验证 AK/SK认证(目前暂不能用) API Key认证(第三方使用) API鉴权认…

【硬件系统架构】哈佛架构

一、引言 在计算机科学的浩瀚宇宙中&#xff0c;计算机体系结构犹如星辰般繁多且各有独特光芒。哈佛架构便是其中一颗耀眼的明星&#xff0c;它在众多计算机体系结构中占据着独特而重要的地位。从计算机技术的萌芽期一路走来&#xff0c;哈佛架构不断发展演变&#xff0c;在不同…

华为eNSP:IS-IS认证

一、什么是IS-IS认证&#xff1f; 华为eNSP中的IS-IS认证 IS-IS认证是华为eNSP网络中用于保障中间系统到中间系统&#xff08;IS-IS&#xff09;协议通信安全性的核心机制&#xff0c;通过身份验证和数据完整性校验防止非法路由信息注入或篡改。其实现方式与关键特性如下&…

如何创建并使用极狐GitLab 项目访问令牌?

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;关于中文参考文档和资料有&#xff1a; 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网 项目访问令牌 在极狐GitLab 16.1中引入添加了默认前缀。 项目访问令牌类似于密码&#xff0c;但你可以 限制访问资源&#xf…

C# 异步详解

C# 异步编程详解 一、异步编程基础概念 1. 同步 vs 异步 ​​同步(Synchronous)​​&#xff1a;任务按顺序执行&#xff0c;前一个任务完成后才会执行下一个​​异步(Asynchronous)​​&#xff1a;任务可以非阻塞地启动&#xff0c;主线程可以继续执行其他操作 2. 异步编…

C++ 之 【模拟实现 list(节点、迭代器、常见接口)】(将三个模板放在同一个命名空间就实现 list 啦)

1.前提准备 (1) list 的底层结构一般是带头双向循环链表 (1)为避免命名冲突&#xff0c;需要创建一个命名空间来存放模拟实现的 list (2)下面模拟实现list时&#xff0c;声明和定义不分离(具体原因后续讲解) 2.完整实现 2.1 链表节点 template<class T>//节点写成类模板…

解决Win10虚拟机“网络连接不上”,“Ethernet0 网络电缆被拔出”的问题

一、情景引入 今天用Win10虚拟机打开浏览器发现&#xff1a; 很奇怪&#xff0c;平常都没有这个问题。 二、检查网络状态 点击更改适配器选项&#xff0c;发现如下&#xff1a; 三、解决问题 打开任务管理器&#xff0c;点击服务&#xff0c;搜索栏搜索&#xff1a;VM …

2025蓝桥杯省赛网络安全组wp

文章目录 黑客密室逃脱ezEvtxflowzipEnigma星际xml解析器EBC-TrainAES-CBC 黑客密室逃脱 提示猜文件名&#xff0c;猜几个常见的&#xff0c;app.py读到源码 这里也是脑抽了一下&#xff0c;把密钥看成1236了。。。卡了五分钟左右&#xff0c;解出来的时候已经降到300多分了&a…

算法查找目录

1. 基础数据结构 数组与链表 动态数组 实现与自动扩容机制均摊分析ArrayList/Vector实现 单向链表 基本操作(插入、删除、查找)链表反转环检测(Floyd判圈算法) 双向链表 插入删除操作优化双向遍历优势边界情况处理 循环链表 约瑟夫环问题单向循环链表双向循环链表 跳表 基本原…

Windows11 管理员用户下无权限操作的解决方法

问题 Program Files 目录下无权限进行写入操作。 Windows 各种功能因权限不足无法访问。 启动某些应用程序时&#xff0c;可能会遇到 用户账户控制 (UAC, User Account Control) 弹窗提示&#xff0c;要求确认是否允许该程序对设备进行更改。 等等问题 解决方法 运行 p…

.NET中,const和readonly区别

在.NET中&#xff0c;const和readonly都用于定义不可变的值&#xff0c;但它们在行为和使用场景上有显著区别。以下是两者的详细对比&#xff1a; 初始化时机 • const ◦ 编译时常量&#xff0c;必须在声明时赋值。 ◦ 值在编译时确定&#xff0c;并被直接嵌入到IL代码中&…

邮件分类特征维度实验分析

活动发起人小虚竹 想对你说&#xff1a; 这是一个以写作博客为目的的创作活动&#xff0c;旨在鼓励大学生博主们挖掘自己的创作潜能&#xff0c;展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴&#xff0c;那么&#xff0c;快来参加吧&#xff01…

数字智慧方案6158丨智慧医疗解决方案精华版(58页PPT)(文末有下载方式)

数字智慧方案6158丨智慧医疗解决方案精华版 详细资料请看本解读文章的最后内容。 引言 随着信息技术的飞速发展&#xff0c;智慧医疗已成为现代医疗体系的重要组成部分。本文将对《数字智慧方案6158丨智慧医疗解决方案精华版》进行详细解读&#xff0c;探讨如何通过先进的技…

Fiori学习专题二十三: Filtering

这节课我们将针对list增加一个筛选功能。 1.首先改造下InvoiceList.view.xml&#xff0c;加入id方便找到它以及标签 <mvc:ViewcontrollerName"ui5.walkthrough.controller.InvoiceList"xmlns"sap.m"xmlns:core"sap.ui.core"xmlns:mvc"s…

大语言模型 05 运行、微调的显存计算详解与优化 全量微调、LoRA 优化策略

写在前面 随着Transformer架构的大语言模型&#xff08;LLM&#xff09;不断发展&#xff0c;其参数规模也在迅速增加。无论是进行模型推理还是微调训练&#xff0c;GPU显存消耗都是开发和应用LLM时的重要考量。本文将详细探讨大模型运行&#xff08;推理&#xff09;与微调时…

对Electron打包的exe文件进行反解析

一、了解 Electron 打包的 exe&#xff0c;本质上就是打包了网页 (HTMLCSSJS)&#xff0c;核心文件是 app.asar。超级容易还原&#xff0c;还原率接近 100% 为什么 Electron 特别容易&#xff1f; 因为 Electron 根本没有真正编译成机器码&#xff0c;它只是把网页资源&…

【Vue2】1-创建一个Vue实例

Vue2官方文档 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head&g…