完整教程：HEFrame.WpfUI :一个现代化的 开源 WPF UI库

HEFrame.WpfUI 控件库

HEFrame Logo

现代化、美观的 WPF UI 控件库

GitHub链接：HEFrame.WpfUI，欢迎各位Star

目录

简介

HEFrame.WpfUI 是一个现代化的 WPF UI 控件库，提供了丰富的自定义控件和样式，帮助开发者快速构建美观、专业的桌面应用程序。该控件库遵循现代设计理念，支持源码、展示主题切换、动画效果，并且完全兼容 MVVM 设计模式。
在这里插入图片描述
在这里插入图片描述

✨ 特性

  • 丰富的控件集合：包含 30+ 种常用控件，满足各类应用场景
  • 现代化设计：遵循扁平化、简约的设计风格
  • 主题定制：支持亮色/暗色主题切换，可自定义主题色
  • 动画效果：内置多种过渡动画和加载动画
  • MVVM 友好：所有控件均支持数据绑定和命令绑定
  • 易于集成：简单的引用方式，快速集成到现有项目

安装与引用

  1. 克隆仓库

    git clone https://github.com/he-ze-xi/HEFrame.WpfUI

  2. 打开Visual Studio编译项目代码

  3. 在编译完的bin目录找到HEFrame.Core.dll 和 HEFrame.Styles.dll，在你的 WPF 项目中添加对这两个 DLL 的引用

快速开始

1. 添加资源字典

在你的 App.xaml 文件中添加以下资源字典：

<Application.Resources>
  <ResourceDictionary>
    <ResourceDictionary.MergedDictionaries>
      <ResourceDictionary Source="pack://application:,,,/HEFrame.Styles;component/Themes/Generic.xaml" />
    </ResourceDictionary.MergedDictionaries>
  </ResourceDictionary>
</Application.Resources>

2. 添加命名空间

在 XAML 文件中添加以下命名空间：

xmlns:ui="clr-namespace:HEFrame.Styles.Controls;assembly=HEFrame.Styles"

3. 使用控件

现在你可以在 XAML 中使用 HEFrame 控件了：

<ui:HEButton Content="点击我" ButtonType="Primary" />
<ui:HETextBox Grid.Row="3" Margin="15,10" ThemeType="Light" WaterMark="我是水印文字" />
...

Demo界面点击右上角按钮可以看到每个xaml页面的引用代码示例，使用者可以更直观看到每个控件的用法：
在这里插入图片描述

控件列表

按钮控件

1. HEButton
  • ButtonType：按钮类型（Primary, Success, Caution, Dranger, Dark, Light, Custom）
  • IsLoading：是否显示加载状态
  • LoadingContent：加载状态显示的文本
<!-- 基本用法 -->
  <ui:HEButton Content="主要按钮" ButtonType="Primary" />
  <ui:HEButton Content="成功按钮" ButtonType="Success" />
  <ui:HEButton Content="警告按钮" ButtonType="Caution" />
  <ui:HEButton Content="危险按钮" ButtonType="Dranger" />
  <ui:HEButton Content="深色按钮" ButtonType="Dark" />
  <ui:HEButton Content="浅色按钮" ButtonType="Light" />
  <!-- 禁用状态 -->
    <ui:HEButton Content="禁用按钮" ButtonType="Primary" IsEnabled="False" />
    <!-- 加载状态 -->
        <ui:HEButton Content="加载按钮"
        ButtonType="Primary"
        IsLoading="{Binding IsLoading}"
        LoadingContent="加载中..." />
      <!-- 自定义样式 -->
          <ui:HEButton Content="自定义按钮"
          ButtonType="Custom"
          Background="Black"
          Foreground="White"
          BorderBrush="{DynamicResource PrimaryBackground}"
          BorderThickness="1"
          HoverBackground="{DynamicResource PrimaryMouseHover}" />
2. HEToggleButton
  • ThemeType：主题类型（Light, Dark）
  • IsChecked：是否选中
<ui:HEToggleButton ThemeType="Light" IsChecked="{Binding IsActive}" />
3. HERadioButton
<ui:HERadioButton Content="选项1" GroupName="Options" IsChecked="True" />
<ui:HERadioButton Content="选项2" GroupName="Options" />
4. HECheckBox
<ui:HECheckBox Content="选择我" IsChecked="{Binding IsSelected}" />

输入控件

5. HETextBox
<ui:HETextBox Watermark="请输入用户名" Text="{Binding Username}" />
6. HEPasswordBox
<ui:HEPasswordBox Watermark="请输入密码" Password="{Binding Password}" />
7. HEComboBox
<ui:HEComboBox ItemsSource="{Binding Options}"
  DisplayMemberPath="Name"
  SelectedValuePath="Id"
  SelectedValue="{Binding SelectedId}" />

列表控件

8. HEListView
<ui:HEListView ItemsSource="{Binding Items}">
  <ui:HEListView.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Name}" />
    </DataTemplate>
  </ui:HEListView.ItemTemplate>
</ui:HEListView>
9. HEListBox
<ui:HEListBox ItemsSource="{Binding Items}"
  SelectedItem="{Binding SelectedItem}">
<ui:HEListBox.ItemTemplate>
  <DataTemplate>
    <TextBlock Text="{Binding Name}" />
  </DataTemplate>
</ui:HEListBox.ItemTemplate>
</ui:HEListBox>

滑块控件

10. HESlider
<ui:HESlider Minimum="0"
  Maximum="100"
  Value="{Binding SliderValue}"
  TickFrequency="10"
  IsSnapToTickEnabled="True" />

进度条控件

11. HEProgressBar
<ui:HEProgressBar Value="{Binding Progress}" Maximum="100" />

选项卡控件

12. HETabControl
  • ThemeType：主题类型（Light, Dark）
  • SelectionChangedCommand：选项卡切换命令

示例：

<ui:HETabControl ThemeType="Light"
  ItemsSource="{Binding TabItems}"
  SelectedIndex="{Binding SelectedIndex, Mode=TwoWay}"
  SelectionChangedCommand="{Binding SwitchPageCommand}">
<ui:HETabControl.ItemTemplate>
  <DataTemplate>
    <TextBlock Text="{Binding Header}" />
  </DataTemplate>
</ui:HETabControl.ItemTemplate>
<ui:HETabControl.ContentTemplate>
  <DataTemplate>
    <ContentControl Content="{Binding Content}" />
  </DataTemplate>
</ui:HETabControl.ContentTemplate>
</ui:HETabControl>

菜单控件

13. HEExpanderMenu
  • Header：菜单标题
  • MenuItems：菜单项集合
  • MenuSwitchCommand：菜单切换命令
  • ThemeType：主题类型（Light, Dark）
<ui:HEExpanderMenu Header="系统设置"
  MenuItems="{Binding MenuItems}"
  MenuSwitchCommand="{Binding PageSwitchCommand}"
  ThemeType="Light" />
14. HEContextMenu
<TextBlock Text="右键点击我">
  <TextBlock.ContextMenu>
    <ui:HEContextMenu>
      <MenuItem Header="复制" Command="{Binding CopyCommand}"/>
      <MenuItem Header="粘贴" Command="{Binding PasteCommand}"/>
    </ui:HEContextMenu>
  </TextBlock.ContextMenu>
</TextBlock>

提示控件

15. HEToolTip
<Button Content="鼠标悬停查看提示">
  <ui:HEToolTip.ToolTip>
    <ui:HEToolTip Content="这是一个自定义工具提示" />
  </ui:HEToolTip.ToolTip>
</Button>

控件

16. HEGroupBox
<ui:HEGroupBox Header="基本信息">
  <StackPanel>
    <ui:HETextBox Watermark="姓名" />
    <ui:HETextBox Watermark="年龄" />
  </StackPanel>
</ui:HEGroupBox>
17. HEExpander
<ui:HEExpander Header="详细信息">
  <StackPanel>
    <TextBlock Text="这里是详细信息内容" />
  </StackPanel>
</ui:HEExpander>

消息卡片控件

18. HEMessageCard
<ui:HEMessageCardHost ShowDirection="FromTop" />
<!-- 在代码中使用 -->
  HEMessageService.SendMessage("操作成功", MessageType.Success, "GlobalMessageToken");

数据控件

19. HEDataGrid
<ui:HEDataGrid ItemsSource="{Binding DataList}"
  AutoGenerateColumns="False">
<ui:HEDataGrid.Columns>
  <DataGridTextColumn Header="姓名" Binding="{Binding Name}" />
  <DataGridTextColumn Header="年龄" Binding="{Binding Age}" />
  <DataGridCheckBoxColumn Header="是否激活" Binding="{Binding IsActive}" />
</ui:HEDataGrid.Columns>
</ui:HEDataGrid>

加载动画控件

20. HELoadingAnimation
  • AnimationType：动画类型（Default, CircleArrow, CirclePoint, CircleLine, LinePoint）
  • IsActive：是否激活动画
  • LoadingContent：加载提示文本
<ui:HELoadingAnimation AnimationType="CircleArrow"
  IsActive="{Binding IsLoading}"
  LoadingContent="正在加载数据..." />

过渡动画控件

21. HETransitionAnimation
  • TransitionType：过渡类型（Fade, Slide, Zoom, Flip）
  • IsStartAnimation：是否启动动画
<ui:HETransitionAnimation TransitionType="{Binding TransitionType}"
  IsStartAnimation="true">
<ContentControl Content="{Binding CurrentPage}" />
</ui:HETransitionAnimation>

日期控件

22. HEDatePicker
<ui:HEDatePicker SelectedDate="{Binding SelectedDate}" />
23. HECalendar
<ui:HECalendar SelectedDate="{Binding SelectedDate}"
  DisplayDate="{Binding DisplayDate}"
  SelectionMode="SingleDate" />

主题定制

HEFrame.WpfUI 支持主题定制，你可以通过修改资源字典来自定义主题。

切换亮色/暗色主题

<!-- 亮色主题 -->
  <ResourceDictionary Source="pack://application:,,,/HEFrame.Styles;component/HEStyles/Default/LightTheme.xaml" />
  <!-- 暗色主题 -->
    <ResourceDictionary Source="pack://application:,,,/HEFrame.Styles;component/HEStyles/Default/DarkTheme.xaml" />

自定义主题色

你可以在应用程序资源中覆盖默认颜色：

<Application.Resources>
  <ResourceDictionary>
    <!-- 自定义主题色 -->
      <SolidColorBrush x:Key="PrimaryBackground" Color="#1890FF" />
      <SolidColorBrush x:Key="PrimaryMouseHover" Color="#40A9FF" />
      <SolidColorBrush x:Key="PrimaryMouseDown" Color="#096DD9" />
      <ResourceDictionary.MergedDictionaries>
        <!-- 其他资源字典 -->
        </ResourceDictionary.MergedDictionaries>
      </ResourceDictionary>
    </Application.Resources>
posted @ 2025-11-07 17:11  yxysuanfa  阅读(4)  评论(0)    收藏  举报