【UWP通用应用开发】应用布局、基本导航
来源:互联网 发布:网络协议抽象成软件 编辑:程序博客网 时间:2024/05/01 10:57
简单示例看页面布局和导航
首先按照上一篇博客中的顺序来新建一个项目。新建好之后就点开MainPage.xaml开始敲代码了。
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid.RowDefinitions> <RowDefinition Height="100"/> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="4*"/> <ColumnDefinition Width="6*"/> </Grid.ColumnDefinitions> <StackPanel Grid.Row="0" Grid.ColumnSpan="2" Orientation="Horizontal"> <TextBlock Text="页面布局" Foreground="Red" FontSize="40" Margin="12" Width="200" Height="80" /> <TextBlock Text="基本导航" Foreground="Green" FontSize="40" Margin="12" Width="200" Height="80" /> </StackPanel> <Grid Grid.Row="1" Grid.Column="0"> <Button Content="导航到第二页" Foreground="Blue" FontSize="35" Margin="12,480,0,0" Name="btnGoSecondPage" Click="btnGoSecondPage_Click"/> </Grid> <Canvas Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"> <Rectangle Fill="Blue"/> <Rectangle Fill="Yellow" Height="100" Width="100" Canvas.Left="50" Canvas.Top="20"/> <Rectangle Fill="White" Height="100" Width="100" Canvas.Left="70" Canvas.Top="90"/> </Canvas> </Grid>
下面就来依次介绍上面这段代码到底做了写什么。
1)首先将最外围的Grid控件分成了3行2列。其中第一行的高度是100像素;第二行的高度是自动的,所谓自动呢,就是会根据将来在其中添加的控件的所占的高度来决定的;第三行的高度就是剩余的啦,这么说可能不够清楚到底星号是什么意思。那再看看切成的这两列就好啦,它的宽度比就是4:6。很显然不一定是非得比例加起来等于10,即便是4:100也可以的。
2)在最外层的Grid内嵌套了一个StackPanel,并且将其定位在第一行,而且横跨2列。Grid最擅长的就是操作具体的像素,它可以将任何控件精确的定位到任何一点。而StackPanel最重要的Orientation属性则可以安排其内的控件的排列方式,比如这里就是让两个TextBlock控件按水平方向来排列。
3)在这里又嵌套了Grid,里面有一个Button,Foreground属性是定义字体颜色,FontSize属性是定义字体大小。下面重点来看看Margin属性。我们定义的Marin=”12,480,0,0”,从左至右依次是左、上、右和下四个方向距离外围边框的距离。
在设计器中已经标注了左边距是12,而上边距没有体现出来,但确实是480。还记得之前的那个auto么,在这里就体现出来了啦,因为下边距是0,所以Grid的分割线就刚好在Button下面啦。但为什么右边的分割线不刚好在Button的右边呢,这是因为我们之前的2列是按照4:6的比例来切的呀,而不是设置的auto。
4)Canvas位于其外围的Grid控件的正中央,HorizontalAligment和VerticalAlignment分别表示水平方向和垂直方向的摆放位置。Canvas.Top和Canvas.Left分别表示离Canvas最上边和最下边的距离。
5)给Button设置一个名字,然后敲下Click=”“之后,就会出现如下图所示,这是直接按下Enter键就可以直接命名咯。小技巧啦。
然后双击Click事件的名字后,直接按F12键就会自动生成一个事件并且跳转到C#文件啦。下面这段代码就是会让页面从MainPage跳转到SecondPage。
private void btnGoSecondPage_Click(object sender, RoutedEventArgs e){ if (this.Frame != null) { this.Frame.Navigate(typeof(SecondPage)); }}
写完这段代码也先别急着调试,因为还没有创建SecondPage呢。建议创建好之后最好再往里面加点东西,不然跳转过去了就是黑茫茫的一片还以为是出Bug了呢,添加一个基本的TextBlock就可以了。
<TextBlock Text="Second Page" FontSize=" 50"/>
我再来简单介绍一下VS中常用的一些东西,仅仅面向初学者。在下面的图中,方框1处可以让设计器和XAML代码的位置对换哦,截图里我就是将设计器放到了右边,不过只是为了截图,设计器还是在左边比较习惯。
方框2处可以让设计器和XAML代码上下摆列和左右摆列也可以不显示它们中的某一个。旁边还可以设置网格对齐以及设计器的缩放比例。
方框3和方框4中可以设置的东西就太多啦,可以设置渐变色,也可以设置Click事件,还可以设置控件的布局等。
应用栏布局
Windows上的modern应用我倒是不常用,不过WP8上的应用我觉得和安卓什么的最大的区别就是它的应用栏了,下面就来讲讲应用栏是怎么做出来的。
在Document Outline(在视图中找到,或者按Ctrl+W,U)中有TopAppBar和BottomAppBar,分别是顶部和底部的应用栏。点鼠标右键可以快速定义AppBar和CommandBar,通常将AppBar放在应用上端也就是TopAppBar内,CommandBar放在下端也就是BottomAppBar内。
或许很多人都不知道,在Modern应用下,按Win+Z键可以直接呼出应用栏哟。另外要注意AppBar与CommandBar不同,前者只能包含一条子内容,通常定义一个Grid控件,然后在Grid内嵌套其他控件。下面贴出一段AppBar的示例:
<Page.TopAppBar> <AppBar IsSticky="True"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <StackPanel Orientation="Horizontal"> <Button Content="Main Page" Width="140" Height="80" Click="AppBarButton1_Click"/> <Button Content="Second Page" Width="140" Height="80" Click="AppBarButton2_Click"/> <Button Content="Third Page" Width="140" Height="80" Click="AppBarButton3_Click"/> <TextBlock Text="AppBar" Foreground="Red" FontSize="40" VerticalAlignment="Center" Margin="12" Width="200"/> </StackPanel> <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right"/> </Grid> </AppBar></Page.TopAppBar><Page.BottomAppBar> <CommandBar> <AppBarButton Label="Refresh" Icon="Refresh" Click="appBarBtn4_Click"/> <AppBarButton Label="Redo" Icon="Redo" Click="appBarBtn5_Click"/> <CommandBar.SecondaryCommands> <AppBarButton Label="Add" Icon="Add" Click="AppBarButton6_Click"/> <AppBarButton Label="Delete" Icon="Delete" Click="AppBarButton7_Click"/> <AppBarButton Label="Edit" Icon="Edit" Click="AppBarButton8_Click"/> </CommandBar.SecondaryCommands> </CommandBar></Page.BottomAppBar>
但是大家应该都发现了,默认情况下应用栏是隐藏起来的,如果想要在加载的时候就是启动的,那该怎么办呢?很简单,直接在AppBar定义IsOpen属性为真就好。
<CommandBar IsOpen="True"> <!-- --></CommandBar>
另外还有粘滞属性哟。也就是说,原本当用右键呼出应用栏后,再用左键等点一下其他位置应用栏就会自己消失啦,但如果IsSticky属性为真的话呢,非得再多按几下右键才会消失的。
<AppBar IsSticky="True"> <!-- --></AppBar>
除了在XAML中定义这些属性外,我们也可以在后台代码中用函数来实现呢,这里我就是用的2个Button的Click事件。
private void btnSetAppBar_Click(object sender, RoutedEventArgs e){ if (this.TopAppBar != null) { this.TopAppBar.IsSticky = true; }}private void btnSetAppBar2_Click(object sender, RoutedEventArgs e){ if (BottomAppBar.IsOpen ==false) { this.BottomAppBar.IsOpen = true; }}
既然是通用应用了,那么WP这边自然也是类似的,不过暂时还只有BottomAppBar却没有TopAppBar呢,以下是系统给生成的代码,和Windows上的一样。
<Page.BottomAppBar> <CommandBar> <AppBarButton Icon="Accept" Label="appbarbutton"/> <AppBarButton Icon="Cancel" Label="appbarbutton"/> </CommandBar> </Page.BottomAppBar>
想要了解更多关于应用栏的内容,大家可以参考下一篇中的应用栏。
常用属性
Background:背景色
BorderBrush:边框色
BorderThickness:边框大小
<Button Background="Red" BorderBrush="Blue" BorderThickness="5" Height="66" Width="153"/>
ClickMode:点击模式,具体有3种:悬停(Hover)、按压(Press)、释放(Release)
Content:内容
FontFamily:字体
FontSize:字体大小
Foreground:字体颜色
FontStretch:字体在屏幕上的展开程度
和WPF等的页面导航对比
Frame、Page框架
Frame是能够定位到并显示内容的内容控件。Frame可以在其他内容中承载,与其他控件和组件。
当Frame控件导航到 HTML内容时,内部Frame控件实例化本机 webbrowserActivex控件。WPF通过对函数控件启用安全功能在浏览器 Activex控件。应用于的功能控制对 XBAP和独立应用程序不同。某些应用程序应通过附加功能控制防止恶意内容运行。有关更多信息,请参见中的 “浏览器控件和功能控制”在安全性(WPF)的和WebBrowserControl Overviews and Tutorials部分。
内容可以导航到通过设置与URI的Source属性所需内容的。另外,可以使用Navigate方法的一下重载之一,内容可以导航到:Navigate(Uri),Navigate(Uri,Object)
如果内容导航到由URI时,Frame返回包含内容的对象。或者,内容可以导航到使用接受一个对象的Navigate方法重载:Navigate(Object),Navigate(Object,Object)
导航的生存期可以通过以下活动来跟踪:Navigating,Navigated,NavigationProgress,NavigationFailed,NavigationStopped,LoadCompleted,FramentNavigation
不是导航发生的所有事件都引发;引发事件集的方式取决于发生的类型的导航(内容或内容片段),这个导航完成(取消,停止或失败)。
WPF、WP8 Silverlight 中的导航实现
1、在WPF中的导航:
window到window:
Window window1=new Window();
window1.Show();
window到page:
Navigation Windowwindow1=new NavigationWindow();
window1.Source=newUri(“Page1.xaml“,UriKind.Relative);
window1.Show();
page到page:
NavigationService.GetNavigationService(this).Navigate(newUri(“Page2.xaml”,UriKind.Relative));
2、在Silverlight(包括WP8开发的时候选择银光框架时)中的导航:
(sliver 的意思是切开,切片) (silver才是银色)
this.NavigationService.Navigate(newUri(“/Page1.xaml”,UriKind.Relative);
浅谈WPF、Silverlight和WinRT
在WPF(WPF4)中,导航主要是NavigationService类型,Frame,Page和NavigationWindow类型都有NavigationService属性,同时Frame类型还有一些方法比如Navigate就是直接调用其背后的NavigationService的相应方法。
Frame继承自ContentControl,Page继承自FrameworkElement。
Navigate方法可以传入Uri和Object参数,同时支持第二个Object代表额外数据。然后再Frame.Navigated事件中,通过NavigationEventArgs的ExtraData属性来获取额外的数据。但是WPF中的导航数据传递对于开发者来说很头疼。
在winRT中,没有了NavigationService。NavigationCacheMode等在Silverlight中都有的。同时Page还引入了一些新的元素,比如winRT中特有的AppBar。最后winRT中的Page同时引用Frame对象,这个可以说是NavigationService的代替吧,因为如果Page连Frame都不引用,那么Page本身便不具备任何主动导航功能了。
- 【UWP通用应用开发】应用布局、基本导航
- 【UWP通用应用开发】控件、应用栏
- 【UWP通用应用开发】开发准备、部分新特性
- Windows App开发之应用布局与基本导航
- 【UWP通用应用开发】集合控件与数据绑定
- 【UWP开发】uwp应用安装失败
- [UWP开发] Cortana启动应用
- 【UWP通用应用开发】编辑文本、绘制图形、3D透视效果及绘制时钟实战
- 【UWP通用应用开发】集成搜索、粘贴板以及设置共享源和共享目标
- 【UWP通用应用开发】使用Toast通知与动态磁贴
- 【UWP开发】如何通过unity发布win10 uwp应用
- 【UWP通用应用开发】文件选取器、获取文件属性、写入和读取、保存读取和删除应用数据
- 1.2 UWP 应用开发准备篇
- [Discovery]初识Windows通用应用(UWP App) - HelloWorld
- 创建你的第一个Windows通用应用(UWP)
- win10 UWP 应用设置
- 1.1 UWP应用简介
- UWP应用分享
- Objective-c语言_便利初始化函数和便利构造器
- C++ Boost 学习资源列表
- Xposed 入门与模块示例 - 电量伪装
- 分享
- servlet入门篇
- 【UWP通用应用开发】应用布局、基本导航
- IOS手势识别
- Ubuntu 下matlab与 opencv混合编程
- linux C --深入理解字符串处理函数 strlen() strcpy() strcat() strcmp()
- 关于三种『应用内主题切换』开源项目的一点思考
- java集合框架中方法在程序中的运用
- domino如何使用代理针对某条文档运行某个代理
- Android运行时异常“Binary XML file line # : Error inflating class”
- ios网络编程(http、socket)