在前小节中,我们在Card程序的主界面中加入了简单的XAML控件, 本小节将在其基础上进行优化,使界面看上去更加美观。本小节用到了Grid ControlBorder Control,以及XAML控件的VerticalAlignmentHorizontalAlignmentPadding, 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)的更多相关文章

  1. M2: XAML Controls

    本小节介绍如何在界面上添加简单的XAML Controls, 本例中我们用到了Grid, TextBlock, Button, 和StackPanel控件.XAML自身所有的控件都声明在Windows ...

  2. 求解: Windows Phone XAML Controls 为什么是disable状态?

    问题 : 我在做一个windows phone 的App,显示一个web 返回来的data,现在想用控件ListView 去绑定这个Data,但是 为何我的VS2012 中的 ToolBox 的XAM ...

  3. Xaml Controls Gallery 的五个没有用的控件

    HyperlinkButton 功能:这个控件可以实现点击按钮后跳到另一个按钮的功能. 我觉得这个功能有些多余,据我了解,一些深受欢迎的游戏大都具备的一个特点,那就是操作简单,界面中不会出现冗余的东西 ...

  4. UWP作业(一)XAML Controls Gallery

    作为一个编程能力不是很好的uwp初学者,在控件库里看到种类繁多的选项时,需要查资料,最后决定出几种性能各方面可能不是那么出色的控件,内心也是非常纠结的.但当我把自己当成一个用户时,通过分析自己的需求, ...

  5. Common xaml controls(补交作业)

    Common xaml controls 常见的xaml控件: 先上一段代码,把他们基本都实现出来: <Grid Name="MyGrid"> <Button N ...

  6. TypeLoadException: 找不到 Windows 运行时类型“Windows.UI.Xaml.Controls.Binding

    奇怪的问题,我以为是我不小心添加了什么标签导致的,后来发现...坑爹,把项目名字改一下,然后移除掉,接着再加载一下就可以了.......崩溃了,,,,事实证明==>这个时候再把名字改回去也是不报 ...

  7. 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 ...

  8. Windows10-UWP中设备序列显示不同XAML的三种方式[3]

    阅读目录: 概述 DeviceFamily-Type文件夹 DeviceFamily-Type扩展 InitializeComponent重载 结论 概述 Windows10-UWP(Universa ...

  9. 关于 WP 开发中.xaml 与.xaml.cs 的关系

    今天我们先来看一下在WP8.1开发中最长见到的几个文件之间的关系.比较论证,在看这个问题之前我们简单看看.NET平台其他两个不同的框架: Windows Forms 先看看Window Forms中的 ...

随机推荐

  1. 如何使用double-check实现一个单例模式

    private object m_mutex = new object(); private bool m_initialized = false; private BigInstance m_ins ...

  2. Hadoop简介

    原来:计算效率低 现在:成本降低,能用PC机,就不用大型机和高端存储了:软件容错硬件故障视为常态,通过软件保证可靠性:简化并行分布式计算,无需控制节点同步和数据交换,但是谷歌只发表了相关技术论文,没有 ...

  3. Effective Objective-C 2.0 学习记录

    由于最近入职,公司安排自由学习,于是有时间将Effective Objective-C 2.0一书学习了一遍.由于个人知识面较窄,对于书中有些内容无法理解透彻,现将所学所理解内容做一遍梳理,将个人认为 ...

  4. pycharm 常用设置,打开文件数量

    1.主题(皮肤)和字体的设置(暂时略过) File ->Settings -> 搜索Font 2.文档行号的设置 1,临时设置.右键单击行号处,选择 Show Line Numbers. ...

  5. redis 库相关命令

    切换数据库: select 1 查看数据库大小:dbsize 清空数据库: flushdb

  6. java练习题(字符串类):显示4位验证码、输出年月日、从XML中抓取信息

    1.显示4位验证码 注:大小写字母.数字混合 public static void main(String[] args) { String s="abcdefghijklmnopqrstu ...

  7. winform自定义按钮菜单

    //填写其他报表按钮        private void btnWriteRep_Click(object sender, EventArgs e)        {            try ...

  8. 【ros bug】rplidar.launch is neither a launch file in package...

    解决 :cd catkin_ws $ source devel/setup.bash

  9. MUMmer 3使用方法

    DNA和核苷酸的快速比对软件包,基于suffix tree 数据结构,快速.图形化.模块可用于其他软件.可进行大基因组比对.多对多基因组比对. The MUMmer Home Page The MUM ...

  10. i.BIO方式的SSL通道流程

    前面已经讲解了BIO通道的整体流程,对于SSL的流程是插在通道中的,在BIO通道的初始化的时候,根据Connector配置的SSLEnabled属性进行SSL的逻辑. 主要集中的位置在JIOEndpo ...