HeBianGu.General.WpfControlLib 通用控件库
HeBianGu.General.WpfControlLib 通用控件库
HeBianGu.General.WpfControlLib 通用控件库
路径:Source/General/HeBianGu.General.WpfControlLib
这是框架的通用 UI 库,也是很多应用项目都会引用的核心库。
主要结构:
| 目录 | 作用 |
|---|---|
Custom/System |
系统控件样式,如 Button、TextBox、ComboBox、DataGrid |
Custom/Control |
自定义控件,如 Card、Dialog、Icon、WaitingBox |
Custom/User |
用户控件,如 DataPager、MetroColorPicker |
Custom/Window |
窗口基类,如 WindowBase、MainWindowBase |
Themes |
通用主题资源 |
Provider |
图标、辅助类、命令、动画辅助 |
Service |
ApplicationBase、登录 ViewModel、仓储 ViewModel 等 |
1 系统控件样式
Custom/System 中重写了大量 WPF 原生控件样式:
Button.xamlTextBox.xamlComboBox.xamlDataGrid.xamlListBox.xamlTreeView.xamlTabControl.xamlPasswordBox.xamlProgressBar.*.xaml
这意味着你使用普通 WPF 控件,也可以获得统一的框架风格。
2 自定义控件
Custom/Control 中有很多增强控件:
| 控件 | 说明 |
|---|---|
Card |
卡片容器 |
CarouselControl |
轮播控件 |
Dialog |
对话框 |
Icon |
图标控件 |
HighlightTextBlock |
高亮文本 |
ModernFrame |
现代化 Frame |
ModernProgressRing |
环形进度 |
NumericControl |
数字输入 |
ProgressButton |
带进度按钮 |
RingBox |
环形显示 |
SearchComboBox |
可搜索下拉框 |
SwitchToggleButton |
开关按钮 |
WaitingBox |
等待提示 |
WaterFallFlowControl |
瀑布流 |
WaveProgressBar |
波浪进度条 |
3 窗口基类
Custom/Window 中提供窗口基类:
WindowBaseMainWindowBaseDialogWindowBase
这让项目中的窗口拥有统一标题栏、主题、动画和窗口行为。
HeBianGu.General.WpfControlLib 通用控件库详细教程
目录
- 项目概述
- 系统控件样式(Custom/System)
- 自定义控件(Custom/Control)
- 用户控件(Custom/User)
- 窗口基类(Custom/Window)
- 主题资源(Themes)
- 服务层(Service)
- 实战应用示例
项目概述
HeBianGu.General.WpfControlLib 是框架的通用 UI 库,也是很多应用项目都会引用的核心库。它提供了丰富的控件、窗口基类和服务,让开发者能够快速构建现代化的 WPF 应用程序。
📁 项目结构
| 目录 | 作用 | 重要程度 |
|---|---|---|
Custom/System |
系统控件样式重写 | ⭐⭐⭐ |
Custom/Control |
自定义控件 | ⭐⭐⭐ |
Custom/User |
用户控件 | ⭐⭐ |
Custom/Window |
窗口基类 | ⭐⭐⭐ |
Themes |
通用主题资源 | ⭐⭐ |
Provider |
图标、辅助类、命令、动画辅助 | ⭐⭐ |
Service |
ApplicationBase、登录 ViewModel 等 | ⭐⭐⭐ |
✨ 核心特性
- 统一的视觉风格:所有控件都遵循现代设计语言
- 丰富的控件库:包含卡片、对话框、图标、进度条等多种控件
- 强大的窗口框架:提供统一的窗口基类,支持自定义标题栏、动画等
- 完善的服务层:提供应用程序基类、登录视图模型等
- 高度可定制:支持主题切换、样式覆盖等
系统控件样式
🎨 概述
Custom/System 目录重写了大量 WPF 原生控件样式,让你使用普通 WPF 控件也能获得统一的框架风格。
📝 支持的控件
| 控件 | 文件 | 说明 |
|---|---|---|
| Button | Button.xaml | 按钮样式 |
| TextBox | TextBox.xaml | 文本框样式 |
| ComboBox | ComboBox.xaml | 下拉框样式 |
| DataGrid | DataGrid.xaml | 数据表格样式 |
| ListBox | ListBox.xaml | 列表框样式 |
| TreeView | TreeView.xaml | 树形视图样式 |
| TabControl | TabControl.xaml | 选项卡样式 |
| PasswordBox | PasswordBox.xaml | 密码框样式 |
| ProgressBar | ProgressBar.*.xaml | 进度条样式(多种风格) |
| CheckBox | CheckBox.xaml | 复选框样式 |
| RadioButton | RadioButton.xaml | 单选按钮样式 |
| Slider | Slider.xaml | 滑块样式 |
| Expander | Expander.xaml | 展开控件样式 |
| Menu | Menu.xaml | 菜单样式 |
| ToolTip | ToolTip.xaml | 提示样式 |
🚀 使用方法
1. 引用主题资源
在 App.xaml 中引用控件库的主题资源:
<Application.Resources>
<ResourceDictionary Source="/HeBianGu.General.WpfControlLib;component/Themes/Generic.Default.xaml" />
</Application.Resources>
2. 使用系统控件
引用主题后,直接使用标准 WPF 控件即可获得框架风格:
<!-- 按钮 -->
<Button Content="点击我" Width="120" Height="36" />
<!-- 文本框 -->
<TextBox Text="这是文本框" Width="200" Height="30" />
<!-- 下拉框 -->
<ComboBox Width="200" Height="30">
<ComboBoxItem>选项1</ComboBoxItem>
<ComboBoxItem>选项2</ComboBoxItem>
<ComboBoxItem>选项3</ComboBoxItem>
</ComboBox>
<!-- 数据表格 -->
<DataGrid ItemsSource="{Binding Items}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="名称" Binding="{Binding Name}" />
<DataGridTextColumn Header="值" Binding="{Binding Value}" />
</DataGrid.Columns>
</DataGrid>
3. 使用不同样式变体
框架提供了多种样式变体,可以通过 Style 属性切换:
<!-- 默认样式 -->
<Button Content="默认按钮" Style="{DynamicResource {x:Static h:ButtonKeys.Default}}" />
<!-- 强调样式 -->
<Button Content="强调按钮" Style="{DynamicResource {x:Static h:ButtonKeys.Accent}}" />
<!-- 成功样式 -->
<Button Content="成功按钮" Style="{DynamicResource {x:Static h:ButtonKeys.Success}}" />
<!-- 警告样式 -->
<Button Content="警告按钮" Style="{DynamicResource {x:Static h:ButtonKeys.Warning}}" />
<!-- 危险样式 -->
<Button Content="危险按钮" Style="{DynamicResource {x:Static h:ButtonKeys.Danger}}" />
自定义控件
🎯 概述
Custom/Control 目录包含多种增强控件,为你的应用提供更丰富的 UI 功能。
📋 控件列表
| 控件 | 说明 | 适用场景 |
|---|---|---|
| Card | 卡片容器 | 展示信息卡片 |
| CarouselControl | 轮播控件 | 图片轮播、产品展示 |
| Dialog | 对话框 | 确认对话框、提示框 |
| Icon | 图标控件 | 显示图标字体 |
| HighlightTextBlock | 高亮文本 | 搜索结果高亮 |
| ModernFrame | 现代化 Frame | 页面导航 |
| ModernProgressRing | 环形进度 | 加载状态展示 |
| NumericControl | 数字输入 | 数字值输入 |
| ProgressButton | 带进度按钮 | 提交操作进度 |
| RingBox | 环形显示 | 状态指示 |
| SearchComboBox | 可搜索下拉框 | 带搜索的选择 |
| SwitchToggleButton | 开关按钮 | 开关状态切换 |
| WaitingBox | 等待提示 | 加载等待提示 |
| WaterFallFlowControl | 瀑布流 | 图片瀑布流展示 |
| WaveProgressBar | 波浪进度条 | 动态进度展示 |
🚀 详细使用示例
1. Card(卡片控件)
<!-- 基础卡片 -->
<h:Card Width="300" Height="200" Background="White">
<StackPanel>
<TextBlock Text="卡片标题" FontSize="16" FontWeight="Bold" />
<TextBlock Text="卡片内容描述..." Margin="0,5,0,0" />
</StackPanel>
</h:Card>
<!-- 自定义圆角卡片 -->
<h:Card Width="300" Height="200" UniformCornerRadius="10">
<TextBlock Text="自定义圆角" />
</h:Card>
2. Icon(图标控件)
<!-- 基础图标 -->
<h:Icon Text="\xe607" FontSize="24" Foreground="#FF0093FF" />
<!-- 配合按钮使用 -->
<Button>
<StackPanel Orientation="Horizontal">
<h:Icon Text="\xe607" Margin="0,0,5,0" />
<TextBlock Text="保存" />
</StackPanel>
</Button>
3. Dialog(对话框控件)
<!-- 基础对话框 -->
<h:Dialog x:Name="myDialog" Width="300" Height="200">
<StackPanel>
<TextBlock Text="确认删除?" FontSize="14" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,20,0,0">
<Button Content="取消" Command="h:Commander.Cancel" Margin="0,0,10,0" />
<Button Content="确定" Command="h:Commander.Sure" />
</StackPanel>
</StackPanel>
</h:Dialog>
// 在代码中显示对话框
myDialog.ShowDialog();
// 监听确认和取消事件
myDialog.Sumit += (sender, e) => { /* 确认操作 */ };
myDialog.Cancel += (sender, e) => { /* 取消操作 */ };
4. WaitingBox(等待提示)
<!-- 基础等待框 -->
<h:WaitingBox IsBusy="True" />
<!-- 自定义大小 -->
<h:WaitingBox IsBusy="True" Width="100" Height="100" />
5. ProgressButton(带进度按钮)
<!-- 带进度的按钮 -->
<h:ProgressButton Content="提交" Width="120" Height="36" />
// 在 ViewModel 中使用
private RelayCommand _submitCommand;
public ICommand SubmitCommand => _submitCommand ?? (_submitCommand = new RelayCommand(async (command, parameter) =>
{
var cmd = command as IRelayCommand;
cmd.IsBusy = true;
cmd.Percent = 0;
// 模拟进度
for (int i = 0; i <= 100; i += 10)
{
await Task.Delay(100);
cmd.Percent = i;
}
cmd.IsBusy = false;
}));
6. SearchComboBox(可搜索下拉框)
<!-- 可搜索的下拉框 -->
<h:SearchComboBox Width="250" Height="30"
ItemsSource="{Binding Items}"
DisplayMemberPath="Name" />
7. SwitchToggleButton(开关按钮)
<!-- 开关按钮 -->
<h:SwitchToggleButton IsChecked="{Binding IsEnabled}" />
<!-- 带标签的开关 -->
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="启用功能" Margin="0,0,10,0" />
<h:SwitchToggleButton IsChecked="{Binding IsEnabled}" />
</StackPanel>
8. ModernProgressRing(环形进度)
<!-- 环形进度 -->
<h:ModernProgressRing IsActive="True" Width="50" Height="50" />
<!-- 自定义颜色 -->
<h:ModernProgressRing IsActive="True" Width="50" Height="50"
Foreground="#FF0093FF" />
用户控件
📝 用户控件列表
| 控件 | 说明 | 适用场景 |
|---|---|---|
| DataPager | 数据分页控件 | 分页显示数据 |
| MetroColorPicker | Metro 风格颜色选择器 | 颜色选择 |
| BufferPlayControl | 缓冲播放控件 | 媒体播放控制 |
| ProgressBarControl | 进度条控件 | 进度展示 |
| ScrollView3DControl | 3D 滚动视图 | 3D 内容展示 |
| SettingDialog | 设置对话框 | 设置页面 |
| SpaceSpliterUserControl | 空间分割控件 | 布局分割 |
🚀 使用示例
1. DataPager(分页控件)
<!-- 分页控件 -->
<h:DataPager x:Name="dataPager"
PageSize="10"
TotalCount="{Binding TotalCount}"
CurrentPage="{Binding CurrentPage}" />
// ViewModel 中的分页逻辑
public class MainViewModel : NotifyPropertyChangedBase
{
private int _currentPage = 1;
public int CurrentPage
{
get => _currentPage;
set
{
_currentPage = value;
RaisePropertyChanged();
LoadData();
}
}
public int TotalCount { get; set; } = 100;
private void LoadData()
{
// 根据 CurrentPage 加载对应页的数据
}
}
2. MetroColorPicker(颜色选择器)
<!-- 颜色选择器 -->
<h:MetroColorPicker SelectedColor="{Binding SelectedColor}" />
窗口基类
🏠 窗口基类概述
Custom/Window 目录提供了三个核心窗口基类:
| 基类 | 说明 | 适用场景 |
|---|---|---|
| WindowBase | 基础窗口基类 | 普通窗口 |
| MainWindowBase | 主窗口基类 | 应用主窗口 |
| DialogWindowBase | 对话框窗口基类 | 对话框窗口 |
🚀 WindowBase 使用示例
1. 创建自定义窗口
public class MyWindow : WindowBase
{
public MyWindow()
{
// 配置窗口属性
this.CaptionHeight = 36;
this.IconSize = 24;
this.IsUseDrag = true; // 启用拖动
}
}
2. XAML 定义
<h:WindowBase x:Class="MyApp.MyWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:h="clr-namespace:HeBianGu.General.WpfControlLib;assembly=HeBianGu.General.WpfControlLib"
Title="我的窗口" Height="400" Width="600">
<Grid>
<!-- 窗口内容 -->
<TextBlock Text="窗口内容" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</h:WindowBase>
🚀 MainWindowBase 使用示例
1. 创建主窗口
public class MainWindow : MainWindowBase
{
public MainWindow()
{
// 配置托盘图标
this.NotifyIconSource = new BitmapImage(new Uri("pack://application:,,,/Resources/icon.ico"));
}
// 实现抽象方法
public override void AddSnackMessage(object message)
{
// 实现消息提示
}
public override void ShowContainer(FrameworkElement element, Predicate<Panel> predicate = null)
{
// 实现容器显示
}
public override void CloseContainer()
{
// 实现容器关闭
}
public override void ShowWindowNotifyMessage(INotifyMessageItem message)
{
// 实现窗口通知
}
}
🎯 窗口属性配置
| 属性 | 类型 | 说明 |
|---|---|---|
| IconSize | double | 图标大小 |
| CaptionHeight | double | 标题栏高度 |
| CaptionBackground | Brush | 标题栏背景 |
| CaptionForeground | Brush | 标题栏前景色 |
| CaptionCornerRadius | CornerRadius | 标题栏圆角 |
| Header | ControlTemplate | 自定义标题栏模板 |
| MaxboxEnable | bool | 是否启用最大化按钮 |
| MinboxEnable | bool | 是否启用最小化按钮 |
| IsUseDrag | bool | 是否启用拖动 |
| AdornerDecoratorEffect | Effect | 装饰器效果 |
| DefaultBlurEffect | BlurEffect | 默认模糊效果 |
| ShowAnimation | Action | 显示动画 |
| CloseAnimation | Action | 关闭动画 |
主题资源
🎨 主题资源结构
Themes 目录包含以下资源文件:
| 文件 | 说明 |
|---|---|
| Resource.xaml | 主资源文件,合并其他资源 |
| Color/Light.xaml | 浅色主题颜色定义 |
| Color/Dark.xaml | 深色主题颜色定义 |
| Brush.xaml | 画刷资源 |
| Style.xaml | 样式资源 |
🚀 主题切换
// 在代码中切换主题
ServiceRegistry.Instance.GetInstance<IThemeConfigService>()?.ApplyTheme("Dark");
服务层
🎯 服务概述
Service 目录提供了应用程序的核心服务:
| 服务 | 说明 |
|---|---|
| ApplicationBase | 应用程序基类 |
| LoginViewModel | 登录视图模型 |
| SourceViewModel | 数据源视图模型 |
| SelectedSourceViewModel | 选中数据源视图模型 |
| IWindowAnimationService | 窗口动画服务接口 |
🚀 ApplicationBase 使用示例
1. 创建应用程序类
public partial class App : ApplicationBase
{
protected override MainWindowBase CreateMainWindow(StartupEventArgs e)
{
return new MainWindow();
}
protected override void ConfigureServices(IServiceCollection services)
{
base.ConfigureServices(services);
// 注册自定义服务
services.AddSingleton<IMyService, MyService>();
// 注册主题服务
services.AddTheme();
// 注册对话框服务
services.AddMessageDialog();
// 注册设置服务
services.AddSetting();
}
protected override void Configure(IApplicationBuilder app)
{
base.Configure(app);
// 配置主题
app.UseLocalTheme(l =>
{
l.AccentColor = (Color)ColorConverter.ConvertFromString("#FF0093FF");
l.ThemeType = ThemeType.Light;
l.SmallFontSize = 14;
l.LargeFontSize = 16;
});
}
}
🚀 LoginViewModel 使用示例
public class LoginViewModel : LoginViewModel
{
public ICommand LoginCommand => new RelayCommand(async () =>
{
IsBuzy = true;
try
{
// 调用身份认证服务
IIdentityService identity = ServiceRegistry.Instance.GetInstance<IIdentityService>();
bool success = await identity.LoginAsync(LoginUseName, LoginPassWord);
if (success)
{
IsLogined = true;
LoginMessage = "登录成功";
}
else
{
LoginMessage = "登录失败";
}
}
finally
{
IsBuzy = false;
}
});
}
实战应用示例
🎯 示例1:创建完整的主窗口
1. 创建主窗口类
public class MainWindow : MainWindowBase
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainViewModel();
}
public override void AddSnackMessage(object message)
{
// 实现消息提示逻辑
}
public override void ShowContainer(FrameworkElement element, Predicate<Panel> predicate = null)
{
// 实现容器显示逻辑
}
public override void CloseContainer()
{
// 实现容器关闭逻辑
}
public override void ShowWindowNotifyMessage(INotifyMessageItem message)
{
// 实现窗口通知逻辑
}
}
2. XAML 定义
<h:MainWindowBase x:Class="MyApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:h="clr-namespace:HeBianGu.General.WpfControlLib;assembly=HeBianGu.General.WpfControlLib"
Title="我的应用" Height="600" Width="800">
<Grid>
<!-- 左侧菜单 -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- 菜单区域 -->
<StackPanel Grid.Column="0" Background="{DynamicResource {x:Static h:BrushKeys.BackgroundSecondary}}">
<Button Content="首页" Style="{DynamicResource {x:Static h:ButtonKeys.Default}}" Margin="5" />
<Button Content="设置" Style="{DynamicResource {x:Static h:ButtonKeys.Default}}" Margin="5" />
<Button Content="关于" Style="{DynamicResource {x:Static h:ButtonKeys.Default}}" Margin="5" />
</StackPanel>
<!-- 内容区域 -->
<Border Grid.Column="1" Margin="10">
<h:Card>
<StackPanel>
<TextBlock Text="欢迎使用" FontSize="24" FontWeight="Bold" />
<TextBlock Text="这是一个基于 HeBianGu.General.WpfControlLib 的应用程序" Margin="0,10,0,0" />
<!-- 使用自定义控件 -->
<h:ModernProgressRing IsActive="False" Width="50" Height="50" Margin="0,20,0,0" />
<!-- 使用系统控件 -->
<Button Content="点击测试" Style="{DynamicResource {x:Static h:ButtonKeys.Accent}}" Margin="0,20,0,0" />
</StackPanel>
</h:Card>
</Border>
</Grid>
</h:MainWindowBase>
🎯 示例2:创建设置对话框
<h:Dialog x:Name="settingDialog" Width="400" Height="300" Style="{DynamicResource {x:Static h:Dialog.DefaultKey}}">
<StackPanel>
<TextBlock Text="系统设置" FontSize="16" FontWeight="Bold" Margin="0,0,0,10" />
<!-- 开关设置 -->
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<TextBlock Text="启用通知" Width="100" />
<h:SwitchToggleButton IsChecked="{Binding EnableNotification}" />
</StackPanel>
<!-- 颜色选择 -->
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<TextBlock Text="主题颜色" Width="100" />
<h:MetroColorPicker SelectedColor="{Binding ThemeColor}" Width="150" />
</StackPanel>
<!-- 按钮区域 -->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,20,0,0">
<Button Content="取消" Command="h:Commander.Cancel" Margin="0,0,10,0" />
<Button Content="确定" Command="h:Commander.Sure" />
</StackPanel>
</StackPanel>
</h:Dialog>
🎯 示例3:创建数据列表页面
<Grid>
<!-- 工具栏 -->
<StackPanel Orientation="Horizontal" Margin="10">
<Button Content="添加" Style="{DynamicResource {x:Static h:ButtonKeys.Success}}" Margin="5" />
<Button Content="删除" Style="{DynamicResource {x:Static h:ButtonKeys.Danger}}" Margin="5" />
<Button Content="刷新" Style="{DynamicResource {x:Static h:ButtonKeys.Default}}" Margin="5" />
<!-- 搜索框 -->
<h:SearchComboBox Width="200" Margin="0,0,0,0" />
</StackPanel>
<!-- 数据表格 -->
<DataGrid ItemsSource="{Binding Items}"
SelectedItem="{Binding SelectedItem}"
AutoGenerateColumns="False" Margin="10" Grid.Row="1">
<DataGrid.Columns>
<DataGridTextColumn Header="ID" Binding="{Binding Id}" />
<DataGridTextColumn Header="名称" Binding="{Binding Name}" />
<DataGridTextColumn Header="状态" Binding="{Binding Status}" />
</DataGrid.Columns>
</DataGrid>
<!-- 分页控件 -->
<h:DataPager PageSize="10"
TotalCount="{Binding TotalCount}"
CurrentPage="{Binding CurrentPage}"
Margin="10" Grid.Row="2" />
</Grid>
总结
HeBianGu.General.WpfControlLib 是一个功能强大的 WPF 通用控件库,提供了:
- 统一的系统控件样式:让标准 WPF 控件拥有现代化外观
- 丰富的自定义控件:卡片、对话框、图标、进度条等
- 强大的窗口框架:支持自定义标题栏、动画、托盘图标等
- 完善的服务层:应用程序基类、登录视图模型等
- 灵活的主题系统:支持浅色/深色主题切换
通过合理使用这些控件和服务,可以快速构建出专业、美观的 WPF 应用程序。建议在实际项目中根据需求选择合适的功能模块,充分发挥框架的优势。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)