1. Dotnet9首页
  2. .NET
  3. WPF

C# WPF支付界面(Payment Screen)

时间如流水,只能流去不流回!

点赞再看,养成习惯,这是您给我创作的动力!

本文 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,上图的效果是使用该控件库实现的,非常强大。

C# WPF抽屉效果实现(C# WPF Material Design UI: Navigation Drawer & PopUp Menu)

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

四、文章参考

可直接打开大神视频学习,他的YouTube上还有很多代码视频哦,参考:
参考视频: Design com WPF:  https://www.youtube.com/watch?v=TLgsGqA3u5U

五、代码下载

https://github.com/Abel13/PaymentScreen

除非注明,文章均由 Dotnet9 整理发布,欢迎转载。

转载请注明:
作者:Dotnet9
链接:https://dotnet9.com/6773.html
来源:Dotnet9
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

发表评论

登录后才能评论