WPF|黑暗模式的钱包支付仪表盘界面设计

收集下大家的意见，是否需要在文中贴上源码（文末会给出源码链接），请大家踊跃留言。

阅读目录

  1. 效果展示

  2. 准备

  3. 简单说明 + 源码

  4. 结尾（视频及源码仓库）

1. 效果展示

欣赏效果：

4cd35011424e4e2c05a67e2120bb2d05.gif

2. 准备

创建一个WPF工程，比如站长使用 .NET 7[1] 创建名为 WalletPayment 的WPF项目。

8ac0c587478c15e23326ac462022aaa5.png

这次我们不添加任何图片，只添加了一个Nuget包 MaterialDesignThemes[2]：

<PackageReference Include="MaterialDesignThemes" Version="4.6.0-ci176" />

原文作者使用的FontAwesome.WPF做为图标库，但该库自17年起就没升级了，对.NET 5\6\7编译有不兼容提示：已使用“.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8”而不是项目目标框架“net7.0-windows7.0”还原包“FontAwesome.WPF 4.7.0.9”。此包可能与项目不完全兼容。

对于上文 《WPF|如何在 WPF 中设计漂亮的社交媒体信息仪表板[3]》 使用到的该图标库站长也做了修改(仓库链接[4])。

3. 简单说明 + 源码

该仪表盘整体配色和布局非常优秀，给出几张站长觉得不错的部分截图：

左侧菜单

1f9df666178976e43df9fa3c4b0815a0.gif

按钮切换

039845b84bd445756390883e01ef0eb1.gif

MainWindow.xaml

界面的整体布局都在这个文件内：

<Window x:Class="WalletPayment.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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"mc:Ignorable="d"WindowStartupLocation="CenterScreen"WindowStyle="None"AllowsTransparency="True"Background="Transparent"Height="700"Width="1180"><Window.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="pack://application:,,,/WalletPayment;component/WalletPaymentRes.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary></Window.Resources><Grid><!--Grid Background--><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="auto" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Border CornerRadius="25 0 0 25" Width="220"><Border.Background><LinearGradientBrush StartPoint="0,0" EndPoint="0,1"><GradientStop Color="#343155" Offset="0" /><GradientStop Color="#3B2E58" Offset="1" /></LinearGradientBrush></Border.Background></Border><Border CornerRadius="0 25 25 0" MouseDown="Border_MouseDown" Grid.Column="1"><Border.Background><LinearGradientBrush StartPoint="0,0" EndPoint="0,1"><GradientStop Color="#3E3A65" Offset="0" /><GradientStop Color="#473765" Offset="1" /></LinearGradientBrush></Border.Background></Border></Grid><!--Grid Controls--><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="auto" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><!--Main Menu--><StackPanel Width="240"><StackPanel Orientation="Horizontal" Margin="0 50 20 40" HorizontalAlignment="Center"><materialDesign:PackIcon Kind="CheckCircle" Foreground="White" Width="35" Height="35" /><TextBlock Text="钱包夹" FontWeight="Bold" FontSize="20" VerticalAlignment="Center" Margin="10 0 0 0"Foreground="#FFFFFF" /></StackPanel><Button Style="{StaticResource activeMenuButton}"><Grid><StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><materialDesign:PackIcon Kind="FolderOutline" Style="{StaticResource buttonIcon}" /><TextBlock Text="钱包" Style="{StaticResource buttonText}" /></StackPanel><materialDesign:PackIcon Kind="ChevronRight" Visibility="Visible"Style="{StaticResource buttonIconExpand}" /></Grid></Button><Button Style="{StaticResource menuButton}"><Grid><StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><materialDesign:PackIcon Kind="BellOutline" Style="{StaticResource buttonIcon}" /><TextBlock Text="通知" Style="{StaticResource buttonText}" /></StackPanel><materialDesign:PackIcon Name="sal" Kind="ChevronRight"Style="{StaticResource buttonIconExpand}" /></Grid></Button><Button Style="{StaticResource menuButton}"><Grid><StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><materialDesign:PackIcon Kind="Money" Style="{StaticResource buttonIcon}" /><TextBlock Text="存款" Style="{StaticResource buttonText}" /></StackPanel><materialDesign:PackIcon Kind="ChevronRight" Style="{StaticResource buttonIconExpand}" /></Grid></Button><Button Style="{StaticResource menuButton}"><Grid><StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><materialDesign:PackIcon Kind="Clock" Style="{StaticResource buttonIcon}" /><TextBlock Text="记录" Style="{StaticResource buttonText}" /></StackPanel><materialDesign:PackIcon Kind="ChevronRight" Style="{StaticResource buttonIconExpand}" /></Grid></Button><Button Style="{StaticResource menuButton}"><Grid><StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><materialDesign:PackIcon Kind="CommentOutline" Style="{StaticResource buttonIcon}" /><TextBlock Text="消息" Style="{StaticResource buttonText}" /></StackPanel><materialDesign:PackIcon Kind="ChevronRight" Style="{StaticResource buttonIconExpand}" /></Grid></Button><Button Style="{StaticResource menuButton}"><Grid><StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><materialDesign:PackIcon Kind="Television" Style="{StaticResource buttonIcon}" /><TextBlock Text="监控" Style="{StaticResource buttonText}" /></StackPanel><materialDesign:PackIcon Kind="ChevronRight" Style="{StaticResource buttonIconExpand}" /></Grid></Button><Button Style="{StaticResource menuButton}"><Grid><StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><materialDesign:PackIcon Kind="CreditCard" Style="{StaticResource buttonIcon}" /><TextBlock Text="我的卡" Style="{StaticResource buttonText}" /></StackPanel><materialDesign:PackIcon Kind="ChevronRight" Style="{StaticResource buttonIconExpand}" /></Grid></Button><Separator Background="#e0e0e0" Opacity="0.5" Margin="50 15 60 15" /><Button Style="{StaticResource menuButton}"><Grid><StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><materialDesign:PackIcon Kind="FolderOutline" Style="{StaticResource buttonIcon}" /><TextBlock Text="账号" Style="{StaticResource buttonText}" /></StackPanel><materialDesign:PackIcon Kind="ChevronRight" Style="{StaticResource buttonIconExpand}" /></Grid></Button><Button Style="{StaticResource menuButton}"><Grid><StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><materialDesign:PackIcon Kind="CircleOutline" Style="{StaticResource buttonIcon}" /><TextBlock Text="退出" Style="{StaticResource buttonText}" /></StackPanel><materialDesign:PackIcon Kind="ChevronRight" Style="{StaticResource buttonIconExpand}" /></Grid></Button></StackPanel><!--Transaction Panel--><Grid Grid.Column="1"><!--Transfer Panel--><Border Style="{StaticResource border}" Margin="20 120 20 20"><StackPanel Margin="10 88 10 20"><TextBlock Text="流水" Foreground="#fcfcfc" TextAlignment="Center" FontSize="34"FontWeight="SemiBold" /><Grid Margin="0 12 0 22"><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Button Style="{StaticResource activeTabButton}" Content="支出" /><Button Style="{StaticResource tabButton}" Content="申请" Grid.Column="1" /></Grid><TextBlock Text="付款码" Style="{StaticResource textLabel}" /><TextBox Margin="0 10 0 5" Text="fad23b456g56fsd2sdf4sdj76urdetgx22d" TextAlignment="Center" /><TextBlock Text="请输入钱包id或目的地电子邮件" FontSize="14" Foreground="#e0e0e0" TextAlignment="Center"Opacity="0.5" Margin="0 0 0 20" /><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="auto" /><RowDefinition Height="*" /><RowDefinition Height="*" /></Grid.RowDefinitions><TextBlock Text="金额" Style="{StaticResource textLabel}" /><TextBox Grid.Row="1" Margin="0 10 5 20" Text="￥ 300.00" /><TextBlock Text="原因" Style="{StaticResource textLabel}" Grid.Column="1" /><TextBox Grid.Row="1" Grid.Column="1" Margin="5 10 0 20" Text="购买游戏" /><TextBlock Text="手续费 : ￥3" Style="{StaticResource textLabel}" Grid.Row="2" Margin="0 4 0 3" /><TextBlock Text="总共 : ￥303.00" Style="{StaticResource textLabel}" Grid.Row="2"Grid.Column="1" Margin="0 4 0 3" /></Grid><Button Style="{StaticResource sendButton}"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="SendOutline" Style="{StaticResource whiteIcon}"VerticalAlignment="Center" /><TextBlock Text="支付" Margin="10 0 0 0" FontWeight="SemiBold" /></StackPanel></Button></StackPanel></Border><!--Bank Card--><Border Style="{StaticResource cardBorder}" Margin="90 40 90 0"><Border.Background><LinearGradientBrush StartPoint="0,0" EndPoint="1,1"><GradientStop Color="#D489FF" Offset="-0.2" /><GradientStop Color="#7985FF" Offset="0.5" /><GradientStop Color="#6AD8FD" Offset="1" /></LinearGradientBrush></Border.Background><Grid><materialDesign:PackIcon Kind="Exchange" HorizontalAlignment="Left" VerticalAlignment="Top"Foreground="White" Opacity="0.9" Width="35" Height="35"Margin="15 0 0 0" /><materialDesign:PackIcon Kind="CheckCircle" HorizontalAlignment="Right" VerticalAlignment="Top"Foreground="White" Width="35" Height="35" Margin="0 0 70 0" /><TextBlock Text="钱包夹" FontWeight="Bold" Foreground="#FFFFFF" FontSize="16"HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0 5 15 0" /><StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"><TextBlock Text="5648" Style="{StaticResource bankCardNumber}" /><TextBlock Text="3500" Style="{StaticResource bankCardNumber}" /><TextBlock Text="9111" Style="{StaticResource bankCardNumber}" /><TextBlock Text="6100" Style="{StaticResource bankCardNumber}" /></StackPanel><TextBlock Text="￥ 8,520,00" Style="{StaticResource textLabel}" FontSize="20"FontWeight="SemiBold" VerticalAlignment="Bottom" Margin="13 0 0 5" /></Grid></Border></Grid><!--Info Panel--><StackPanel Grid.Column="2" Margin="0 0 20 0"><!--Top Menu--><StackPanel Orientation="Horizontal" Margin="20 40 20 0" HorizontalAlignment="Right"><Button Style="{StaticResource topMenuButton}" Margin="10 0 0 0" Width="300" Height="50"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="Filter" Style="{StaticResource topMenuIcon}" /><TextBlock Text="添加筛选" VerticalAlignment="Center" FontSize="14" Margin="8 0 0 0" /></StackPanel></Button><Button Style="{StaticResource topMenuButton}" Margin="10 0 0 0"><materialDesign:PackIcon Kind="BellOutline" Style="{StaticResource topMenuIcon}" /></Button><Button Style="{StaticResource topMenuButton}" Margin="10 0 0 0"><materialDesign:PackIcon Kind="Search" Style="{StaticResource topMenuIcon}" /></Button></StackPanel><!--Info Card--><Border Style="{StaticResource cardBorder}" Margin="20 31 20 0"><Border.Background><LinearGradientBrush StartPoint="0,0" EndPoint="1,1"><GradientStop Color="#9D85FA" Offset="0" /><GradientStop Color="#C77AFF" Offset="1" /></LinearGradientBrush></Border.Background><Grid><TextBlock Text="收支" Style="{StaticResource textLabel}" VerticalAlignment="Top"Margin="15 8 0 0" FontSize="16" FontWeight="SemiBold" /><TextBlock Text="￥ 9,150,00" Style="{StaticResource textLabel}" FontSize="24"FontWeight="SemiBold" VerticalAlignment="Center" Margin="15 0 0 10" /><StackPanel VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0 8 10 0"><Button Style="{StaticResource fillButton}"><materialDesign:PackIcon Kind="Renminbi" Style="{StaticResource whiteIcon}" /></Button><Button Style="{StaticResource fillButton}" Margin="0 5 0 0"><materialDesign:PackIcon Kind="Percent" Style="{StaticResource whiteIcon}" /></Button></StackPanel><StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="15 0 0 5"><Button Style="{StaticResource fillButton}"><materialDesign:PackIcon Kind="ArrowUpBold" Style="{StaticResource whiteIcon}" /></Button><TextBlock Text="+ ￥ 620.12" Style="{StaticResource textLabel}" Margin="10 0 20 0"FontWeight="SemiBold" VerticalAlignment="Center" /><Button Style="{StaticResource fillButton}"><materialDesign:PackIcon Kind="ArrowDownBold" Style="{StaticResource whiteIcon}" /></Button><TextBlock Text="- ￥ 920.60" Style="{StaticResource textLabel}" Margin="10 0 0 0"FontWeight="SemiBold" VerticalAlignment="Center" /></StackPanel></Grid></Border><!--Information Card--><Border Style="{StaticResource border}" Margin="20"><Grid Margin="15 13"><Grid.ColumnDefinitions><ColumnDefinition Width="auto" /><ColumnDefinition Width="auto" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="*" /><RowDefinition Height="*" /></Grid.RowDefinitions><TextBlock Text="信息" Foreground="#fcfcfc" FontSize="16" FontWeight="SemiBold"Grid.ColumnSpan="3" Margin="0 0 0 18" /><Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Top"Grid.ColumnSpan="3"><materialDesign:PackIcon Kind="Edit" Style="{StaticResource whiteIcon}" Width="14"Height="14" /></Button><materialDesign:PackIcon Kind="MapMarker" Style="{StaticResource whiteIcon}" Grid.Row="1"VerticalAlignment="Top" /><materialDesign:PackIcon Kind="Folder" Style="{StaticResource whiteIcon}" Grid.Row="2"VerticalAlignment="Top" /><TextBlock Text="地址 :" Style="{StaticResource textLabel}" Grid.Column="1" Grid.Row="1"Margin="10 0 10 18" /><TextBlock Text="钱包ID :" Style="{StaticResource textLabel}" Grid.Column="1" Grid.Row="2"Margin="10 0 10 0" /><TextBlock Text="Si Chuang" Style="{StaticResource textLabel}" Grid.Column="2" Grid.Row="1" /><TextBlock Text="3d2csd9ut7fvcepr65v83ndeyqt89bczb" Style="{StaticResource textLabel}"Grid.Column="2" Grid.Row="2" /></Grid></Border><!--Security Card--><Border Style="{StaticResource border}" Margin="20 0 20 0"><Grid Margin="15 10"><Grid.ColumnDefinitions><ColumnDefinition Width="auto" /><ColumnDefinition Width="auto" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="*" /><RowDefinition Height="*" /><RowDefinition Height="*" /></Grid.RowDefinitions><TextBlock Text="安全" Foreground="#fcfcfc" FontWeight="SemiBold" FontSize="16"Grid.ColumnSpan="3" Margin="0 0 0 15" /><Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Top"Grid.ColumnSpan="3"><materialDesign:PackIcon Kind="MoreHoriz" Style="{StaticResource whiteIcon}" Width="14"Height="14" /></Button><materialDesign:PackIcon Kind="Shield" Style="{StaticResource whiteIcon}" Grid.Row="1"VerticalAlignment="Center" /><materialDesign:PackIcon Kind="Key" Style="{StaticResource whiteIcon}" Grid.Row="2"VerticalAlignment="Center" /><materialDesign:PackIcon Kind="Lock" Style="{StaticResource whiteIcon}" Grid.Row="3"VerticalAlignment="Center" /><TextBlock Text="2FA 已启用" Style="{StaticResource textLabel}" Grid.Column="1" Grid.Row="1"Margin="10 0 0 0" VerticalAlignment="Center" /><TextBlock Text="Key" Style="{StaticResource textLabel}" Grid.Column="1" Grid.Row="2"Margin="10 0 0 0" VerticalAlignment="Center" /><TextBlock Text="密码" Style="{StaticResource textLabel}" Grid.Column="1" Grid.Row="3"Margin="10 0 0 0" VerticalAlignment="Center" /><Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Center"Grid.Column="2" Grid.Row="1" Content="修改" Margin="0 5 0 5" /><Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Center"Grid.Column="2" Grid.Row="2" Content="修改" Margin="0 5 0 5" /><Button Style="{StaticResource button}" HorizontalAlignment="Right" VerticalAlignment="Center"Grid.Column="2" Grid.Row="3" Content="修改" Margin="0 5 0 5" /></Grid></Border></StackPanel></Grid></Grid>
</Window>

MainWindow.xaml.cs

就一个窗体拖动方式：

using System.Windows;
using System.Windows.Input;namespace WalletPayment;public partial class MainWindow : Window
{public MainWindow(){InitializeComponent();}private void Border_MouseDown(object sender, MouseButtonEventArgs e){if (e.ChangedButton == MouseButton.Left)DragMove();}
}

WalletPaymentRes.xaml

资源文件，界面的所有按钮、图标、文本等的样式全在这个文件：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"><Style x:Key="menuButton" TargetType="Button"><Setter Property="Height" Value="47" /><Setter Property="Width" Value="217" /><Setter Property="Background" Value="Transparent" /><Setter Property="Foreground" Value="#f0f0f0" /><Setter Property="Margin" Value="0 0 0 0" /><Setter Property="FocusVisualStyle" Value="{x:Null}" /><Setter Property="HorizontalAlignment" Value="Right" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="20" Padding="20 0 20 0"BorderThickness="3 0 0 0" BorderBrush="Transparent"><ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center" /></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#21203b" /><Setter Property="Foreground" Value="#e9e9e9" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="20" Padding="20 0 20 0"BorderThickness="3 0 0 0"><Border.BorderBrush><LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"><GradientStop Color="#D489FF" Offset="0" /><GradientStop Color="#7985FF" Offset="0.5" /><GradientStop Color="#6AD8FD" Offset="1" /></LinearGradientBrush></Border.BorderBrush><ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center" /></Border></ControlTemplate></Setter.Value></Setter></Trigger><Trigger Property="IsMouseCaptured" Value="True"><Setter Property="Background" Value="#1a192e" /><Setter Property="Foreground" Value="White" /></Trigger></Style.Triggers></Style><Style x:Key="activeMenuButton" TargetType="Button" BasedOn="{StaticResource menuButton}"><Setter Property="Background" Value="#21203b" /><Setter Property="Foreground" Value="#e9e9e9" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="20" Padding="20 0 20 0"BorderThickness="3 0 0 0"><Border.BorderBrush><LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1"><GradientStop Color="#D489FF" Offset="0" /><GradientStop Color="#7985FF" Offset="0.5" /><GradientStop Color="#6AD8FD" Offset="1" /></LinearGradientBrush></Border.BorderBrush><ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Center" /></Border></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="buttonIcon" TargetType="materialDesign:PackIcon"><Setter Property="Foreground"Value="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" /><Setter Property="Width" Value="23" /><Setter Property="Height" Value="23" /></Style><Style x:Key="buttonText" TargetType="TextBlock"><Setter Property="Margin" Value="13 0 0 0" /><Setter Property="FontSize" Value="16" /><Setter Property="VerticalAlignment" Value="Center" /></Style><Style x:Key="buttonIconExpand" TargetType="materialDesign:PackIcon"><Setter Property="Foreground"Value="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" /><Setter Property="Width" Value="25" /><Setter Property="Height" Value="25" /><Setter Property="HorizontalAlignment" Value="Right" /><Setter Property="Visibility" Value="Hidden" /><Style.Triggers><DataTriggerBinding="{Binding Path=IsMouseOver, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Button}}"Value="True"><Setter Property="Visibility" Value="Visible" /></DataTrigger></Style.Triggers></Style><Style x:Key="border" TargetType="Border"><Setter Property="CornerRadius" Value="25" /><Setter Property="Padding" Value="10" /><Setter Property="Background" Value="#362F54" /><Setter Property="VerticalAlignment" Value="Top" /></Style><Style x:Key="tabButton" TargetType="Button"><Setter Property="Height" Value="50" /><Setter Property="Background" Value="Transparent" /><Setter Property="Foreground" Value="#fcfcfc" /><Setter Property="FocusVisualStyle" Value="{x:Null}" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" Padding="20 10 20 10" BorderThickness="0 0 0 2"BorderBrush="#3F375F"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Foreground" Value="#e9e9e9" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" Padding="20 10 20 10"BorderThickness="0 0 0 2"><Border.BorderBrush><LinearGradientBrush StartPoint="0,0" EndPoint="1,0"><GradientStop Color="#D489FF" Offset="0" /><GradientStop Color="#7985FF" Offset="0.5" /><GradientStop Color="#6AD8FD" Offset="1" /></LinearGradientBrush></Border.BorderBrush><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /></Border></ControlTemplate></Setter.Value></Setter></Trigger><Trigger Property="IsMouseCaptured" Value="True"><Setter Property="Foreground" Value="White" /></Trigger></Style.Triggers></Style><Style x:Key="activeTabButton" TargetType="Button" BasedOn="{StaticResource tabButton}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" Padding="20 10 20 10" BorderThickness="0 0 0 2"><Border.BorderBrush><LinearGradientBrush StartPoint="0,0" EndPoint="1,0"><GradientStop Color="#D489FF" Offset="0" /><GradientStop Color="#7985FF" Offset="0.5" /><GradientStop Color="#6AD8FD" Offset="1" /></LinearGradientBrush></Border.BorderBrush><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /></Border></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="textLabel" TargetType="TextBlock"><Setter Property="Foreground" Value="#fcfcfc" /></Style><Style TargetType="TextBox"><Setter Property="Background" Value="#3F375F" /><Setter Property="FocusVisualStyle" Value="{x:Null}" /><Setter Property="Padding" Value="15 12" /><Setter Property="BorderThickness" Value="0" /><Setter Property="FontSize" Value="12" /><Setter Property="Foreground" Value="#fcfcfc" /><Style.Resources><Style TargetType="{x:Type Border}"><Setter Property="CornerRadius" Value="15" /></Style></Style.Resources></Style><Style x:Key="sendButton" TargetType="Button"><Setter Property="Height" Value="50" /><Setter Property="Foreground" Value="#f0f0f0" /><Setter Property="Margin" Value="0 15 0 0" /><Setter Property="FocusVisualStyle" Value="{x:Null}" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border CornerRadius="20" Padding="20 0 20 0" BorderThickness="0"><Border.Background><LinearGradientBrush StartPoint="0,1" EndPoint="1,0"><GradientStop Color="#7985FF" Offset="0" /><GradientStop Color="#6AD8FD" Offset="1" /></LinearGradientBrush></Border.Background><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Foreground" Value="White" /><Setter Property="FontWeight" Value="Bold" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border CornerRadius="20" Padding="20 0 20 0" BorderThickness="0"><Border.Background><LinearGradientBrush StartPoint="0,1" EndPoint="1,0"><GradientStop Color="#7985FF" Offset="0.5" /><GradientStop Color="#6AD8FD" Offset="1" /></LinearGradientBrush></Border.Background><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /></Border></ControlTemplate></Setter.Value></Setter></Trigger></Style.Triggers></Style><Style x:Key="bankCardNumber" TargetType="TextBlock"><Setter Property="Foreground" Value="#fcfcfc" /><Setter Property="FontSize" Value="16" /><Setter Property="Margin" Value="17 0" /></Style><Style x:Key="whiteIcon" TargetType="materialDesign:PackIcon"><Setter Property="Foreground" Value="#f0f0f0" /><Setter Property="Width" Value="16" /><Setter Property="Height" Value="16" /></Style><Style x:Key="cardBorder" TargetType="Border"><Setter Property="Height" Value="150" /><Setter Property="CornerRadius" Value="25" /><Setter Property="Padding" Value="10" /><Setter Property="VerticalAlignment" Value="Top" /></Style><Style x:Key="topMenuIcon" TargetType="materialDesign:PackIcon"><Setter Property="Foreground" Value="#f0f0f0" /><Setter Property="Width" Value="18" /><Setter Property="Height" Value="18" /><Setter Property="Margin" Value="4" /></Style><Style x:Key="button" TargetType="Button"><Setter Property="Background" Value="Transparent" /><Setter Property="Foreground" Value="#f0f0f0" /><Setter Property="FocusVisualStyle" Value="{x:Null}" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="10" BorderBrush="#504373"Padding="10 8 10 8" BorderThickness="1"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#504373" /><Setter Property="Foreground" Value="#f0f0f0" /></Trigger><Trigger Property="IsMouseCaptured" Value="True"><Setter Property="Background" Value="#2f2745" /><Setter Property="Foreground" Value="White" /></Trigger></Style.Triggers></Style><Style x:Key="fillButton" TargetType="Button" BasedOn="{StaticResource ResourceKey=button}"><Setter Property="Background" Value="#6b5a96" /></Style><Style x:Key="topMenuButton" TargetType="Button" BasedOn="{StaticResource ResourceKey=button}"><Setter Property="Background" Value="#3C315B" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="15" BorderBrush="#504373"Padding="10 8 10 8" BorderThickness="1"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /></Border></ControlTemplate></Setter.Value></Setter></Style></ResourceDictionary>

4. 结尾（视频及源码仓库）

有兴趣可以看看原作者视频（非常推荐），以及下方给出的源码仓库链接：

参考：

  • 油管视频作者：C# WPF UI Academy[5]

  • 油管视频：C# WPF UI | How to Design Dark Mode Wallet Payment Dashboard in WPF[6]

  • 参考代码：WPF-Dark-Wallet-Payment[7]

  • 本文代码：WalletPayment[8]

参考资料

[1]

.NET 7: https://dotnet.microsoft.com/zh-cn/

[2]

MaterialDesignThemes: https://dotnet9.com/2020/12/Material-designinxaml-an-open-source-csharp-WPF-Control-Library

[3]

WPF|如何在 WPF 中设计漂亮的社交媒体信息仪表板: https://dotnet9.com/2022/05/How-to-Design-Beautiful-Social-Media-Information-Dashboards-in-WPF

[4]

仓库链接: https://github.com/dotnet9/TerminalMACS.ManagerForWPF/tree/master/src/WPFDesignDemos/Dashboard3

[5]

C# WPF UI Academy: https://www.youtube.com/channel/UCtVawNW7C2t6AX1vex6a_vw

[6]

C# WPF UI | How to Design Dark Mode Wallet Payment Dashboard in WPF: https://www.youtube.com/watch?v=i2cN_JfP9fw

[7]

WPF-Dark-Wallet-Payment: https://github.com/sajjad-z/WPF-Dark-Wallet-Payment

[8]

WalletPayment: https://github.com/dotnet9/TerminalMACS.ManagerForWPF/tree/master/src/WPFDesignDemos/WalletPayment

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/287419.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

《看聊天记录都学不会C语言？太菜了吧》（3）人艰不拆，代码都在谈恋爱？！

《看聊天记录都学不会C语言？太菜了吧》（3）人艰不拆，代码都在谈恋爱？！

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖…
阅读更多...
DB2常用命令

DB2常用命令

查看DB2License信息 DB2基础命令 转载于:https://www.cnblogs.com/arcer/p/5573317.html
阅读更多...
.NET7 Preview4之MapGroup

.NET7 Preview4之MapGroup

这篇是“闻(看)香(码)识(学)女(技)人(术)”。这也是一个有意思的功能&#xff0c;路由分组&#xff0c;啥也不说了&#xff0c;看代码看结果&#xff1a;using Microsoft.AspNetCore.Http.HttpResults; using Microsoft.AspNetCore.OpenApi;var builder WebApplication.Create…
阅读更多...
【空间数据库】ArcGIS 10.6 Database_Server_Desktop安装、连接数据库服务、创建企业级数据库（附server10.6.ecp）

【空间数据库】ArcGIS 10.6 Database_Server_Desktop安装、连接数据库服务、创建企业级数据库（附server10.6.ecp）

由于作者一直使用SQL Server 2008 R2开发版，之前在ArcGIS中创建企业级数据库都是基于单独安装的SQL Server 2008 R2开发版，今天我们演示安装ArcGIS10.6自带的数据库服务（SQL Server 2014 Express版本）、连接数据库服务和创建数据库。 首先，我们来看一下完整的ArcGIS10.6安…
阅读更多...
（一）easyUI之树形网络

（一）easyUI之树形网络

树形网格&#xff08;TreeGrid&#xff09;可以展示有限空间上带有多列和复杂数据电子表 一、案例一&#xff1a;按tree的数据结构来生成 前台<% page language"java" contentType"text/html; charsetUTF-8"pageEncoding"UTF-8"%> <!DO…
阅读更多...
《看聊天记录都学不会C语言？太菜了吧》（4）零基础的我原来早就学会编程了？

《看聊天记录都学不会C语言？太菜了吧》（4）零基础的我原来早就学会编程了？

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖…
阅读更多...
二叉树结构 codevs 1029 遍历问题

二叉树结构 codevs 1029 遍历问题

codevs 1029 遍历问题 时间限制: 1 s空间限制: 128000 KB题目等级 : 钻石 Diamond题目描述 Description我们都很熟悉二叉树的前序、中序、后序遍历&#xff0c;在数据结构中常提出这样的问题&#xff1a;已知一棵二叉树的前序和中序遍历&#xff0c;求它的后序遍历&#xff0c;…
阅读更多...
java的概率的程序_java实现一个抽奖概率类

java的概率的程序_java实现一个抽奖概率类

在一些项目需求中&#xff0c;可能会遇到抽奖问题&#xff0c;如提供一系列奖品及获奖概率&#xff0c;要求根据概率返回每次抽到的奖品。以下是本人在实际项目中写的一个抽奖工具类&#xff0c;与大家共同分享&#xff1a;import java.util.ArrayList;import java.util.List;i…
阅读更多...
【空间数据库】ArcGIS10.6连接PostgreSQL数据库并显示数据至ArcMap中

【空间数据库】ArcGIS10.6连接PostgreSQL数据库并显示数据至ArcMap中

前面的文章《【开源数据库】Windows操作系统PostgreSQL+PostGIS环境搭建图文安装教程 》讲解了在Windows上安装开源GIS和开源数据库。本文接着来讲采用ArcGIS 10.6连接PostgreSQL数据库，并加载矢量数据到ArcMap中。 我们已经在pgAdmin中创建了一个空间数据库test，并导入了Sha…
阅读更多...
算法-低位优先的字符串排序

算法-低位优先的字符串排序

低位优先的字符串排序相当于是对键索引计数方法的一个扩展&#xff0c;主要用于处理固定长度字符串&#xff0c;比如说手机号&#xff0c;固定电话&#xff0c;银行卡卡号&#xff0c;字符串的长度为N&#xff0c;从右向左开始进行每个键作为值开始遍历&#xff0c;实现比较简单…
阅读更多...
使用 AgileConfig 动态配置 NLog

使用 AgileConfig 动态配置 NLog

NLog 是我们在 .NET 领域使用非常广泛的日志组件。它默认使用 xml 来维护它的配置。最近有几个同学问我当使用 AgileConfig 的时候如何配置 NLog 。因为 AgileConfig 不支持集成 xml 格式的配置。其实 NLog 是支持从 appsettings.json / IConfiguration 读取配置的&#xff0c;…
阅读更多...
《看聊天记录都学不会C语言？太菜了吧》（5）打了一把游戏我学会了一个编程知识？

《看聊天记录都学不会C语言？太菜了吧》（5）打了一把游戏我学会了一个编程知识？

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖…
阅读更多...
【QGIS入门实战精品教程】2.1：初识QGIS软件

【QGIS入门实战精品教程】2.1：初识QGIS软件

从今天开始&#xff0c;我们一起来学习一款免费开源、对机器要求低、功能强大的GIS软件&#xff1a;QGIS &#xff01; 一、QGIS简介 QGIS&#xff08;原称Quantum GIS&#xff09;是一个自由软件的桌面GIS软件。它提供数据的显示、编辑和分析功能。 QGIS是一个用户界面友好的…
阅读更多...
使用 VS Code + Markdown 编写 PDF 文档

使用 VS Code + Markdown 编写 PDF 文档

1背景介绍 作为一个技术人员&#xff0c;基本都需要编写技术相关文档&#xff0c;而且大部分技术人员都应该掌握 Markdown 这个技能&#xff0c;使用 Markdown 来编写并生成 PDF 文档将会是一个不错的体验&#xff0c;以下就介绍下如何使用 VS Code Markdown 来编写 PDF…
阅读更多...
《看聊天记录都学不会C语言？太菜了吧》（6）编程很难吗？差一点就学不会了呢！

《看聊天记录都学不会C语言？太菜了吧》（6）编程很难吗？差一点就学不会了呢！

若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我&#xff0c;若你是真心学习可以送你书籍&#xff0c;指导你学习&#xff0c;给予你目标方向的学习路线&#xff0c;无套路&#xff0c;博客为证。 本系列文章将会以通俗易懂的对话方式进行教学&#xff0c;对话中将涵盖…
阅读更多...
【ArcGIS风暴】气象台站气温（降水）矢量数据插值成栅格气温（降水）空间数据

【ArcGIS风暴】气象台站气温（降水）矢量数据插值成栅格气温（降水）空间数据

关于文本格式的气象数据生成Shapefile矢量数据的过程，可以参照文章《ArcGIS 10.2导入Excel数据X、Y坐标（经纬度、平面坐标），生成Shapefile点数据图层》。本文在前面生成的具有气温和降水属性的气象台站矢量数据的基础上，通过栅格插值，栅格裁剪等过程生成空间分布的气温和…
阅读更多...
Android studio之导入新库提示Add library ‘Gradle*****@aar‘ to classpath

Android studio之导入新库提示Add library ‘Gradle*****@aar‘ to classpath

1 问题 as导入第三方库在依赖的基类build.gradle里面添加如下 implementation com.truizlop.sectionedrecyclerview:library:1.2.0 提示错误如下 2 原因 implementation 单层引用&#xff0c;只引用当前aar包层&#xff0c; api 多层引用&#xff0c;引用当前aar包层&#…
阅读更多...
Windows 查看端口占用

Windows 查看端口占用

查看 Windows 端口占用情况 在 Windows 命令行窗口下执行一下命令 查看所有端口占用情况netstat -ano 查看特定端口的占用情况netstat -aon|findstr "8080" 查看PID对应的进程tasklist|findstr "2212" 实例 博主碰到的是8080端口被占用了&#xff0c;如下图…
阅读更多...
Android quot;QR二维码扫描quot;

Android quot;QR二维码扫描quot;

支持灯 扫描结果 支持 抄、分享、浏览打开&#xff08;超链接&#xff09; 自己主动保存扫描记录 划删除 和源代码 git: http://git.oschina.net/892642257/QRCode csdn(0分): http://download.csdn.net/detail/onlyonecoder/7713589 版权声明&#xff1a;本文博主原创文章。博…
阅读更多...
ASP.NET Core中的依赖注入（4）: 构造函数的选择与服务生命周期管理

ASP.NET Core中的依赖注入（4）: 构造函数的选择与服务生命周期管理

ServiceProvider最终提供的服务实例都是根据对应的ServiceDescriptor创建的&#xff0c;对于一个具体的ServiceDescriptor对象来说&#xff0c;如果它的ImplementationInstance和ImplementationFactory属性均为Null&#xff0c;那么ServiceProvider最终会利用其ImplementationT…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023