使用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>相关文章：
使用XAML语言仿写BiliBil登录界面
实现步骤 实现左右布局 使用了Grid两列的网格布局，第一列宽度占35%，第二列宽度占65%。使用容器布局Border包裹左右布局内容，设置背景色、设置圆角 <!-- 定义两列--> <Grid.ColumnDefinitions><ColumnDefinition Width &quo…...
Kubernetes Gateway API-4-TCPRoute和GRPCRoute
1 TCPRoute 目前 TCP routing 还处于实验阶段。 Gateway API 被设计为与多个协议一起工作，TCPRoute 就是这样一个允许管理TCP流量的路由。 在这个例子中，我们有一个 Gateway 资源和两个 TCPRoute 资源，它们按照以下规则分配流量࿱…...
【C++动态规划 前缀和】3250. 单调数组对的数目 I|1897
本文涉及知识点 C动态规划 C算法：前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 LeetCode3250. 单调数组对的数目 I 给你一个长度为 n 的 正 整数数组 nums 。 如果两个 非负 整数数组 (arr1, arr2) 满足以下条件，我们称它们是 单调…...
【机器学习:五、使梯度下降法更快收敛的技巧】
1. 特征缩放 1.1 特征缩放的作用 特征缩放是一种将不同特征值归一化到相似范围的技术，可以显著提高梯度下降法的收敛速度。 作用： 避免数值差异导致的优化困难：当特征值范围差异较大时，代价函数呈现“长而窄”的形状࿰…...
系统思考—结构影响行为
托尔斯泰在《安娜卡列尼娜》中说：“幸福的家庭都是相似的，不幸的家庭各有各的不幸。”在企业经营管理中也如此——企业剧本总是相似，只是男女主角不同。 但无论外在表现如何变化，真正决定企业命运的，是系统结构。 企业…...
WorldQuant Settings 配置项名词解释
中文翻译及通俗解释 语言（Language） 解释：BRAIN 平台支持使用快速表达式（Fast Expression）语言。 例子：快速表达式就像写公式，比如 price + volume，简单易懂且高效。更多内容可以参考“可用操作符”。 工具类型（Instrument type） 解释：目前只能使用“股票”作为工…...
mybatisPlus动态sql语句 ${ew.sqlSegment}
mybatis-plus的${ew.sqlSegment}，${ew.sqlSelect}，${ew.customSqlSegment} ew是mapper方法里的Param(Constants.WRAPPER) Wrapper queryWrapper对象 简答介绍： ${ew.sqlSelect}：拼接select SQL主体 Select("select ${ew.…...
ATGM336H-5N71支持多种卫星导航系统的定位模块
ATGM336H-5N7 1是 9.7X10.1尺寸，AT6558芯片，导航模块，GPSBDSGLONASS定位，16.369M晶振，标准输出 ，电源2.7V~3.6V, 支持 UART0和UART1接口 . ATGM336H-5N特性： Flash TCXO 天线检测 天线过流保护 …...
Maven中管理SNAPSHOT版本含义及作用
在开发过程中突然产生了一个疑问：IDEA中 maven deploy的依赖包的版本号,比如 1.0.0-SNAPSHOT是在哪配置的？在远程仓库中的版本和这个有关系吗 ？ 在 Maven 中，-SNAPSHOT 后缀是用于标识项目版本为快照（Snapshot…...
从技术到艺术：探索大模型提示词工程，给您的AI作品去去味
1. 增加互动性元素 请在文章中增加互动性元素，如提问、调查或互动链接，鼓励读者参与和反馈，提高文章的互动性和读者的参与度。 2. 加强视觉元素的应用 请在文章中适当加入图表、图片和其他视觉元素，增强文章的视觉效果࿰…...
OSPF - 1类LSA（Router-LSA）
点击返回LSA对照表 1类LSA是OSPF计算最原始的材料，他会泛洪发给所有的路由器 LSA是包含在LSU中的，一条LSU能够携带多条LSA options位所有LSA都会有，用于标记起源于什么类型的区域，具体查看文章【邻居建立】 flags位是一类LSA特…...
HTTP 协议中，GET、PUT、POST、DELETE、OPTIONS 和 PATCH 区别
在 HTTP 协议中，GET、PUT、POST、DELETE、OPTIONS 和 PATCH 是常见的请求方法（HTTP Methods），用于定义客户端与服务器之间的交互方式。每种方法都有特定的语义和用途。以下是它们的详细解释： 1. GET 用途: 用于从服务…...
)
黄仁勋演讲总结(2种显卡，1个开源大模型，1个数据采集平台)
研发算力显卡RTX50系列，PC端显卡GB10，开源大模型Cosmos（用于机器人和自动驾驶）， Isaac GR00T（人形机器人的数据采集平台）。 新一代 RTX 50 系列显卡 RTX 50 系列 GPU，相对之前系列&a…...
支持向量机算法（一）：像讲故事一样讲明白它的原理及实现奥秘
1、支持向量机算法介绍 支持向量机（Support Vector Machine，SVM）是一种基于统计学习理论的模式识别方法， 属于有监督学习模型，主要用于解决数据分类问题。SVM将每个样本数据表示为空间中的点，使不同类别的…...
掌握RabbitMQ：全面知识点汇总与实践指南
前言 RabbitMQ 是基于 AMQP 高级消息队列协议的消息队列技术。 特点：它通过发布/订阅模型，实现了服务间的高度解耦。因为消费者不需要确保提供者的存在。 作用：服务间异步通信；顺序消费；定时任务；请求削…...
Ansys Discovery 优化模式：掌握网格划分方法
本篇博客文章介绍了 Ansys Discovery 中高级 CFD 仿真的 Refine 模式下可用的网格划分方法。上一篇文章讨论了 Explore 模式中可用的网格划分技术。 Refine 模式下的高级网格划分技术 使用 Ansys Discovery 时，Refine 模式提供的网格划分技术比 Explore 模式多。这…...
CentOS: RPM安装、YUM安装、编译安装（详细解释+实例分析！！！）
目录 1.什么是RPM 1.1 RPM软件包命名格式 1.2RPM功能 1.3查询已安装的软件：rpm -q 查询已安装软件的信息 1.4 挂载：使用硬件（光驱 硬盘 u盘等）的方法（重点！！！） 1…...
（转）rabbitmq怎么保证消息不丢失？
RabbitMQ 可以通过以下多种机制来保证消息不丢失： 生产阶段 - 持久化队列和交换器： - 在声明队列和交换器时，将 durable 参数设置为 true ，确保它们是持久化的。这样，即使 RabbitMQ 节点重新启动，队列和交…...
List ---- 模拟实现LIST功能的发现
目录 listlist概念 list 中的迭代器list迭代器知识const迭代器写法list访问自定义类型 附录代码 list list概念 list是可以在常数范围内在任意位置进行插入和删除的序列式容器，并且该容器可以前后双向迭代。list的底层是双向链表结构，双向链表中每个元素…...
电力场景输电线覆冰分割数据集labelme格式1227张2类别
数据集格式：labelme格式(不包含mask文件，仅仅包含jpg图片和对应的json文件) 图片数量(jpg文件个数)：1227 标注数量(json文件个数)：1227 标注类别数：2 标注类别名称:["ice","powerline"] 每个…...
springboot 日志实现
日志 日志框架可以分为 日志门面（Facade） 和 日志实现（Implementation），Spring Boot 使用了 SLF4J 作为日志门面，Logback 或 Log4j2 作为日志实现。 日志门面以及日志实现 日志门面 日志门面࿰…...
Ubuntu Server安装谷歌浏览器
背景 服务器上跑爬虫服务器需要安装谷歌浏览器 安装 wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb### sudo apt install ./google-chrome-stable_current_amd64.deb...
毕业项目推荐：基于yolov8/yolov5/yolo11的动物检测识别系统（python+卷积神经网络）
文章目录 概要一、整体资源介绍技术要点功能展示：功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出（xls格式）功能6 支持切换检测到的目标查看 二、数据集三、算法介绍1. YO…...
计算机网路HTTP、TCP详解
HTTP HTTP基本概念 HTTP（超文本传输协议）：HTTP是在计算机世界中两点之间传输文字、图片、视频等超文本内容数据的约束与规范。 常见状态码： 2xx：报文被收到，已经在正确处理中。 3xx：重定向…...
小程序未来趋势预测：技术革新与市场前景
一、引言 在数字化转型加速的时代，小程序作为一种轻量级、无需下载安装的应用形式，凭借其快速开发、易于使用的特点，迅速崛起并成为企业和开发者拓展业务的重要工具。随着移动互联网的进一步普及和用户对便捷应用体验的需求增长，…...
JavaEE初阶——计算机工作原理
一、什么是JavaEE JavaEE（Java Platform，Enterprise Edition）是sun公司（2009年4月20日甲骨文将其收购）推出的企业级应用程序版本。这个版本以前称为 J2EE。能够帮助我们开发和部署可移植、健壮、可伸缩且安全的服务器…...
Web前端ui框架
文章目录 Element简介 Ant Design vue简介关键特点： iview简介 Element 官网：https://element.eleme.cn/#/zh-CN/component/installation添加链接描述 简介 Elementui 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 Ant Design …...
)
炸弹 (boom.c)
炸弹 (boom.c) 时间限制: 800ms 内存限制: 256000KiB 进度: 57/12406 0.5% 题目描述 出题助教: Sakiyary 验题助教: Corax、XiEn、ErinwithBMQ、runz、MacGuffin、Bob 维多利亚的腐烂荒野上出现了 N 个魔物，你和小维需要抓紧时间调配炸弹对付它们。 荒野可以视…...
： 随机数的大小)
【C语言】可移植性陷阱与缺陷(八)： 随机数的大小
在C语言编程中，随机数的生成和使用是一个常见的需求。然而，由于不同平台上的C标准库实现可能存在差异，随机数的生成和使用也可能面临可移植性问题。本文将深入探讨C语言中随机数的大小与可移植性相关的陷阱与缺陷，并提供相应的解决…...
SSL VPN
SSL VPN 是什么？ 是采用SSL/TLS协议来实现远程接入的一种轻量级 VPN 技术。利用 SSL 协议提供的基于证书的身份认证、数据加密和消息完整性验证机制，可以为应用层之间的通信建立安全连接。因为 SSL 协议内置于浏览器中，使用 SSL VPN 可以免于…...
C语言:函数
目录 1.函数的解释 2.C语言函数的分类 2.1库函数 2.2自定义函数 2.2.1自定义函数的语法格式 2.2.2自定义函数的实践 (1)第一题：欢迎光临 (2)第二题 打印数字的平方 编辑 (3)第三题 计算和 3.函数的参数 3.1值传递的表现 --- 形参 3.2地址传递的表现 -…...
Vue 环境配置与项目创建指南
1. 前置要求 在开始配置 Vue 开发环境之前，需要确保以下工具已安装： Node.js：Vue 的构建工具依赖 Node.js。 npm 或 yarn：Node.js 自带 npm 包管理工具，也可以选择安装 yarn。 安装 Node.js 前往 Node.js 官网 下…...
关于物联网的基础知识（三）——物联网技术架构：连接万物的智慧之道！连接未来的万物之网！
成长路上不孤单😊😊😊😊😊😊 【14后😊///计算机爱好者😊///持续分享所学😊///如有需要欢迎收藏转发///😊】 今日分享关于物联网的基础知识（三&a…...
iOS - Tagged Pointer
1. 基本结构 // Tagged Pointer 的内存布局 union TaggedPointer {uintptr_t bits; // 完整的指针值struct {uintptr_t data : 60; // 数据部分uintptr_t tag : 4; // 类型标记};// 扩展类型struct {uintptr_t extData : 52; // 扩展数据uintptr_t extTag : …...
基于SpringBoot的音乐网站与分享平台
基于SpringBoot的音乐网站与分享平台 摘要1. 研究背景2.研究内容3.系统功能 3.1前台首页功能模块3.2在线听歌功能模块3.3后台登录功能模块3.4在线听歌管理模块 4.部分功能代码实现5.源码分享(免费获取) 需要源码联系我即可(免费获取)~ ??大家点赞、收藏、关注、评论啦 、查…...
【机器学习篇】 科技异次元的超强 “魔杖”，开启奇幻新程
一起开启这场旅行吧，关注博主，点赞支持不迷路，下面一同欣赏本篇的美妙吧！！ ！ 博主主页： 羑悻的小杀马特.-CSDN博客 在当今科技飞速发展的时代，机器学习宛如一把来自科技异次元的超强…...
opencv CV_TM_SQDIFF未定义标识符
opencv CV_TM_SQDIFF未定义标识符 opencv4部分命名发生变换，将CV_WINDOW_AUTOSIZE改为WINDOW_AUTOSIZE；CV_TM_SQDIFF_NORMED改为TM_SQDIFF_NORMED。...
OneFlow的简单介绍
OneFlow 是北京一流科技有限公司旗下的采用全新架构设计的开源工业级通用深度学习框架。以下是关于 OneFlow 的详细介绍： 本篇文章的目录 特点 功能 应用场景 发展历程 特点 简洁易用的接口：为深度学习相关的算法工程师提供一套简洁易用的用户接口…...
如何配置【Docker镜像】加速器+【Docker镜像】的使用
一、配置Docker镜像加速器 1. 安装/升级容器引擎客户端 推荐安装1.11.2以上版本的容器引擎客户端 2. 配置镜像加速器 针对容器引擎客户端版本大于1.11.2的用户 以root用户登录容器引擎所在的虚拟机 修改 "/etc/docker/daemon.json" 文件（如果没有…...
《OpenCV》——模版匹配
文章目录 什么是模版匹配？函数介绍实例 什么是模版匹配？ 模板匹配是在一幅图像中寻找与另一幅模板图像最匹配部分的技术。OpenCV 提供了多种模板匹配的方法，它在目标检测、物体识别等众多计算机视觉任务中有广泛的应用。例如，你有…...
【网络安全技术与应用】（选修）实验3 网络侦察
一、实验目的 培养学生综合运用搜索引擎、Whois数据库等手段对目标站点进行侦查的能力，了解站点查询常用的信息源及搜索工具，熟练掌握常见搜索工具的功能及使用技巧。培养学生使用搜索引擎在互联网查找特定设备的能力，熟悉联网设备搜索引擎的功能，熟练掌握设备搜索引擎的使…...
基于XGBoost的集成学习算法
目录 一、XGBoost原理1.1 提升方法（Boosting）1.2 提升决策树 （BDT）1.3 梯度提升决策树 （GBDT）1.4 极限梯度提升（XGBoost）1.4.1 XGBoost改进1.4.2 XGBoostcsklearn实现1.4.3 XGBoost回…...
【84键矮轴无线键盘】个人使用经历
推荐： 前行者MK84键（理由：价格实惠，键位布局好，其他都是可接受程度）K3 max（理由：除了短命的续航、脚垫容易脱落，已无明显短板） 我需要一把在小巧、舒适的主力…...
基于Arduino的FPV头部追踪相机系统
构建FPV头部追踪相机：让你置身于遥控车辆之中！ 在遥控车辆和模型飞行器的世界中，第一人称视角（FPV）体验一直是爱好者们追求的目标。通过FPV头部追踪相机，你可以像坐在车辆或飞行器内部一样，自由…...
Flutter：邀请海报，Widget转图片，保存相册
记录下，把页面红色区域内的内容，转成图片后保存到相册的功能 依赖 # 生成二维码 qr_flutter: ^4.1.0 # 保存图片 image_gallery_saver_plus: ^3.0.5view import package:demo/common/index.dart; import package:ducafe_ui_core/ducafe_ui_core.dart; i…...
CSS——16. nth—child序列选择器1
<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>nth-child选择器</title><style type"text/css">/* 选择的是li的父元素（ul）中的第9个li子元素 */li:nth-child(9){color: red…...
：登录页对接口)
【HarmonyOS 5.0】从0到1开发购物应用App(二)：登录页对接口
【HarmonyOS Arkts笔记】http网络请求封装 【HarmonyOS Arkts笔记】ohos.data.preferences用户首选项实现存储信息 登录页 点击登录按钮调用login()方法 import { promptAction, router } from kit.ArkUI; import loginApi from "../../api/login" import Prefere…...
asp.net core webapi中的数据注解与数据验证
在这一课中，主要讲解了如何在 Web API 中使用数据注解（Data Annotations）和进行数据验证，以确保请求数据的有效性和完整性。 在 Web API 中，数据验证是确保客户端传递的数据符合业务规则和格式要求的关键步骤。数据注…...
VulnHub—potato-suncs
使用命令扫描靶机ip arp-scan -l 尝试访问一下ip 发现一个大土豆没什么用 尝试扫描一下子域名 没有发现什么有用的信息 尝试扫描端口 namp -A 192.168.19.137 -p- 尝试访问一下端口,发现都访问不进去 查看源代码发现了网页的标题 potato，就想着爆破一下密码 hydr…...
uniapp 微信小程序 自定义日历组件
效果图 功能：可以记录当天是否有某些任务或者某些记录 具体使用： 子组件代码 <template><view class"Accumulate"><view class"bx"><view class"bxx"><view class"plank"><…...