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.pswp.cn/news/287419.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/287419.shtml
英文地址，請注明出處：http://en.pswp.cn/news/287419.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

量子計算機的現狀和趨勢

量子計算機的現狀和趨勢

量子計算機概述 計算機是一種新型的運算 它具有具有強大的并行處理數據的能力&#xff0c;可解決現有計算機難以運算的數學問題。因此&#xff0c;它成為世界各國戰略競爭的焦點。 量子計算機的優勢 量子計算機與現有的電子計算機以及正在研究的光計算機&#xff0c;生物計算機…
閱讀更多...
【空間數據庫】Windows操作系統PostgreSQL+PostGIS環境搭建圖文安裝教程

【空間數據庫】Windows操作系統PostgreSQL+PostGIS環境搭建圖文安裝教程

PostgreSQL是一種特性非常齊全的自由軟件的對象-關系型數據庫管理系統（ORDBMS），PostgreSQL支持大部分的SQL標準并且提供了很多其他現代特性，如復雜查詢、外鍵、觸發器、視圖、事務完整性、多版本并發控制等。同樣，PostgreSQL也可以用許多方法擴展，例如通過增加新的數據類…
閱讀更多...
Android之gravity=“center_vertical“和layout_gravity=“center“的效果

Android之gravity=“center_vertical“和layout_gravity=“center“的效果

1、兩控件分別加上2個下面的屬性 gravity="center_vertical" android:layout_gravity="center" 代碼如下 <LinearLayoutandroid:id="@+id/ll_no_love"android:layout_width="match_parent"android:layout_height="match…
閱讀更多...
《看聊天記錄都學不會C語言？太菜了吧》（3）人艱不拆，代碼都在談戀愛？！

《看聊天記錄都學不會C語言？太菜了吧》（3）人艱不拆，代碼都在談戀愛？！

若是大一學子或者是真心想學習剛入門的小伙伴可以私聊我&#xff0c;若你是真心學習可以送你書籍&#xff0c;指導你學習&#xff0c;給予你目標方向的學習路線&#xff0c;無套路&#xff0c;博客為證。 本系列文章將會以通俗易懂的對話方式進行教學&#xff0c;對話中將涵蓋…
閱讀更多...
spark java 計數_spark程序——統計包含字符a或者b的行數

spark java 計數_spark程序——統計包含字符a或者b的行數

本篇分析一個spark例子程序。程序實現的功能是&#xff1a;分別統計包含字符a、b的行數。java源碼如下&#xff1a;package sparkTest;import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.api.java.JavaSparkContext;import…
閱讀更多...
golang reflect

golang reflect

reflect包實現了運行時反射&#xff0c;允許程序操作任意類型的對象。典型用法是用靜態類型interface{}保存一個值&#xff0c;通過調用TypeOf獲取其動態類型信息&#xff0c;該函數返回一個Type類型值。調用ValueOf函數返回一個Value類型值&#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;對話中將涵蓋…
閱讀更多...
Android之華為平板打日志提示Permission denied

Android之華為平板打日志提示Permission denied

1 問題 $ adb logcat | grep ssfsafaf int logctl_get(): open /dev/hwlog_switch fail -1, 13. Permission deniedNote: log switch off, only log_main and log_events will have logs!2 解決辦法 1&#xff09;、如果是華為手機&#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;…
閱讀更多...
systemd ? ? ?kernel

systemd ? ? ?kernel

Systemd&#xff1a;Systemd的新特性&#xff1a;1.在系統引導的時候可以實現服務的并行啟動&#xff1b;2.能夠實現按需激活進程&#xff1b;在系統啟動時&#xff0c;需要隨系統啟動服務&#xff0c;其服務進程并沒有啟動&#xff0c;但是Systemd為每一個此類服務進程都注冊了…
閱讀更多...
Android之提示Method return type must not include a type variable or wildcard:

Android之提示Method return type must not include a type variable or wildcard:

1 問題 調用retrofit的時候提示錯誤如下 Method return type must not include a type variable or wildcard: io.reactivex.Observable<package.class<?>> 2 原因 我們知道英文單詞variable是多變的&#xff0c;易變的意思&#xff0c;然后 wildcard是未知數的…
閱讀更多...
《看聊天記錄都學不會C語言？太菜了吧》（5）打了一把游戲我學會了一個編程知識？

《看聊天記錄都學不會C語言？太菜了吧》（5）打了一把游戲我學會了一個編程知識？

若是大一學子或者是真心想學習剛入門的小伙伴可以私聊我&#xff0c;若你是真心學習可以送你書籍&#xff0c;指導你學習&#xff0c;給予你目標方向的學習路線&#xff0c;無套路&#xff0c;博客為證。 本系列文章將會以通俗易懂的對話方式進行教學&#xff0c;對話中將涵蓋…
閱讀更多...
最新文章

Copyright @ 2022~2023