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;
。
转载于:https://www.cnblogs.com/qixue/p/4992229.html
M2: XAML Controls(2)相关推荐
- xaml语言建立首个win8 Metro应用,rss阅读器
本实例是来源msdn的Metro开发文档,按着解说一步步来理解的,修改了一点点,拿了博客园本人的博客作为RSS阅读,本实例用来学习还是可以的 参考文档http://msdn.microsoft.com ...
- 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题
原文 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题 虽然微软宣称 Windows 10 将是最后一个 Windows 版本,但由于年代跨越 ...
- 重新想象 Windows 8.1 Store Apps (85) - 警报通知(闹钟), Tile 的新特性
原文:重新想象 Windows 8.1 Store Apps (85) - 警报通知(闹钟), Tile 的新特性 [源码下载] 重新想象 Windows 8.1 Store Apps (85) - ...
- 张高兴的 UWP 开发笔记:横向 ListView
ListView 默认的排列方向是纵向 ( Orientation="Vertical" ) ,但如果我们需要横向显示的 ListView 怎么办? Blend for Visua ...
- ux设计_从UX设计人员的角度来看Microsoft Build 2018
ux设计 by Samuele Dassatti 通过萨穆尔达萨蒂 从UX设计人员的角度来看Microsoft Build 2018 (Microsoft Build 2018 from the pe ...
- 背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue...
原文:背水一战 Windows 10 (18) - 绑定: 与 Element 绑定, 与 Indexer 绑定, TargetNullValue, FallbackValue [源码下载] 背水一战 ...
- 背水一战 Windows 10 (65) - 控件(WebView): 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容...
原文:背水一战 Windows 10 (65) - 控件(WebView): 对 WebView 中的内容截图, 通过 Share Contract 分享 WebView 中的被选中的内容 [源码下载 ...
- 背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar
原文:背水一战 Windows 10 (40) - 控件(导航类): AppBar, CommandBar [源码下载] 背水一战 Windows 10 (40) - 控件(导航类): AppBar, ...
- WP8.1学习系列(第十二章)——全景控件Panorama开发指南
2014/6/18 适用于:Windows Phone 8 和 Windows Phone Silverlight 8.1 | Windows Phone OS 7.1 全景体验是本机 Windows ...
最新文章
- backboneJs 导图
- 如何更改微调器的文字大小和文字颜色?
- 一款基于jquery的下拉点击改变背景图片
- linux之使用帮助
- 干货 | 算法工程师入门第二期——穆黎森讲增强学习(二)
- 图像处理与图像识别笔记(六)图像增强3
- java http get_我是如何进入阿里巴巴的-面向春招应届生Java面试指南(九)
- 怎么看待传菜机器人_餐厅服务机器人可能是什么样的?
- 函数式编程(4)-装饰器
- 《恋上数据结构第1季》队列、双端队列、循环队列、循环双端队列
- man命令的使用方法
- centos rm -rf 恢复删除的文件
- IIS 配置详解 请求长度限制调整
- mysql 分库备份_如何分表分库备份及批量恢复?MySQL
- AutoJs学习-实现悬浮网络监视器
- ​​​​​​​墨画子卿第三章:初心第2节:回家
- EMC测试仪器_新能源汽车EMC测试—HPK高压耦合器测试系统
- 大数据告诉你:凌晨4点的中国人都在做什么?
- es like and or_广东生态所孙蔚旻团队ESamp;T发表利用稳定同位素示踪宏基因组分箱联用技术揭示砷污染土壤中的厌氧砷氧化微生物及其代谢途径...
- hive正则表达式匹配中文或者字符