WPF常用UI庫(kù)和圖表庫(kù)（MahApps、HandyControl、LiveCharts）
WPF有很多開源免費(fèi)的UI庫(kù)，本文主要介紹常見的MahApps、HandyControl兩個(gè)UI庫(kù)；在開發(fā)過程中經(jīng)常會(huì)涉及到圖表的開發(fā)，本文主要介紹LiveCharts開源圖表庫(kù)。
UI庫(kù)
第三方UI庫(kù)的使用一般都是三步：
- Nuget安裝
- 在APP.xaml中增加資源
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..........xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
- 在MainWindow.xaml中引用命名空間
xmlns:xxxx="xxxxxxx"
MahApps
MahApps.Metro官方網(wǎng)站
- Nuget安裝
MahApps.Metro - 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>
- 在MainWindow.xaml中引用命名空間
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
該UI庫(kù)不僅擴(kuò)展了很多擴(kuò)展控件，還對(duì)原生的控件進(jìn)行了美化?？匆粋€(gè)簡(jiǎn)單案例
<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>
因?yàn)樯婕暗搅舜绑w，所以在后臺(tái)類中需要繼承MetroWindow
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中文官方文檔
官方網(wǎng)站上詳細(xì)介紹了各控件的使用方法和控件的展示效果，并且網(wǎng)站是中文的十分友好，詳細(xì)使用說明直接查看官網(wǎng)即可。
圖表庫(kù)
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="時(shí)間"
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);
}
}
});
}
}
更多使用方法見官方網(wǎng)站文章來源：http://www.zghlxwxcb.cn/news/detail-567842.html
LiveCharts滿足基本的需求，但是如果數(shù)據(jù)量較大的話，性能會(huì)大打折扣，如果追求性能可以使用下ScottPlot開源庫(kù)，但是該庫(kù)某些功能沒有實(shí)現(xiàn)。如果對(duì)性能有較高的要求，也可以使用LightningChart.NET,不過這是收費(fèi)的組件庫(kù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-567842.html
到了這里，關(guān)于WPF常用UI庫(kù)和圖標(biāo)庫(kù)（MahApps、HandyControl、LiveCharts）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
