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

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

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

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

UI库

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

  1. Nuget安装
  2. 在APP.xaml中增加资源

<Application.Resources>

   <ResourceDictionary>

       <ResourceDictionary.MergedDictionaries>

           <ResourceDictionarySource="..........xaml"/>

       </ResourceDictionary.MergedDictionaries>

   </ResourceDictionary>

</Application.Resources>

  1. 在MainWindow.xaml中引用命名空间xmlns:xxxx="xxxxxxx"

MahApps

MahApps.Metro官方网站

  1. Nuget安装MahApps.Metro
  2. App.xaml中增加

<ResourceDictionary.MergedDictionaries>

   <ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml"/>

   <ResourceDictionarySource="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml"/>

   <ResourceDictionarySource="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:MetroWindowx: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>

           <ButtonContent="A"/>

       </mah:WindowCommands>

   </mah:MetroWindow.LeftWindowCommands>

   <mah:MetroWindow.RightWindowCommands>

       <mah:WindowCommands>

           <ButtonContent="B"/>

           <ButtonContent="C"/>

           <ButtonContent="D"/>

           <ButtonContent="E"/>

       </mah:WindowCommands>

   </mah:MetroWindow.RightWindowCommands>

   <Grid>

       <StackPanel>

           <ButtonContent="Button"Width="200"Height="30"Style="{StaticResource MahApps.Styles.Button.Hamburger}"/>

           <TextBoxText="Hello"Width="200"/>

           <TabControl>

               <TabItemHeader="AAA"/>

               <TabItemHeader="BBB"/>

               <TabItemHeader="CCCC"/>

               <TabItemHeader="DDDD"/>

           </TabControl>

           <mah:MetroTabControl>

               <mah:MetroTabItemHeader="AAA"CloseButtonEnabled="True"/>

               <mah:MetroTabItemHeader="AAA"CloseButtonEnabled="True"/>

               <mah:MetroTabItemHeader="AAA"/>

               <mah:MetroTabItemHeader="AAA"/>

               <mah:MetroTabItemHeader="AAA"/>

           </mah:MetroTabControl>

         

           <mah:FlipViewBannerText="Hello"IsBannerEnabled="False">

               <mah:FlipViewItemHeight="100"Width="300">

                   <BorderBackground="Orange"/>

               </mah:FlipViewItem>

               <mah:FlipViewItemHeight="100"Width="300">

                   <BorderBackground="Green"/>

               </mah:FlipViewItem>

           </mah:FlipView>

           

       </StackPanel>

   </Grid>

</mah:MetroWindow>

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

HandyControl

使用方法类似,Nuget安装HandyControl

App.xaml中引入

<Application.Resources>

   <ResourceDictionary>

       <ResourceDictionary.MergedDictionaries>

           <ResourceDictionarySource="pack://application:,,,/HandyControl;component/Themes/SkinDefault.xaml"/>

           <ResourceDictionarySource="pack://application:,,,/HandyControl;component/Themes/Theme.xaml"/>

       </ResourceDictionary.MergedDictionaries>

   </ResourceDictionary>

</Application.Resources>

HandyOrg中文官方文档

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

图表库

Nuget包安装LiveCharts.Wpf

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

<Grid>

   <lvc:CartesianChartDisableAnimations="False"Zoom="Xy">

       <lvc:CartesianChart.Series>

           <lvc:LineSeriesScalesYAt="1"Values="{Binding Values}"/>

           <lvc:ColumnSeriesValues="{Binding Values2}"/>

       </lvc:CartesianChart.Series>

       <lvc:CartesianChart.AxisX>

           <lvc:Axis

               Title="时间"

               Labels="{Binding xLabels}"

               LabelsRotation="-45">

               <lvc:Axis.Separator>

                   <lvc:SeparatorStep="1"/>

               </lvc:Axis.Separator>

           </lvc:Axis>

       </lvc:CartesianChart.AxisX>

       <lvc:CartesianChart.AxisY>

           <lvc:Axis

               Title="温度"

               MaxValue="100"

               MinValue="0">

               <lvc:Axis.Separator>

                   <lvc:SeparatorStep="10"/>

               </lvc:Axis.Separator>

           </lvc:Axis>

           <lvc:Axis

               Title="压力"

               MaxValue="100"

               MinValue="0"

               Position="RightTop">

               <lvc:Axis.Separator>

                   <lvc:SeparatorStep="10"/>

               </lvc:Axis.Separator>

           </lvc:Axis>

       </lvc:CartesianChart.AxisY>

   </lvc:CartesianChart>

</Grid>

ModelView

publicclassMainViewModel

{

   publicChartValues<double>Values { get; set; }

   publicChartValues<double>Values2 { get; set; }

   publicObservableCollection<string>xLabels { get; set; }

   publicMainViewModel()

   {

       Values=newChartValues<double>();

       Values2=newChartValues<double>();

       xLabels=newObservableCollection<string>();

       Randomrandom=newRandom();

       Task.Factory.StartNew(async () =>

       {

           while (true)

           {

               awaitTask.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);

               }

           }

       });

   }

}

更多使用方法见官方网站

LiveCharts满足基本的需求,但是如果数据量较大的话,性能会大打折扣,如果追求性能可以使用下ScottPlot开源库,但是该库某些功能没有实现。如果对性能有较高的要求,也可以使用LightningChart.NET,不过这是收费的组件库。


相关文章
|
11天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
3月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
七天.NET 8操作SQLite入门到实战 - (1)第七天BootstrapBlazor UI组件库引入
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
83 0
|
3月前
|
API C# 开发者
一款开源免费美观的WinForm UI控件库
一款开源免费美观的WinForm UI控件库
276 9
|
2月前
|
Linux C# Android开发
.NET Avalonia开源、免费的桌面UI库 - SukiUI
.NET Avalonia开源、免费的桌面UI库 - SukiUI
|
16天前
|
JavaScript
UI库的按需加载(vue的问题)
UI库的按需加载(vue的问题)
12 0
|
2月前
|
前端开发 C# 索引
浅谈WPF之UI布局
一个成功的软件,离不开人性化的UI设计,如何抓住用户第一视觉,让用户产生依赖感,合适优雅的布局必不可少。本文以一些简单的小例子,简述WPF中布局 面板 控件的使用,仅供学习分享使用,如有不足之处,还请指正。
37 1
|
3月前
|
搜索推荐 C# 开发者
3个值得推荐的WPF UI组件库
3个值得推荐的WPF UI组件库
150 0
|
4月前
|
C#
浅谈WPF之装饰器实现控件锚点
使用过visio的都知道,在绘制流程图时,当选择或鼠标移动到控件时,都会在控件的四周出现锚点,以便于修改大小,移动位置,或连接线等,那此功能是如何实现的呢?在WPF开发中,想要在控件四周实现锚点,可以通过装饰器来实现,今天通过一个简单的小例子,简述如何在WPF开发中,应用装饰器,仅供学习分享使用,如有不足之处,还请指正。
59 1
|
8月前
|
C# Windows
WPF技术之图形系列Polygon控件
WPF Polygon是Windows Presentation Foundation (WPF)框架中的一个标记元素,用于绘制多边形形状。它可以通过设置多个点的坐标来定义多边形的形状,可以绘制任意复杂度的多边形。
451 0

热门文章

最新文章