新时尚Windows8开发(18):制作类似单行簿的输入控件

2024-03-20 01:08

本文主要是介绍新时尚Windows8开发(18):制作类似单行簿的输入控件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

单行簿,在上小学,初中的时候,相信我们都用过,那我们在让用户输入内容的,如文本框,也能做出这种格式吗?

对了,新浪微博Win8客户端,在发表新微博的时候,输入框也是这样的效果,看看下面的图。

 

新浪微博这个输入控件,是先把TextBox的背景设置为{x:Null},然后在TextBox下面放一个Image控件,再引用一张图片来实现的。

而我的做法也差不多,只是在TextBox下面放的不是图片,而是一个Grid元素,Grid分为几行,而每一行放一个高度为1的矩形,看起来就像一根直线,同样,也做出了这种效果。请看下图。

 

怎么样?还过得去吧,虽然不是什么高技术含量,但还是初步实现了类似单行簿的输入界面。

 

方法倒不复杂,首先,用一个用户控件,把这些东西排版好。

<UserControl
x:Class="App1.ucxaml"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Width="450"
Height="270">
<UserControl.Resources>
<Style x:Key="lineStyle" TargetType="Rectangle">
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Fill" Value="Red"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="Height" Value="1"/>
<Setter Property="Opacity" Value="0.6"/>
</Style>
<Style x:Key="txtStyle" TargetType="TextBox">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="28"/>
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</UserControl.Resources>
<Grid Background="LightGray">
<Grid Canvas.ZIndex="0"> 
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="38"/>
<RowDefinition Height="38"/>
<RowDefinition Height="38"/>
<RowDefinition Height="38"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Style="{StaticResource lineStyle}"/>
<Rectangle Grid.Row="1" Style="{StaticResource lineStyle}"/>
<Rectangle Grid.Row="2" Style="{StaticResource lineStyle}"/>
<Rectangle Grid.Row="3" Style="{StaticResource lineStyle}"/>
<Rectangle Grid.Row="4" Style="{StaticResource lineStyle}"/>
</Grid>
<TextBox Name="txt" Canvas.ZIndex="1" Style="{StaticResource txtStyle}" MaxLength="120"/>
</Grid>
</UserControl>


对于行的高度如何与TextBox中的文本配合,我们就不断地调,直到看起来差不多就行了,就是协调TextBox中的字体大小和Grid的行高。

 

然后,我们在其他页面中引用这个用户控件就行了。

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<local:ucxaml />
</Grid>
</Page>


这是一个笨方法,让各位见笑了,呵呵,如果你觉得有用,就研究一下,如果你想到更强大的方法,你就不用看了。哈!

这篇关于新时尚Windows8开发(18):制作类似单行簿的输入控件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/827798

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T

使用Python开发一个图像标注与OCR识别工具

《使用Python开发一个图像标注与OCR识别工具》:本文主要介绍一个使用Python开发的工具,允许用户在图像上进行矩形标注,使用OCR对标注区域进行文本识别,并将结果保存为Excel文件,感兴... 目录项目简介1. 图像加载与显示2. 矩形标注3. OCR识别4. 标注的保存与加载5. 裁剪与重置图像

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问

使用Go语言开发一个命令行文件管理工具

《使用Go语言开发一个命令行文件管理工具》这篇文章主要为大家详细介绍了如何使用Go语言开发一款命令行文件管理工具,支持批量重命名,删除,创建,移动文件,需要的小伙伴可以了解下... 目录一、工具功能一览二、核心代码解析1. 主程序结构2. 批量重命名3. 批量删除4. 创建文件/目录5. 批量移动三、如何安