时间如流水,只能流去不流回!
点赞再看,养成习惯,这是您给我创作的动力!
本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform、WPF、ASP.NET Core、Xamarin.Forms等,亦有C++桌面相关的Qt Quick和Qt Widgets等,只分享自己熟悉的、自己会的。
阅读导航:
- 一、先看效果
- 二、本文背景
- 三、代码实现
- 四、文章参考
- 五、代码下载
一、先看效果

二、本文背景
YouTube Design com WPF 大神处习得,简单的布局界面,使用的开源 C# WPF控件库 MaterialDesignInXAML ,本站曾有介绍:开源C# WPF控件库《MaterialDesignInXAML》。
三、代码实现
3.1 添加Nuget库
站长使用.Net Core 3.1创建的WPF工程,创建“PaymentScreen”解决方案后,需要添加两个Nuget库:MaterialDesignThemes和MaterialDesignColors,上图的效果是使用该控件库实现的,非常强大。

3.2 工程结构
不需要截图,只修改了两个文件,App.xaml添加MD控件样式,MainWindow主窗口实现效果。
3.3 App.xaml引入MD控件样式
<Application x:Class="PaymentScreen.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:PaymentScreen"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--PRIMARY-->
<SolidColorBrush x:Key="PrimaryHueLightBrush" Color="#FF3C64D2"/>
<SolidColorBrush x:Key="PrimaryHueLightForegroundBrush" Color="#333333"/>
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#FF325AC8"/>
<SolidColorBrush x:Key="PrimaryHueMidForegroundBrush" Color="#FFFFFF"/>
<SolidColorBrush x:Key="PrimaryHueDarkBrush" Color="#FF2850BE"/>
<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="PaymentScreen.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:PaymentScreen"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
MouseDown="Window_MouseDown"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" ResizeMode="NoResize" Background="{x:Null}"
AllowsTransparency="True" WindowStyle="None" FontFamily="Champagne & Limousines" WindowStartupLocation="CenterScreen">
<Border Background="White" CornerRadius="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border CornerRadius="10 0 0 10">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF15206A" Offset="0"/>
<GradientStop Color="#FF196176" Offset="1"/>
<GradientStop Color="#FF202F8D" Offset="0.245"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock FontSize="15" Text="支付" Foreground="{StaticResource PrimaryHueDarkForegroundBrush}" HorizontalAlignment="Center"/>
<TextBlock FontSize="80" Text="¥ 238" Foreground="{StaticResource PrimaryHueDarkForegroundBrush}"/>
</StackPanel>
<Button VerticalAlignment="Bottom" Background="{x:Null}" BorderBrush="{x:Null}">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ArrowLeft" Width="10" Height="10" VerticalAlignment="Center"/>
<TextBlock Text="取消付款" FontSize="10" Margin="5"/>
</StackPanel>
</Button>
</Grid>
</Border>
<StackPanel Grid.Column="1" Margin="20">
<TextBlock Text="付款" FontSize="45" HorizontalAlignment="Left"/>
<TextBlock Text="填写信用卡开始" FontSize="20" Margin="0 10"/>
<Border Width="257" Height="162" CornerRadius="5">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2E2E2E" Offset="0"/>
<GradientStop Color="#FF3E3D3D" Offset="1"/>
<GradientStop Color="#FF3E3E3E" Offset="0.43"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Image Height="20" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="20" Source="https://img.dotnet9.com/logo.png"/>
<Border CornerRadius="5" Height="20" Width="40" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20" Background="#FF474747"/>
<Grid Width="200" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="0000" HorizontalAlignment="Center" Foreground="LightGray" FontFamily="Global Monospace"/>
<TextBlock Grid.Column="1" Text="0000" HorizontalAlignment="Center" Foreground="LightGray" FontFamily="Global Monospace"/>
<TextBlock Grid.Column="2" Text="0000" HorizontalAlignment="Center" Foreground="LightGray" FontFamily="Global Monospace"/>
<TextBlock Grid.Column="3" Text="0000" HorizontalAlignment="Center" Foreground="LightGray" FontFamily="Global Monospace"/>
</Grid>
<Grid VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Margin="20" Grid.Column="0">
<TextBlock Text="持卡人" FontSize="7" Foreground="LightGray"/>
<TextBlock Text="姓名" FontSize="12" Foreground="LightGray" FontFamily="OCR A Extended" />
</StackPanel>
<StackPanel Margin="20" Grid.Column="1">
<TextBlock Text="到期" FontSize="7" Foreground="LightGray"/>
<TextBlock Text="日/月" FontSize="12" Foreground="LightGray" FontFamily="OCR A Extended" />
</StackPanel>
</Grid>
</Grid>
</Border>
<Button Margin="50" Content="立即付款"/>
</StackPanel>
<Button VerticalAlignment="Top" Margin="10" HorizontalAlignment="Right" Grid.Column="1"
Style="{StaticResource MaterialDesignFlatButton}" Click="ButtonClose_Click">
<materialDesign:PackIcon Kind="Close"/>
</Button>
</Grid>
</Border>
</Window>
后台简单的事件
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}
private void ButtonClose_Click(object sender, RoutedEventArgs e)
{
this.Close();
}
四、文章参考
可直接打开大神视频学习,他的YouTube上还有很多代码视频哦,参考:
参考视频: Design com WPF: https://www.youtube.com/watch?v=TLgsGqA3u5U
五、代码下载
https://github.com/Abel13/PaymentScreen
除非注明,文章均由 Dotnet9 整理发布,欢迎转载。
转载请注明:
作者:Dotnet9
链接:https://dotnet9.com/6773.html
来源:Dotnet9
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。