Windows App开发之应用布局与基本导航

简介:

简单示例看页面布局和导航

首先按照上一篇博客中的顺序来新建一个项目。新建好之后就点开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>
AI 代码解读

下面就来依次介绍上面这段代码到底做了写什么。

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));
  }
}
AI 代码解读

写完这段代码也先别急着调试,因为还没有创建SecondPage呢。建议创建好之后最好再往里面加点东西,不然跳转过去了就是黑茫茫的一片还以为是出Bug了呢,添加一个基本的TextBlock就可以了。

   <TextBlock Text="Second Page" FontSize=" 50"/>
AI 代码解读

我再来简单介绍一下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>
AI 代码解读

但是大家应该都发现了,默认情况下应用栏是隐藏起来的,如果想要在加载的时候就是启动的,那该怎么办呢?很简单,直接在AppBar定义IsOpen属性为真就好。

<CommandBar IsOpen="True">
    <!-- -->
</CommandBar>
AI 代码解读

另外还有粘滞属性哟。也就是说,原本当用右键呼出应用栏后,再用左键等点一下其他位置应用栏就会自己消失啦,但如果IsSticky属性为真的话呢,非得再多按几下右键才会消失的。

<AppBar IsSticky="True">
    <!-- -->
</AppBar>
AI 代码解读

除了在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;
    }
}
AI 代码解读

既然是通用应用了,那么WP这边自然也是类似的,不过暂时还只有BottomAppBar却没有TopAppBar呢,以下是系统给生成的代码,和Windows上的一样。

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Icon="Accept" Label="appbarbutton"/>
            <AppBarButton Icon="Cancel" Label="appbarbutton"/>
        </CommandBar>
    </Page.BottomAppBar>
AI 代码解读

想要了解更多关于应用栏的内容,大家可以参考下一篇中的应用栏。

常用属性

Background:背景色
BorderBrush:边框色
BorderThickness:边框大小

  <Button Background="Red" BorderBrush="Blue" BorderThickness="5" Height="66" Width="153"/>
AI 代码解读

这里写图片描述

ClickMode:点击模式,具体有3种:悬停(Hover)、按压(Press)、释放(Release)

Content:内容
FontFamily:字体
FontSize:字体大小
Foreground:字体颜色
FontStretch:字体在屏幕上的展开程度

相关文章
微软开源Windows桌面智能体操作系统!UFO²:一句话调度多应用,自动协同工作
UFO²是微软推出的Windows桌面多智能体操作系统,通过中央HostAgent协调多个AppAgent实现跨应用任务自动化,结合GUI交互和原生API调用提升执行效率,支持虚拟桌面隔离运行。
274 3
微软开源Windows桌面智能体操作系统!UFO²:一句话调度多应用,自动协同工作
【一步步开发AI运动APP】七、自定义姿态动作识别检测——之规则配置检测
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用自定义姿态识别检测技术开发高性能的AI运动应用。核心内容包括:1) 自定义姿态识别检测,满足人像入镜、动作开始/停止等需求;2) Pose-Calc引擎详解,支持角度匹配、逻辑运算等多种人体分析规则;3) 姿态检测规则编写与执行方法;4) 完整示例展示左右手平举姿态检测。通过这些技术,开发者可轻松实现定制化运动分析功能。
|
14天前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗(16)
上一节我们实现了分类页面的顶部导航栏列表,并且实现了首页金刚区跟首页导航栏的联动,这一节我们实现导航栏列表的弹窗功能,需要学习的知识点有自定义弹窗,同时我们的数据源需要跟分类页保持一一致。
17 1
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
130 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
《仿盒马》app开发技术分享-- 分类模块顶部导航列表(15)
上一节我们实现了购物车商品列表的大部分功能,实现了商品的添加、删除、增减、价格计算等业务,并且都跟云端进行通信。现在我们继续对项目进行改造,这一节我们要改造的内容是分类页,这个页面我们在之前的非端云一体化项目中实现过。现在要改造成端云一体的模式,并且我们的金刚区也要实现分类页的点击联动
18 0
借助 CodeBuddy,我轻松开发出三分钟读书 App
借助 CodeBuddy,我轻松开发出三分钟读书 App
61 6
【一步步开发AI运动APP】九、自定义姿态动作识别检测——之关键点追踪
本文介绍了【一步步开发AI运动APP】系列中的关键点追踪技术。此前分享的系列博文助力开发者打造了多种AI健身场景的小程序,而新系列将聚焦性能更优的AI运动APP开发。文章重点讲解了“关键点位变化追踪”能力,适用于动态运动(如跳跃)分析,弥补了静态姿态检测的不足。通过`pose-calc`插件,开发者可设置关键点(如鼻子)、追踪方向(X或Y轴)及变化幅度。示例代码展示了如何在`uni-app`框架中使用`createPointTracker`实现关键点追踪,并结合人体识别结果完成动态分析。具体实现可参考文档与Demo示例。
|
4月前
|
如何在苹果内购开发中获取App Store Connect API密钥-共享密钥理解内购安全-优雅草卓伊凡
如何在苹果内购开发中获取App Store Connect API密钥-共享密钥理解内购安全-优雅草卓伊凡
227 15
如何在苹果内购开发中获取App Store Connect API密钥-共享密钥理解内购安全-优雅草卓伊凡
布谷一对一直播源码开发:阿里云视频语音通话社交交友App的必备功能
在当今移动社交领域,一对一视频和语音通话功能已成为用户期待的基础配置。从熟人社交到陌生人交友,从专业咨询到情感陪伴,实时音视频互动能力直接决定了社交App的用户留存和市场竞争力。山东布谷科技将深入探讨一对一直播源码开发高质量一对一视频和语音通话功能的关键要素和技术实现方案。
布谷一对一直播源码开发:阿里云视频语音通话社交交友App的必备功能
【一步步开发AI运动APP】四、使用相机组件抽帧
本文介绍了如何使用`ai-camera`组件开发AI运动APP,助力开发者深耕AI运动领域。`ai-camera`是专为AI运动场景设计的相机组件,支持多平台,提供更强的抽帧处理能力和API。文章详细讲解了获取相机上下文、执行抽帧操作以及将帧保存到相册的功能实现,并附有代码示例。无论是AI运动APP还是其他场景,该组件都能满足预览、拍照、抽帧等需求。下篇将聚焦人体识别检测,敬请期待!

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问