M2: XAML Controls(2)
在前小节中,我们在Card程序的主界面中加入了简单的XAML控件, 本小节将在其基础上进行优化,使界面看上去更加美观。本小节用到了Grid Control
, Border Control
,以及XAML控件的VerticalAlignment
,HorizontalAlignment
,Padding
, Margin
, TextWrapping
等属性。
打开Card程序,右键单击Assets文件夹,选择Add, Existing Item…, 选择一张JPG图片(我们这里的图片名称为background.jpg),这张图片将用作贺卡的背景。单击Add按钮。 切换到MainPage.xaml
页面,定位到StackPanel控件, 为StackPanel添加Padding
属性。 分别为Button1和Button2添加Margin
属性,修改后代码如下:
<StackPanel Orientation="Horizontal" Grid.Row="1" Padding="4">
<Button x:Name="btnSendMail" Content="Send to Friend" Grid.Row="1" Margin="4"/>
<Button x:Name="btnGetMessage" Content="Get a Wishes" Grid.Row="1" Click="GetMessage_Click" Margin="4"/>
</StackPanel>
定位到TextBlock Control
,新添加FontSize
属性和“,并设置水平居中对齐。
<TextBlock x:Name="tbMessage" Text="Hello, Click to Start..." Grid.Row="0" FontSize="34" HorizontalAlignment="Center" TextWrapping="Wrap"/>
在页面上新添加一个Border Control
,将TextBlock包裹。并设置Border的透明度属性Opacity
, 背景属性Background
, 垂直对齐属性VerticalAlignment
, 修改后代码如下:
<Border Opacity="0.8" Background="White" VerticalAlignment="Center">
<TextBlock x:Name="tbMessage" Text="Hello, Click to Start..." Grid.Row="0" FontSize="34" HorizontalAlignment="Center" TextWrapping="Wrap"/>
</Border>
在页面上新添加一个Grid Control
, 将其放在Grid第一行,Grid用于显示贺卡的背景。
<Grid x:Name="gridMsg" Grid.Row="0" >
<Border Opacity="0.8" Background="White" VerticalAlignment="Center">
<TextBlock x:Name="tbMessage" Text="Hello, Click to Start..." Grid.Row="0" FontSize="34" HorizontalAlignment="Center" TextWrapping="Wrap"/>
</Border>
</Grid>
再返回到MainPage.xaml.cs
页面, 在构造方法中加入Loaded
事件, 在Loaded方法中,我们为gridMsg设置背景图片。
public MainPage()
{
this.InitializeComponent();
this.Loaded += MainPage_Loaded;
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri(@"ms-appx:///Assets/background.jpg"));
imageBrush.Stretch = Stretch.UniformToFill;
gridMsg.Background = imageBrush;
}
其中,使用BitmapImage前要引入命名空间using Windows.UI.Xaml.Media.Imaging;
。
M2: XAML Controls(2)的更多相关文章
- M2: XAML Controls
本小节介绍如何在界面上添加简单的XAML Controls, 本例中我们用到了Grid, TextBlock, Button, 和StackPanel控件.XAML自身所有的控件都声明在Windows ...
- 求解: Windows Phone XAML Controls 为什么是disable状态?
问题 : 我在做一个windows phone 的App,显示一个web 返回来的data,现在想用控件ListView 去绑定这个Data,但是 为何我的VS2012 中的 ToolBox 的XAM ...
- Xaml Controls Gallery 的五个没有用的控件
HyperlinkButton 功能:这个控件可以实现点击按钮后跳到另一个按钮的功能. 我觉得这个功能有些多余,据我了解,一些深受欢迎的游戏大都具备的一个特点,那就是操作简单,界面中不会出现冗余的东西 ...
- UWP作业(一)XAML Controls Gallery
作为一个编程能力不是很好的uwp初学者,在控件库里看到种类繁多的选项时,需要查资料,最后决定出几种性能各方面可能不是那么出色的控件,内心也是非常纠结的.但当我把自己当成一个用户时,通过分析自己的需求, ...
- Common xaml controls(补交作业)
Common xaml controls 常见的xaml控件: 先上一段代码,把他们基本都实现出来: <Grid Name="MyGrid"> <Button N ...
- TypeLoadException: 找不到 Windows 运行时类型“Windows.UI.Xaml.Controls.Binding
奇怪的问题,我以为是我不小心添加了什么标签导致的,后来发现...坑爹,把项目名字改一下,然后移除掉,接着再加载一下就可以了.......崩溃了,,,,事实证明==>这个时候再把名字改回去也是不报 ...
- Creating Reusable XAML User Controls with Xamarin Forms
In the previous post on making fancy layouts with Xamarin Forms we saw how you can design a Dashboar ...
- Windows10-UWP中设备序列显示不同XAML的三种方式[3]
阅读目录: 概述 DeviceFamily-Type文件夹 DeviceFamily-Type扩展 InitializeComponent重载 结论 概述 Windows10-UWP(Universa ...
- 关于 WP 开发中.xaml 与.xaml.cs 的关系
今天我们先来看一下在WP8.1开发中最长见到的几个文件之间的关系.比较论证,在看这个问题之前我们简单看看.NET平台其他两个不同的框架: Windows Forms 先看看Window Forms中的 ...
随机推荐
- 如何使用double-check实现一个单例模式
private object m_mutex = new object(); private bool m_initialized = false; private BigInstance m_ins ...
- Hadoop简介
原来:计算效率低 现在:成本降低,能用PC机,就不用大型机和高端存储了:软件容错硬件故障视为常态,通过软件保证可靠性:简化并行分布式计算,无需控制节点同步和数据交换,但是谷歌只发表了相关技术论文,没有 ...
- Effective Objective-C 2.0 学习记录
由于最近入职,公司安排自由学习,于是有时间将Effective Objective-C 2.0一书学习了一遍.由于个人知识面较窄,对于书中有些内容无法理解透彻,现将所学所理解内容做一遍梳理,将个人认为 ...
- pycharm 常用设置,打开文件数量
1.主题(皮肤)和字体的设置(暂时略过) File ->Settings -> 搜索Font 2.文档行号的设置 1,临时设置.右键单击行号处,选择 Show Line Numbers. ...
- redis 库相关命令
切换数据库: select 1 查看数据库大小:dbsize 清空数据库: flushdb
- java练习题(字符串类):显示4位验证码、输出年月日、从XML中抓取信息
1.显示4位验证码 注:大小写字母.数字混合 public static void main(String[] args) { String s="abcdefghijklmnopqrstu ...
- winform自定义按钮菜单
//填写其他报表按钮 private void btnWriteRep_Click(object sender, EventArgs e) { try ...
- 【ros bug】rplidar.launch is neither a launch file in package...
解决 :cd catkin_ws $ source devel/setup.bash
- MUMmer 3使用方法
DNA和核苷酸的快速比对软件包,基于suffix tree 数据结构,快速.图形化.模块可用于其他软件.可进行大基因组比对.多对多基因组比对. The MUMmer Home Page The MUM ...
- i.BIO方式的SSL通道流程
前面已经讲解了BIO通道的整体流程,对于SSL的流程是插在通道中的,在BIO通道的初始化的时候,根据Connector配置的SSLEnabled属性进行SSL的逻辑. 主要集中的位置在JIOEndpo ...