WPF 模仿QQ登录界面

参考

• 豆包
• https://blog.csdn.net/q913777031/article/details/119443111
• https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.media.bitmapscalingmode?view=windowsdesktop-8.0
• https://www.cnblogs.com/qwqwQAQ/p/13597091.html
• https://www.peisebiao.com/info/jianbian.php
• https://www.cnblogs.com/lovezhangyu/p/10342874.html
• https://blog.csdn.net/qq_56921730/article/details/148316282
• https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/graphics-multimedia/how-to-animate-the-position-or-color-of-a-gradient-stop?view=netframeworkdesktop-4.8
• https://blog.csdn.net/m0_57355372/article/details/126995981
• https://www.cnblogs.com/douzi2/p/17002585.html
• https://blog.csdn.net/zhy29563/article/details/118630419
• https://layui.dev/docs/2/color/#seven
• https://blog.csdn.net/u010989503/article/details/88887457
• https://blog.csdn.net/weixin_38110122/article/details/125392180
• https://www.iconfont.cn/

环境

软件/系统	版本	说明
Windows	windows 10 专业版 22H2 64 位操作系统, 基于 x64 的处理器
Microsoft Visual Studio	Community 2022 (64 位) - Current 版本 17.13.6
.NET	6.0
Prism.DryIoc	8.1.97	nuget依赖包

预览

部分代码

1. MainWindow.xaml

   <Window
   	x:Class="QQLogin.Views.MainWindow"
   	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   	xmlns:prism="http://prismlibrary.com/"
   	Title="{Binding Title}"
   	Width="330"
   	Height="450"
   	prism:ViewModelLocator.AutoWireViewModel="True"
   	AllowsTransparency="True"
   	Background="Transparent"
   	ResizeMode="NoResize"
   	WindowStartupLocation="CenterScreen"
   	WindowStyle="None">
   	<Border CornerRadius="6">
   		<Border.Background>
   			<LinearGradientBrush x:Name="GradientBrush" StartPoint="0,0.3" EndPoint="0.8,1">
   				<GradientStop Offset="1" Color="#d9a7c7" />
   				<GradientStop Offset="0.5" Color="#fbd786" />
   				<GradientStop Offset="0" Color="#fffcdc" />
   			</LinearGradientBrush>
   		</Border.Background>
   		<Border.Triggers>
   			<EventTrigger RoutedEvent="Loaded">
   				<BeginStoryboard>
   					<Storyboard AutoReverse="True" RepeatBehavior="Forever">
   						<!--  动画 1: 改变渐变起始点  -->
   						<PointAnimation
   							AutoReverse="True"
   							RepeatBehavior="Forever"
   							Storyboard.TargetName="GradientBrush"
   							Storyboard.TargetProperty="StartPoint"
   							From="0,0.3"
   							To="0.3,0"
   							Duration="0:0:3" />
   
   						<!--  动画 2: 改变渐变结束点  -->
   						<PointAnimation
   							AutoReverse="True"
   							RepeatBehavior="Forever"
   							Storyboard.TargetName="GradientBrush"
   							Storyboard.TargetProperty="EndPoint"
   							From="0.8,1"
   							To="1,0.8"
   							Duration="0:0:3" />
   					</Storyboard>
   				</BeginStoryboard>
   			</EventTrigger>
   		</Border.Triggers>
   		<StackPanel Orientation="Vertical">
   			<StackPanel.Style>
   				<Style TargetType="StackPanel">
   					<Setter Property="Background" Value="Transparent" />
   				</Style>
   			</StackPanel.Style>
   
   			<StackPanel
   				Margin="0,4,4,0"
   				HorizontalAlignment="Right"
   				Orientation="Horizontal">
   				<Border BorderThickness="1">
   					<Image
   						Width="20"
   						Height="20"
   						RenderOptions.BitmapScalingMode="HighQuality"
   						SnapsToDevicePixels="True"
   						Source="/Images/help.png" />
   				</Border>
   				<Border BorderThickness="1">
   					<Image
   						Width="20"
   						Height="20"
   						RenderOptions.BitmapScalingMode="HighQuality"
   						Source="/Images/关闭.png"
   						Stretch="Fill" />
   				</Border>
   			</StackPanel>
   			<Ellipse
   				Width="90"
   				Height="90"
   				Margin="0,60,0,0">
   				<Ellipse.Fill>
   					<ImageBrush ImageSource="/Images/userimg.jpg" Stretch="UniformToFill" />
   				</Ellipse.Fill>
   			</Ellipse>
   			<Border>
   				<Border.Style>
   					<Style TargetType="Border">
   						<Setter Property="Margin" Value="0,16,0,0" />
   						<Setter Property="Width" Value="240" />
   						<Setter Property="Height" Value="34" />
   						<Setter Property="CornerRadius" Value="6" />
   						<Setter Property="BorderThickness" Value="0" />
   						<Setter Property="Background" Value="#FFF" />
   					</Style>
   				</Border.Style>
   				<TextBox
   					Width="220"
   					Height="26"
   					VerticalContentAlignment="Center"
   					BorderBrush="Transparent"
   					BorderThickness="0"
   					FontSize="14" />
   			</Border>
   			<Border>
   				<Border.Style>
   					<Style TargetType="Border">
   						<Setter Property="Margin" Value="0,20,0,0" />
   						<Setter Property="Width" Value="240" />
   						<Setter Property="Height" Value="34" />
   						<Setter Property="CornerRadius" Value="6" />
   						<Setter Property="BorderThickness" Value="0" />
   						<Setter Property="Background" Value="#FFF" />
   					</Style>
   				</Border.Style>
   				<PasswordBox
   					Width="220"
   					Height="26"
   					VerticalContentAlignment="Center"
   					BorderBrush="Transparent"
   					BorderThickness="0"
   					FontSize="14" />
   			</Border>
   			<StackPanel
   				Width="240"
   				Margin="0,14,0,0"
   				Orientation="Horizontal">
   				<RadioButton
   					x:Name="AgreeLicenseBtn"
   					Command="{Binding AgreeLicenseCommand}"
   					CommandParameter="{Binding ElementName=AgreeLicenseBtn, Path=IsChecked}"
   					IsChecked="{Binding AgreeLicenseState}" />
   				<TextBlock FontSize="11">
   					已阅读并同意
   				</TextBlock>
   				<TextBlock FontSize="11" Foreground="#31bdec">
   					服务协议
   				</TextBlock>
   				<TextBlock FontSize="11">
   					和
   				</TextBlock>
   				<TextBlock FontSize="11" Foreground="#31bdec">
   					和QQ隐私保护指引
   				</TextBlock>
   			</StackPanel>
   			<Button>
   				<Button.Content>
   					登录
   				</Button.Content>
   				<Button.Style>
   					<Style TargetType="Button">
   						<Setter Property="Width" Value="240" />
   						<Setter Property="Height" Value="38" />
   						<Setter Property="FontSize" Value="14" />
   						<Setter Property="FontWeight" Value="Bold" />
   						<Setter Property="Margin" Value="0,20,0,0" />
   						<Setter Property="Background" Value="#9CD8FF" />
   						<Setter Property="BorderBrush" Value="Transparent" />
   						<Setter Property="Foreground" Value="#FFFFFF" />
   						<Style.Triggers>
   							<DataTrigger Binding="{Binding ElementName=AgreeLicenseBtn, Path=IsChecked}" Value="True">
   								<Setter Property="Background" Value="#1e9fff" />
   							</DataTrigger>
   						</Style.Triggers>
   					</Style>
   				</Button.Style>
   				<Button.Template>
   					<ControlTemplate TargetType="{x:Type Button}">
   						<Border
   							Background="{TemplateBinding Background}"
   							BorderBrush="{TemplateBinding Control.BorderBrush}"
   							BorderThickness="1"
   							CornerRadius="7,7,7,7">
   							<ContentPresenter
   								HorizontalAlignment="Center"
   								VerticalAlignment="Center"
   								Content="{TemplateBinding ContentControl.Content}" />
   						</Border>
   					</ControlTemplate>
   				</Button.Template>
   			</Button>
   			<StackPanel
   				Width="Auto"
   				Margin="0,50,0,0"
   				HorizontalAlignment="Center"
   				Orientation="Horizontal">
   				<TextBlock FontSize="12" Foreground="#31bdec">
   					扫码登录
   				</TextBlock>
   				<TextBlock
   					Width="1"
   					Height="12"
   					Margin="6,2,6,2"
   					Background="#FFF"
   					Text=" " />
   				<TextBlock FontSize="12" Foreground="#31bdec">
   					更多选项
   				</TextBlock>
   			</StackPanel>
   		</StackPanel>
   
   	</Border>
   
   
   </Window>