使用XAML语言仿写BiliBil登录界面

 

实现步骤

实现左右布局

• 使用了Grid两列的网格布局，第一列宽度占35%，第二列宽度占65%。
• 使用容器布局Border包裹左右布局内容，设置背景色、设置圆角

<!-- 定义两列-->
<Grid.ColumnDefinitions><ColumnDefinition Width ="0.35*"></ColumnDefinition><ColumnDefinition Width ="0.65*"></ColumnDefinition></Grid.ColumnDefinitions><!-- 左侧布局具体实现-->
<Border Grid.Column="0" CornerRadius="10,0,0,10"><Border.Background><LinearGradientBrush StartPoint="0,0" EndPoint="1,1"><GradientStop Color="#00999A" Offset="0"/><GradientStop Color="#0072c0" Offset="1"/></LinearGradientBrush></Border.Background>
</Border>
<!-- 右侧布局具体实现--><Border Grid.Column="1" CornerRadius="0,10,10,0" Background="WhiteSmoke"></Border>

编写左侧布局

Grid.Column="1" 这一行代码的作用是将一个 Border 控件放置在 Grid 的第一列

Border中的CornerRadius圆角元素和Margin外边距元素的值的顺序，左，上，右，下

 <StackPanel Grid.Column="0"><TextBlock Margin="0,100,0,0" Text="bilibili" Foreground="White"FontSize="40" HorizontalAlignment="Center" FontWeight="Bold"/><TextBlock Margin="20,5,20,0"Text="Welcome to the bilibili. You can register by clicking the  button below"TextWrapping="WrapWithOverflow" Foreground="White" LineHeight="25"/><Button Margin="0,80,0,0" Content="Sign Up" Foreground ="White"Background="Transparent" BorderBrush="White" Width="200"/></StackPanel>

编写右侧布局

<!-- 右侧布局 --><Border Grid.Column="1" CornerRadius="0,10,10,0" Background="WhiteSmoke"> <!-- 圆角边框，浅灰色背景 --><StackPanel Margin="20"> <!-- 内容面板，包含登录表单和其他UI元素 --><!-- 登录提示 --><TextBlock Text="Sign in to bilibili" Foreground="#0072c0" FontSize="30" HorizontalAlignment="Center" Margin="0,0,0,25" FontWeight="bold"/> <!-- 社交媒体登录按钮 --><StackPanel Orientation="Horizontal" HorizontalAlignment="Center"><Button Background="Transparent" BorderBrush="Transparent"><Image Source="Images\wechat.png" Width="40" Height="40"/></Button><Button Background="Transparent" BorderBrush="Transparent"><Image Source="Images\weibo.png" Width="40" Height="40" Margin="5,0,5,0"/></Button><Button Background="Transparent" BorderBrush="Transparent"><Image Source="Images\qq.png" Width="40" Height="40"/></Button></StackPanel><!-- 提示使用账户信息登录 --><TextBlock Margin="0,15,0,0" Text="or use your account info" TextAlignment="Center" FontFamily="Arial" FontSize="14" Foreground="#878787"/><!-- 用户名输入框 --><Border Margin="0,30,0,0" Height="35" Width="340" BorderBrush="#878787" BorderThickness="1" CornerRadius="20"><StackPanel Orientation="Horizontal"><!-- 绘制原型图像 --><Ellipse Width="25" Height="25" Margin="5,0,0,0"><Ellipse.Fill><ImageBrush ImageSource="Images\user.png"/></Ellipse.Fill></Ellipse><TextBlock Margin="5,0,0,0" Text="username" FontSize="20" FontFamily="Arial" VerticalAlignment="Center"/></StackPanel></Border><!-- 密码输入框 --><Border Margin="0,10,0,0" Height="35" Width="340" BorderBrush="#878787" BorderThickness="1" CornerRadius="20"><StackPanel Orientation="Horizontal"><Ellipse Width="25" Height="25" Margin="5,0,0,0"><Ellipse.Fill><ImageBrush ImageSource="Images\password.png"/></Ellipse.Fill></Ellipse><TextBlock Margin="5,0,0,0" Text="password" FontSize="20" FontFamily="Arial" VerticalAlignment="Center"/></StackPanel></Border><!-- 登录按钮 --><Button Margin="0,25,0,0" Content="Sign In" Width="200" Background="#0072c0" Foreground="Wheat" FontSize="16"/></StackPanel></Border>

<Ellipse> 元素在WPF中用于绘制一个椭圆形或圆形（当宽度和高度相等时）。

代码片段创建了一个宽高均为25像素的圆形，并使用 <ImageBrush> 来填充这个圆形，使得圆形内部显示为图片

使用Canves进行图片布局

Canvas 是一种布局面板，它允许你通过显式设置元素的 Canvas.Left、Canvas.Top、Canvas.Right 和 Canvas.Bottom 属性来精确地定位子元素。Canvas 适用于需要绝对定位的场景

  <!-- bilibili图标 -->
<Canvas Grid.Column="0"><Image Source="Images\bilibili_word.png/" Width="40" Height="40"Canvas.Left="30" Canvas.Top="400"></Image></Canvas>
<!-- 退出按钮 --><Canvas Grid.Column="1"><Button Background="Transparent" Canvas.Left="485" Canvas.Top="5"BorderBrush="Transparent"><Image Source="Images\close.png" Width="25" Height="25"/></Button></Canvas>