WPF 공용 UI 라이브러리 및 차트 라이브러리(MahApps, HandyControl, LiveCharts)
WPF에는 많은 오픈 소스 및 무료 UI 라이브러리가 있습니다.이 기사에서는 주로 두 가지 공통 UI 라이브러리인 MahApps 및 HandyControl을 소개합니다.
UI 케이
타사 UI 라이브러리 사용은 일반적으로 세 단계입니다.
- 너겟 설치
- APP.xaml에 리소스 추가
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..........xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
- MainWindow.xaml에서 네임스페이스 참조
xmlns:xxxx="xxxxxxx"
MahApps
- 너겟 설치
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 라이브러리는 많은 확장 컨트롤을 확장할 뿐만 아니라 네이티브 컨트롤을 아름답게 합니다. 간단한 경우를 보자
<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
핸디컨트롤
사용법은 비슷합니다. 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>
공식 웹사이트에서는 각 컨트롤의 사용법과 컨트롤의 표시 효과를 자세히 소개하고 있으며, 웹사이트는 중국어로 매우 친절합니다. 자세한 지침은 공식 웹사이트를 확인하세요.
차트 라이브러리
너겟 패키지 설치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>
모델뷰
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);
}
}
});
}
}
자세한 사용 방법은 공식 웹 사이트를 참조하십시오.
LiveCharts는 기본적인 요구사항은 충족하지만 데이터 양이 많으면 성능이 크게 떨어지게 됩니다 ScottPlot. 성능에 대한 요구 사항이 더 높으면 사용할 수도 LightningChart.NET있지만 이것은 유료 구성 요소 라이브러리입니다.