C# WPF支付界面（Payment Screen）

阅读导航：

一、先看效果
二、本文背景
三、代码实现
四、文章参考
五、代码下载

文章目录

一、先看效果

二、本文背景

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 &amp; 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();
}