17WPF---UI库_wpf-ui-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_58563355/article/details/128395801

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>