WPF常用UI库和图标库(MahApps、HandyControl、LiveCharts)

这篇具有很好参考价值的文章主要介绍了WPF常用UI库和图标库(MahApps、HandyControl、LiveCharts)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

WPF常用UI库和图表库(MahApps、HandyControl、LiveCharts)

WPF有很多开源免费的UI库,本文主要介绍常见的MahApps、HandyControl两个UI库;在开发过程中经常会涉及到图表的开发,本文主要介绍LiveCharts开源图表库。

UI库

第三方UI库的使用一般都是三步:

  1. Nuget安装
  2. 在APP.xaml中增加资源
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="..........xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>
  1. 在MainWindow.xaml中引用命名空间xmlns:xxxx="xxxxxxx"

MahApps

MahApps.Metro官方网站

  1. Nuget安装MahApps.Metro
  2. App.xaml中增加
<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
</ResourceDictionary.MergedDictionaries>
  1. 在MainWindow.xaml中引用命名空间xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"

该UI库不仅扩展了很多扩展控件,还对原生的控件进行了美化。看一个简单案例

<mah:MetroWindow x:Class="Zhaoxi.MahAppsApp.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:Zhaoxi.MahAppsApp"
        xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
        mc:Ignorable="d" FontSize="20" WindowStartupLocation="CenterScreen"
        Title="MainWindow" Height="450" Width="800">
    <mah:MetroWindow.LeftWindowCommands>
        <mah:WindowCommands>
            <Button Content="A"/>
        </mah:WindowCommands>
    </mah:MetroWindow.LeftWindowCommands>
    <mah:MetroWindow.RightWindowCommands>
        <mah:WindowCommands>
            <Button Content="B"/>
            <Button Content="C"/>
            <Button Content="D"/>
            <Button Content="E"/>
        </mah:WindowCommands>
    </mah:MetroWindow.RightWindowCommands>
    <Grid>
        <StackPanel>
            <Button Content="Button" Width="200" Height="30" Style="{StaticResource MahApps.Styles.Button.Hamburger}"/>
            <TextBox Text="Hello" Width="200"/>
            <TabControl>
                <TabItem Header="AAA"/>
                <TabItem Header="BBB"/>
                <TabItem Header="CCCC"/>
                <TabItem Header="DDDD"/>
            </TabControl>
            <mah:MetroTabControl>
                <mah:MetroTabItem Header="AAA" CloseButtonEnabled="True"/>
                <mah:MetroTabItem Header="AAA" CloseButtonEnabled="True"/>
                <mah:MetroTabItem Header="AAA"/>
                <mah:MetroTabItem Header="AAA"/>
                <mah:MetroTabItem Header="AAA"/>
            </mah:MetroTabControl>
           
            <mah:FlipView BannerText="Hello" IsBannerEnabled="False">
                <mah:FlipViewItem Height="100" Width="300">
                    <Border Background="Orange"/>
                </mah:FlipViewItem>
                <mah:FlipViewItem Height="100" Width="300">
                    <Border Background="Green"/>
                </mah:FlipViewItem>
            </mah:FlipView>
            
        </StackPanel>
    </Grid>
</mah:MetroWindow>

因为涉及到了窗体,所以在后台类中需要继承MetroWindow

handycontrol 图标,WPF,wpf,ui

HandyControl

使用方法类似,Nuget安装HandyControl

App.xaml中引入

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/>
            <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

HandyOrg中文官方文档

官方网站上详细介绍了各控件的使用方法和控件的展示效果,并且网站是中文的十分友好,详细使用说明直接查看官网即可。

handycontrol 图标,WPF,wpf,ui

图表库

Nuget包安装LiveCharts.Wpf

引入命名空间xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"

<Grid>
    <lvc:CartesianChart DisableAnimations="False" Zoom="Xy">
        <lvc:CartesianChart.Series>
            <lvc:LineSeries ScalesYAt="1" Values="{Binding Values}" />
            <lvc:ColumnSeries Values="{Binding Values2}" />
        </lvc:CartesianChart.Series>
        <lvc:CartesianChart.AxisX>
            <lvc:Axis
                Title="时间"
                Labels="{Binding xLabels}"
                LabelsRotation="-45">
                <lvc:Axis.Separator>
                    <lvc:Separator Step="1" />
                </lvc:Axis.Separator>
            </lvc:Axis>
        </lvc:CartesianChart.AxisX>
        <lvc:CartesianChart.AxisY>
            <lvc:Axis
                Title="温度"
                MaxValue="100"
                MinValue="0">
                <lvc:Axis.Separator>
                    <lvc:Separator Step="10" />
                </lvc:Axis.Separator>
            </lvc:Axis>
            <lvc:Axis
                Title="压力"
                MaxValue="100"
                MinValue="0"
                Position="RightTop">
                <lvc:Axis.Separator>
                    <lvc:Separator Step="10" />
                </lvc:Axis.Separator>
            </lvc:Axis>
        </lvc:CartesianChart.AxisY>
    </lvc:CartesianChart>
</Grid>

ModelView

public class MainViewModel
{
    public ChartValues<double> Values { get; set; }
    public ChartValues<double> Values2 { get; set; }

    public ObservableCollection<string> xLabels { get; set; }
    public MainViewModel()
    {
        Values = new ChartValues<double>();
        Values2 = new ChartValues<double>();
        xLabels = new ObservableCollection<string>();
        Random random = new Random();

        Task.Factory.StartNew(async () =>
        {
            while (true)
            {
                await Task.Delay(1000);
                Values.Add(random.Next(10, 80));
                Values2.Add(random.Next(10,90));
                xLabels.Add(DateTime.Now.ToString("mm:ss"));

                if (Values.Count > 50)
                {
                    Values.RemoveAt(0);
                    Values2.RemoveAt(0);
                    xLabels.RemoveAt(0);
                }

            }
        });
    }
}

handycontrol 图标,WPF,wpf,ui

更多使用方法见官方网站

LiveCharts满足基本的需求,但是如果数据量较大的话,性能会大打折扣,如果追求性能可以使用下ScottPlot开源库,但是该库某些功能没有实现。如果对性能有较高的要求,也可以使用LightningChart.NET,不过这是收费的组件库。文章来源地址https://www.toymoban.com/news/detail-567842.html

到了这里,关于WPF常用UI库和图标库(MahApps、HandyControl、LiveCharts)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WPF图表绘制(LiveCharts)

    效果如下图: 使用到的DLL:LiveCharts.dll、LiveCharts.Wpf.dll xaml界面代码(前台代码) viewmodel代码(后台代码) xaml界面代码(前台代码) viewmodel代码(后台代码) public void GetColunmSeriesData() { List columnValues = new List { 40, 30, 25, 60 }; for (int i = 0; i titles.Count; i++) { ColumnXLabels.Add(titles[

    2024年02月04日
    浏览(30)
  • WPF livecharts 折线图遮挡数字问题

    在WPF里使用livecharts,如果折线图或者柱状图有多个的时候,可能会出现两个数字遮挡问题,这时候要设置DataLabelsTemplate 属性。 如LineSeries设置代码如下: 第一个折线图的DataLabelsTemplate 第二个折线图的DataLabelsTemplate 设置LineSeries 具体位置可能要根据你的图表大小调整,主要就

    2024年02月07日
    浏览(37)
  • WPF开源控件HandyControl——零基础教程

    中文文档:欢迎使用HandyControl | HandyOrg Github代码:https://github.com/HandyOrg/HandyControl 使用教程:WPF-HandyControl安装和使用 - 掘金 创建wpf项目 NuGet安装handycontrol控件 在 App.xaml配置HandyControl,一个是皮肤资源,一个是主题资源 注: 报错信息 :XDG0010未能加载文件或程序集“HandyCont

    2024年02月06日
    浏览(42)
  • C# WPF 开源主题 HandyControl 的使用(一)

    HandyControl是一套WPF控件库,它几乎重写了所有原生样式,同时包含80余款自定义控件(正逐步增加),下面我们开始使用。 1.1 创建项目 C#  WPF应用(.NET Framework)创建项目 1.2 添加包 1.3  在App.xaml中引用HandyControl的皮肤和主题: 1.4 窗体文件xaml添加引用 xmlns:hc=\\\"https://handyorg.gi

    2024年02月13日
    浏览(34)
  • 手把手一起使用开源WPF控件HandyControl

    首先创建WPF工程 点击工具-NuGet包管理器-管理解决方案的NuGet程序包,如图所示: 直接搜索HandyControl,如图所示: 点击安装: 安装完成: 在App.xaml中加入如下代码: 如图所示: 工具箱中已新增HandyControl,可以开始使用,如图所示: HandyControl: https://github.com/NaBian/HandyControl 希

    2024年02月05日
    浏览(52)
  • WPF HandyControl 界面交互反馈:对话框+加载框+列表选择

    我学了HandyControl的基础使用,但是发现HandyControl 封装了基础的消息提示,但是没有封装基础的交互逻辑。可能是因为我写了Uniapp,我知道封装了基础的交互其实一般就够用了。 Uniapp 界面交互反馈 我现在觉得,代码要低耦合一点,每个模块都纯粹一点,这一次我就不添加Nl

    2024年01月19日
    浏览(39)
  • 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(1)

    在我们的SqlSugar的开发框架中,整合了Winform端、Vue3+ElementPlus的前端、以及基于UniApp+Vue+ThorUI的移动前端几个前端处理,基本上覆盖了我们日常的应用模式了,本篇随笔进一步介绍前端应用的领域,研究集成WPF的应用端,循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端

    2024年02月09日
    浏览(55)
  • 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(2)

    在前面随笔《循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(1)》中介绍了Mvvm 的开发,以及一些界面效果,本篇随笔继续深入探讨基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发,介绍如何整合SqlSugar框架的基础接口,通过基类继承的方式,简化实际项目的开

    2024年02月09日
    浏览(58)
  • 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(3)--自定义用户控件

    在我们创建界面元素的时候,不管在Vue3+ElementPlus的前端上,还是Winform桌面端上,都是会利用自定义用户控件来快速重用一些自定义的界面内容,对自定义用户控件的封装处理,也是我们开发WPF应用需要熟悉的一环。本篇随笔继续深入介绍介绍基于CommunityToolkit.Mvvm 和HandyCont

    2024年02月09日
    浏览(58)
  • 循序渐进介绍基于CommunityToolkit.Mvvm 和HandyControl的WPF应用端开发(5) -- 树列表TreeView的使用

    在我们展示一些参考信息的时候,有所会用树形列表来展示结构信息,如对于有父子关系的多层级部门机构,以及一些常用如字典大类节点,也都可以利用树形列表的方式进行展示,本篇随笔介绍基于WPF的方式,使用TreeView来洗实现结构信息的展示,以及对它的菜单进行的设

    2024年02月08日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包