WPF 登录界面
运行效果:
添加两个Nuget库:MaterialDesignThemes和MaterialDesignColors;
App.xaml代码如下:
<Application x:Class="WPF_LoginUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WPF_LoginUI"
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.Indigo.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
主窗体xaml代码:
<Window x:Class="WPF_LoginUI.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:WPF_LoginUI"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
Title="Login" Height="500" Width="350" ResizeMode="NoResize" WindowStyle="None" WindowStartupLocation="CenterScreen">
<Grid>
<Rectangle Height="280" VerticalAlignment="Top">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF2281D1"></GradientStop>
<GradientStop Color="#FF34268A" Offset="1"></GradientStop>
<GradientStop Color="#FF33288B" Offset="0.5"></GradientStop>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Image Source="Images/home.png" Width="100" Height="100" VerticalAlignment="Top" Margin="20"></Image>
<Rectangle Width="280" Height="240" Fill="White" VerticalAlignment="Bottom" Margin="0,100" RadiusY="19.112" RadiusX="19.112">
<Rectangle.Effect>
<DropShadowEffect Color="#FFBBBBBB" Direction="0" BlurRadius="15" RenderingBias="Quality" ShadowDepth="1"></DropShadowEffect>
</Rectangle.Effect>
</Rectangle>
<Grid Width="280" Height="240" VerticalAlignment="Bottom" Margin="0,100">
<TextBlock Text="LOGIN" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="5" Foreground="Gray" FontSize="18"></TextBlock>
<StackPanel VerticalAlignment="Center" Margin="10">
<TextBox materialDesign:HintAssist.Hint="EMAIL" Style="{StaticResource MaterialDesignFloatingHintTextBox}" Margin="0,10" FontFamily="Champagne & Limousines" FontSize="18"></TextBox>
<PasswordBox materialDesign:HintAssist.Hint="SENHA" Style="{StaticResource MaterialDesignFloatingHintPasswordBox}" Margin="0,10" FontFamily="Champagne & Limousines" FontSize="18"></PasswordBox>
</StackPanel>
</Grid>
<Button VerticalAlignment="Bottom" Margin="0,85" Width="150" Content="LOGIN"></Button>
<TextBlock Text="ESQUECEU SUA SENHA?" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="50" Foreground="Gray" Cursor="Hand"></TextBlock>
</Grid>
</Window>