1.MahApps(mahapps.com)
①通过Nuget安装:MahApps.Metro
②项目中引入
<Application x:Class="WPFUI库.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPFUI库"
StartupUri="MainWindow.xaml">
<Application.Resources>
<!--原生控件:新的样式模板-->
<!--扩展控件:自定义控件 cs/ControlTemplate-->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<!-- Theme setting -->
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
</Application.Resources>
</Application>
③使用
<Window x:Class="WPFUI库.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:WPFUI库"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<!--<Style TargetType="Button">
<Setter Property="Foreground" Value="Red"/>
</Style>-->
</Window.Resources>
<Grid>
<StackPanel>
<Button Content="Button" Width="200" Height="30" Style="{x:Null}"/>
<mah:MetroTabControl>
<mah:MetroTabItem Header="AA" CloseButtonEnabled="True"/>
<mah:MetroTabItem Header="AA"/>
<mah:MetroTabItem Header="AA"/>
<mah:MetroTabItem Header="AA"/>
</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>
</Window>
④效果
2.HandyControl(handyorg.gitee.io)
①Nuget引入
② 项目中引入
<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>
③应用
<hc:Window x:Class="WPFHandyControl.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:WPFHandyControl"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:sys="clr-namespace:System;assembly=System.Runtime"
mc:Ignorable="d"
Title="MainWindow" Height="800" Width="800">
<Grid>
<StackPanel>
<Button Content="Burtton" Width="200" Style="{StaticResource ButtonDashedPrimary}"/>
<ProgressBar Width="200" Height="30" Minimum="0" Maximum="100" Value="45"/>
<Button Style="{StaticResource ButtonSuccess}" Content="这是一个按钮"/>
<Button Style="{StaticResource ButtonSuccess}" Content="这是一个按钮" Margin="0,0,0,0" hc:BorderElement.CornerRadius="15"/>
<Grid Margin="32">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<hc:NumericUpDown x:Name="UpDownGroups" HorizontalAlignment="Center" Value="2" Minimum="1" Maximum="3" Width="200" Style="{StaticResource NumericUpDownExtend}" hc:TitleElement.Title="列数" hc:TitleElement.TitleWidth="50" hc:TitleElement.TitlePlacement="Left"/>
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0,16,0,0">
<hc:ScrollViewer MaxHeight="300">
<hc:WaterfallPanel VerticalAlignment="Center" Width="300" Groups="{Binding Value,ElementName=UpDownGroups}" hc:PanelElement.FluidMoveBehavior="{StaticResource BehaviorXY200}">
<Border Height="100" Background="{DynamicResource PrimaryBrush}" Effect="{StaticResource EffectShadow1}" Margin="5">
<TextBlock Text="A" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
<Border Height="140" Background="{DynamicResource DangerBrush}" Effect="{StaticResource EffectShadow1}" Margin="5">
<TextBlock Text="B" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
<Border Height="100" Background="{DynamicResource SuccessBrush}" Effect="{StaticResource EffectShadow1}" Margin="5">
<TextBlock Text="C" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
<Border Height="170" Background="{DynamicResource InfoBrush}" Effect="{StaticResource EffectShadow1}" Margin="5">
<TextBlock Text="D" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
<Border Height="100" Background="{DynamicResource WarningBrush}" Effect="{StaticResource EffectShadow1}" Margin="5">
<TextBlock Text="E" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
</hc:WaterfallPanel>
</hc:ScrollViewer>
<hc:ScrollViewer Margin="32,0,0,0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden" MaxWidth="300">
<hc:WaterfallPanel VerticalAlignment="Center" Height="300" Orientation="Vertical" Groups="{Binding Value,ElementName=UpDownGroups}" hc:PanelElement.FluidMoveBehavior="{StaticResource BehaviorXY200}">
<Border Width="100" Background="{DynamicResource PrimaryBrush}" Effect="{StaticResource EffectShadow1}" Margin="5">
<TextBlock Text="A" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
<Border Width="140" Background="{DynamicResource DangerBrush}" Effect="{StaticResource EffectShadow1}" Margin="5">
<TextBlock Text="B" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
<Border Width="100" Background="{DynamicResource SuccessBrush}" Effect="{StaticResource EffectShadow1}" Margin="5">
<TextBlock Text="C" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
<Border Width="170" Background="{DynamicResource InfoBrush}" Effect="{StaticResource EffectShadow1}" Margin="5">
<TextBlock Text="D" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
<Border Width="100" Background="{DynamicResource WarningBrush}" Effect="{StaticResource EffectShadow1}" Margin="5">
<TextBlock Text="E" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
</Border>
</hc:WaterfallPanel>
</hc:ScrollViewer>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</hc:Window>
3.LiveCharts
①Nuget添加
②代码
<Window x:Class="WPFLiveCharts.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:WPFLiveCharts"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Grid>
<lvc:CartesianChart Zoom="Xy" DisableAnimations="False" Margin="10,1,-10,0" Grid.ColumnSpan="2">
<lvc:CartesianChart.Series>
<lvc:LineSeries Values="{Binding Values}"/>
<lvc:ColumnSeries Values="{Binding Values2}"/>
</lvc:CartesianChart.Series>
<lvc:CartesianChart.AxisX>
<lvc:Axis Title="时间" Labels="{Binding xLabel}" LabelsRotation="-45">
<lvc:Axis.Separator>
<lvc:Separator Step="1"/>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.AxisY>
<lvc:Axis Title="温度" MinValue="-10" MaxValue="100">
<lvc:Axis.Separator>
<lvc:Separator Step="5"/>
</lvc:Axis.Separator>
</lvc:Axis>
<lvc:Axis Title="压力" MinValue="0" MaxValue="10" Position="RightTop" >
<lvc:Axis.Separator>
<lvc:Separator Step="1"/>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisY>
</lvc:CartesianChart>
</Grid>
</Window>
using LiveCharts;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace WPFLiveCharts
{
internal class ViewModel
{
public ChartValues<double> Values { get; set; }
public ChartValues<double> Values2 { get; set; }
public ObservableCollection<string> xLabel { get; set; }
public ViewModel()
{
Values=new ChartValues<double>();
Values2 = new ChartValues<double>();
xLabel =new ObservableCollection<string>();
Task.Factory.StartNew(async () =>
{
Random random = new Random();
while (true)
{
await Task.Delay(200);
Values.Add(random.NextDouble()*10);
Values2.Add(random.NextDouble() * 10);
xLabel.Add(DateTime.Now.ToString("mm:ss"));
if (Values.Count>50)
{
Values.RemoveAt(0);
xLabel.RemoveAt(0);
Values2.RemoveAt(0);
}
}
});
}
}
}
4.DataGrid
<Window.Resources>
<x:Array Type="sys:String" x:Key="datas">
<sys:String>LUOZHIWEI</sys:String>
<sys:String>LUOZHIWEI</sys:String>
<sys:String>LUOZHIWEI</sys:String>
<sys:String>LUOZHIWEI</sys:String>
<sys:String>LUOZHIWEI</sys:String>
<sys:String>LUOZHIWEI</sys:String>
<sys:String>LUOZHIWEI</sys:String>
</x:Array>
</Window.Resources>
<Grid>
<DataGrid ItemsSource="{Binding Source={StaticResource datas}}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTextColumn Header="AA" Binding="{Binding [0]}"/>
<DataGridTextColumn Header="BB" Binding="{Binding [1]}"/>
</DataGrid.Columns>
</DataGrid>
</Grid>