微信公众号:Dotnet9,网站:Dotnet9。问题或建议,请网站留言;
如果您觉得Dotnet9对您有帮助,欢迎赞赏
文章目录
内容目录
- 实现效果
- 业务场景
- 编码实现
- 本文参考
- 源码下载
1.实现效果
支持系统主界面

2.业务场景
简单布局
3.编码实现
3.1 添加Nuget库
站长使用 .Net Core 3.1 创建的WPF工程,创建“PointOfSale”解决方案后,需要添加两个Nuget库:MaterialDesignThemes和MaterialDesignColors,上图的效果是使用该控件库实现的,非常强大。

3.2 工程结构
不需要截图,只修改了两个文件,App.xaml添加MD控件样式,MainWindow主窗口实现效果。
3.3 App.xaml引入MD控件样式
<Application x:Class="PointOfSale.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:PointOfSale"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--PRIMARY-->
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#FF999999"/>
<SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#333333"/>
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#FF808080"/>
<SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFFFFF"/>
<SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#FF4D4D4D"/>
<SolidColorBrush x:Key="PrimaryHueDarkForegroundBrush" Color="#FFFFFF"/>
<!--ACCENT-->
<SolidColorBrush x:Key="SecondaryAccentBrush" Color="#689f38"/>
<SolidColorBrush x:Key="SecondaryAccentForegroundBrush" Color="#FFFFFF"/>
</ResourceDictionary>
</Application.Resources>
</Application>
3.4 主窗体 MainWindow.xaml
整体布局,看上图加上下面的界面代码,本文基本就是布局 ,全在这个界面,直接看代码吧,不细说了:
<Window x:Class="PointOfSale.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:PointOfSale"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
Title="销售系统" MinHeight="600" MinWidth="1080" WindowStartupLocation="CenterScreen" WindowState="Maximized" FontFamily="Roboto">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>
<StackPanel Background="#FF363636">
<Grid Height="150" Background="Gray"/>
<ListView>
<ListViewItem>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ViewDashboard" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="控制面板" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="BoxVariant" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="产品" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="User" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="用户" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</ListViewItem>
<ListViewItem>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Settings" VerticalAlignment="Center" Margin="5"/>
<TextBlock Text="设置" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</ListViewItem>
</ListView>
</StackPanel>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="0.7*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<StackPanel Margin="10">
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Gray" Text="用户: " FontWeight="Bold"/>
<TextBlock Text="ADMIN" Foreground="LightGray" Margin="5 0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Gray" Text="现金出纳人: " FontWeight="Bold"/>
<TextBlock Text="2019-06-10 06:30AM" Foreground="LightGray" Margin="5 0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Gray" Text="现金出纳ID: " FontWeight="Bold"/>
<TextBlock Text="5" Foreground="LightGray" Margin="5 0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Gray" Text="顾客: " FontWeight="Bold"/>
<TextBlock Text="未选择客户" Foreground="LightGray" Margin="5 0"/>
</StackPanel>
</StackPanel>
<Border Grid.Row="1" BorderBrush="LightGray" BorderThickness="1" Margin="10" CornerRadius="5">
<ListView Margin="0 0 4 0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListViewItem>
<Grid Width="400">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="Assets/coke.png" Margin="5"/>
<StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="5">
<TextBlock Text="可乐 500ml" Foreground="Gray" FontSize="14"/>
<TextBlock Text="99124667764512" Foreground="Gray" FontSize="10"/>
</StackPanel>
<TextBlock Grid.Column="2" Text="¥ 5.00" Foreground="Gray" VerticalAlignment="Center" Margin="5"/>
<TextBlock Grid.Column="3" Text="3" Foreground="Gray" VerticalAlignment="Center" Margin="5"/>
<TextBlock Grid.Column="4" Text="$ 15.00" Foreground="Gray" VerticalAlignment="Center" Margin="5"/>
</Grid>
</ListViewItem>
</ListView>
</Border>
<Grid Grid.Row="2">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Style="{StaticResource MaterialDesignFloatingHintTextBox}" VerticalAlignment="Top" materialDesign:HintAssist.Hint="条形码" Margin="10"/>
<TextBox Grid.Row="0" Grid.Column="1" Style="{StaticResource MaterialDesignFloatingHintTextBox}" VerticalAlignment="Top" materialDesign:HintAssist.Hint="数量" Margin="10"/>
<TextBox Grid.Row="0" Grid.Column="2" Style="{StaticResource MaterialDesignFloatingHintTextBox}" VerticalAlignment="Top" materialDesign:HintAssist.Hint="优惠" Margin="10"/>
<TextBox Grid.Row="0" Grid.Column="3" Style="{StaticResource MaterialDesignFloatingHintTextBox}" VerticalAlignment="Top" materialDesign:HintAssist.Hint="添加" Margin="10"/>
<Button Grid.Column="1" Content="支付" Grid.Row="1" Grid.ColumnSpan="3" Margin="10" Width="Auto" Height="Auto"/>
</Grid>
</Grid>
<Grid Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="3*"/>
</Grid.RowDefinitions>
<materialDesign:ColorZone Margin="5">
<TextBlock Text="¥ 15.00" FontSize="40" HorizontalAlignment="Center" Margin="20"/>
</materialDesign:ColorZone>
<Border BorderBrush="LightGray" BorderThickness="1" CornerRadius="5" Grid.Row="1" Margin="5">
<Grid>
<Image Source="Assets/3263.jpg" Margin="10"/>
</Grid>
</Border>
<Grid Grid.Row="2" Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" Width="Auto" Height="Auto" Content="7" Margin="5"/>
<Button Grid.Column="1" Grid.Row="0" Width="Auto" Height="Auto" Content="8" Margin="5"/>
<Button Grid.Column="2" Grid.Row="0" Width="Auto" Height="Auto" Content="9" Margin="5"/>
<Button Grid.Column="0" Grid.Row="1" Width="Auto" Height="Auto" Content="4" Margin="5"/>
<Button Grid.Column="1" Grid.Row="1" Width="Auto" Height="Auto" Content="5" Margin="5"/>
<Button Grid.Column="2" Grid.Row="1" Width="Auto" Height="Auto" Content="6" Margin="5"/>
<Button Grid.Column="0" Grid.Row="2" Width="Auto" Height="Auto" Content="1" Margin="5"/>
<Button Grid.Column="1" Grid.Row="2" Width="Auto" Height="Auto" Content="2" Margin="5"/>
<Button Grid.Column="2" Grid.Row="2" Width="Auto" Height="Auto" Content="3" Margin="5"/>
<Button Grid.Column="0" Grid.Row="3" Width="Auto" Height="Auto" Content="清空" Margin="5"/>
<Button Grid.Column="1" Grid.Row="3" Width="Auto" Height="Auto" Content="0" Margin="5"/>
<Button Grid.Column="2" Grid.Row="3" Width="Auto" Height="Auto" Content="." Margin="5"/>
<Button Grid.ColumnSpan="2" Grid.Column="0" Grid.Row="4" Width="Auto" Height="Auto" Content="确定" Margin="5"/>
<Button Grid.Column="2" Grid.Row="4" Width="Auto" Height="Auto" Content="取消" Margin="5" Style="{StaticResource MaterialDesignFlatButton}"/>
</Grid>
</Grid>
</Grid>
</Window>
4.本文参考
Design com WPF大神的学习视频::Point Of Sale
开源控件库:MaterialDesignInXamlToolkit
本站对MD开源控件库的介绍:控件介绍
5.代码下载</>
Github:源码地址
除非注明,文章均由 Dotnet9 整理发布,欢迎转载。
转载请注明:
作者:Dotnet9
链接:https://dotnet9.com/6804.html
来源:Dotnet9
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
评论列表(5条)
我又来学习啦嘻嘻嘻~~~
@小飞机MLA:欢迎回来
有没有datagrid+treeview或ListView+treeview的控件?主要是想做一个可视多级菜单列表
@土豆泥:自己组合吧
@土豆泥:你这头像好给力,还是gif