UI使用MaterialDesign,先看界面
一、界面
极简登录界面
二、下载MaterialDesign包
我使用的是VS2019,选择要引入MaterialDesign包的项目,鼠标右击选择NuGet程勋包
在浏览页签中输入MaterialDesign,下载MaterialDesignColors和MaterialDesignThemes两个包
安装成功后,在已安装页签中能看到这两个UI包
三、引用MaterialDesign
可以在GitHub下载源码,源码里有使用的Demo
GitHub地址:GitHub - MaterialDesignInXAML/MaterialDesignInXamlToolkit: Google's Material Design in XAML & WPF, for C# & VB.Net.
在App.xaml中引入要使用的包
<Application x:Class="Login_WPF.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Login_WPF"
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 Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
四、登录界面代码
Xaml代码:文章来源:https://www.toymoban.com/news/detail-768000.html
<Window x:Class="Login_WPF.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"
TextElement.Foreground="{DynamicResource MaterialDesignBody}"
Background="{x:Null}"
AllowsTransparency="True"
WindowStyle="None"
WindowStartupLocation="CenterScreen"
xmlns:local="clr-namespace:Login_WPF"
mc:Ignorable="d"
Title="MainWindow" Height="760" Width="450">
<materialDesign:Card UniformCornerRadius="15" Background="{DynamicResource MaterialDesignPaper}" Margin="25"
materialDesign:ShadowAssist.ShadowDepth="Depth4">
<materialDesign:DialogHost CloseOnClickAway="True" x:Name="DialogHost">
<StackPanel>
<materialDesign:PopupBox HorizontalAlignment="Right" Margin="0 20 20 0"
PlacementMode="BottomAndAlignRightEdges" StaysOpen="False" Height="25">
<StackPanel>
<StackPanel Margin="16 10 0 6" Orientation="Horizontal" HorizontalAlignment="Center">
<TextBlock VerticalAlignment="Center" Text="Dark"/>
<ToggleButton Cursor="Hand" ToolTip="Enabled Dark Mode" Margin="12 0 8 0"
x:Name="themeToggle" IsChecked="{Binding IsDarkTheme}"
Click="themeToggle_Click"></ToggleButton>
</StackPanel>
<Button ToolTip="Having Trouble Logging In?" Margin="0 8 0 0" Content="Help"></Button>
<Button x:Name="btn_exit" ToolTip="Close Application" Content="Exit" Click="exitApp"/>
</StackPanel>
</materialDesign:PopupBox>
<Image Margin="0 60 0 5" Height="100" Source="wind.png"/>
<TextBlock Margin="0 25 0 5" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Text="Welcome Back"/>
<TextBlock FontSize="17" FontWeight="SemiBold" HorizontalAlignment="Center" Text="Log in to your account"/>
<TextBox Margin="0 50 0 0" x:Name="txtUserName" Width="300" FontSize="18"
materialDesign:HintAssist.Hint="Enter Username" BorderThickness="2"
BorderBrush="{DynamicResource MaterialDesignDivider}"
Style="{StaticResource MaterialDesignOutlinedTextBox}"/>
<PasswordBox Margin="0 20 0 0" x:Name="txtPassword" Width="300" FontSize="18"
materialDesign:HintAssist.Hint="Enter Password" BorderThickness="2"
BorderBrush="{DynamicResource MaterialDesignDivider}"
Style="{StaticResource MaterialDesignOutlinedPasswordBox}"/>
<Button Margin="0 20 0 0" x:Name="loginBtn" Width="300" Height="53" FontSize="18"
materialDesign:ButtonAssist.CornerRadius="10" Content="LOG IN" materialDesign:ShadowAssist.ShadowDepth="Depth0"
Style="{StaticResource MaterialDesignFlatMidBgButton}"/>
<Button Margin="0 20 0 0" x:Name="signupBtn" Width="300" Height="53" FontSize="18"
materialDesign:ButtonAssist.CornerRadius="10" Content="Create Account" materialDesign:ShadowAssist.ShadowDepth="Depth0"
Style="{StaticResource MaterialDesignFlatButton}"/>
</StackPanel>
</materialDesign:DialogHost>
</materialDesign:Card>
</Window>
.cs代码文章来源地址https://www.toymoban.com/news/detail-768000.html
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using MaterialDesignThemes.Wpf;
namespace Login_WPF
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public bool IsDarkTheme { get; set; }
private readonly PaletteHelper paletteHelper = new PaletteHelper();
public MainWindow()
{
InitializeComponent();
}
private void themeToggle_Click(object sender, RoutedEventArgs e)
{
ITheme theme = paletteHelper.GetTheme();
if (IsDarkTheme = theme.GetBaseTheme() == BaseTheme.Dark)
{
IsDarkTheme = false;
theme.SetBaseTheme(Theme.Light);
}
else
{
IsDarkTheme = true;
theme.SetBaseTheme(Theme.Dark);
}
paletteHelper.SetTheme(theme);
}
private void exitApp(object sender, RoutedEventArgs e)
{
Application.Current.Shutdown();
}
protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
{
base.OnMouseLeftButtonDown(e);
DragMove();
}
}
}
到了这里,关于WPF 极简风格登录界面的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!