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.xaml
  • TextBox.xaml
  • ComboBox.xaml
  • DataGrid.xaml
  • ListBox.xaml
  • TreeView.xaml
  • TabControl.xaml
  • PasswordBox.xaml
  • ProgressBar.*.xaml

这意味着你使用普通 WPF 控件,也可以获得统一的框架风格。

2 自定义控件

Custom/Control 中有很多增强控件:

控件 说明
Card 卡片容器
CarouselControl 轮播控件
Dialog 对话框
Icon 图标控件
HighlightTextBlock 高亮文本
ModernFrame 现代化 Frame
ModernProgressRing 环形进度
NumericControl 数字输入
ProgressButton 带进度按钮
RingBox 环形显示
SearchComboBox 可搜索下拉框
SwitchToggleButton 开关按钮
WaitingBox 等待提示
WaterFallFlowControl 瀑布流
WaveProgressBar 波浪进度条

3 窗口基类

Custom/Window 中提供窗口基类:

  • WindowBase
  • MainWindowBase
  • DialogWindowBase

这让项目中的窗口拥有统一标题栏、主题、动画和窗口行为。

HeBianGu.General.WpfControlLib 通用控件库详细教程

目录

  1. 项目概述
  2. 系统控件样式(Custom/System)
  3. 自定义控件(Custom/Control)
  4. 用户控件(Custom/User)
  5. 窗口基类(Custom/Window)
  6. 主题资源(Themes)
  7. 服务层(Service)
  8. 实战应用示例

项目概述

HeBianGu.General.WpfControlLib 是框架的通用 UI 库,也是很多应用项目都会引用的核心库。它提供了丰富的控件、窗口基类和服务,让开发者能够快速构建现代化的 WPF 应用程序。

📁 项目结构

目录 作用 重要程度
Custom/System 系统控件样式重写 ⭐⭐⭐
Custom/Control 自定义控件 ⭐⭐⭐
Custom/User 用户控件 ⭐⭐
Custom/Window 窗口基类 ⭐⭐⭐
Themes 通用主题资源 ⭐⭐
Provider 图标、辅助类、命令、动画辅助 ⭐⭐
Service ApplicationBase、登录 ViewModel 等 ⭐⭐⭐

✨ 核心特性

  1. 统一的视觉风格:所有控件都遵循现代设计语言
  2. 丰富的控件库:包含卡片、对话框、图标、进度条等多种控件
  3. 强大的窗口框架:提供统一的窗口基类,支持自定义标题栏、动画等
  4. 完善的服务层:提供应用程序基类、登录视图模型等
  5. 高度可定制:支持主题切换、样式覆盖等

系统控件样式

🎨 概述

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 通用控件库,提供了:

  1. 统一的系统控件样式:让标准 WPF 控件拥有现代化外观
  2. 丰富的自定义控件:卡片、对话框、图标、进度条等
  3. 强大的窗口框架:支持自定义标题栏、动画、托盘图标等
  4. 完善的服务层:应用程序基类、登录视图模型等
  5. 灵活的主题系统:支持浅色/深色主题切换

通过合理使用这些控件和服务,可以快速构建出专业、美观的 WPF 应用程序。建议在实际项目中根据需求选择合适的功能模块,充分发挥框架的优势。

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐