UWP入门(三) -- StackPanel与Grid的区别

原文:UWP入门(三) -- StackPanel与Grid的区别

##1.Grid 下布局

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

            <StackPanel>
                <TextBlock>First</TextBlock>
                <TextBlock>Second</TextBlock>
                <TextBlock>Third</TextBlock>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Fourth"/>
                    <TextBox></TextBox>
                    <Button>Sixth</Button>
                </StackPanel>
            </StackPanel>
            <StackPanel Height="200">
                <Rectangle Fill="Red" Height="100" />
            </StackPanel>

    </Grid>

第一个 StackPanel 占据整个布局空间(100%*100%),第二个StackPanel 是200px,默认在整个布局的中间,**覆盖在第一个布局之上

2.StackPanel 布局

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <StackPanel>
                <TextBlock>First</TextBlock>
                <TextBlock>Second</TextBlock>
                <TextBlock>Third</TextBlock>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Fourth"/>
                    <TextBox></TextBox>
                    <Button>Sixth</Button>
                </StackPanel>
            </StackPanel>
            <StackPanel Height="200">
                <Rectangle Fill="Red" Height="100" />
            </StackPanel>

        </StackPanel>
    </Grid>

不会覆盖,默认垂直,可以修改成水平

时间: 2025-01-20 11:22:38

UWP入门(三) -- StackPanel与Grid的区别的相关文章

UWP入门(四)--设置控件样式

原文:UWP入门(四)--设置控件样式 官方定义:可以使用 XAML 框架通过多种方式自定义应用的外观. 通过样式可以设置控件属性,并重复使用这些设置,以便保持多个控件具有一致的外观. 可分享至不同elements的资源中 创建可重用的style,并且这一资源可以分享至整单页面.多页面.整个 app,甚至不同的app? how to keep up with style in different app (pre-build theme) 预建主题 2. 直接看简单的Demo <Page.Res

UWP入门(五)--控件模板

原文:UWP入门(五)--控件模板 通过在 XAML 框架中创建控件模板,你可以自定义控件的可视结构和可视行为(eg:勾选框的三种状态). 控件有多个属性,如 Background.Foreground 以及 FontFamily,可以设置这些属性以指定控件外观的多个方面. 但是可以通过设置这些属性所做的更改有限. 你可以通过使用 ControlTemplate 类创建模板来指定其他自定义. 我们在此处介绍如何创建 ControlTemplate 以自定义 CheckBox 控件的外观. 核心A

UWP入门(十二)--数据绑定用法

原文:UWP入门(十二)--数据绑定用法 主要几个元素: Template DataTemplate ItemSource 数据绑定是一个数据提取的方法,能使数据和UI上的控件紧密相连,下面的Demo是这样的: 有许多书的集合,书 类中有图片.标题.作者和ID,把它成现在GridView 控件上,每次点击GridView 的时候动态显示书本信息 github 代码 效果图: 原理图: 1. Template 为GridView 创建一个Template,决定每个独立的图书对象如何呈现在屏幕上 <

UWP入门(二) -- 基础笔记

原文:UWP入门(二) -- 基础笔记 不错的UWP入门视频,1092417123,欢迎交流 UWP-04 - What i XMAL? XAML - XML Syntax(语法) ,create instance of Classes that define the UI by setting properties(属性). UWP-05 - Understanding Type Converters Type Converters - Convert literal(字面的) strings

UWP入门(八)--几个简单的控件

原文:UWP入门(八)--几个简单的控件 每天看几个,要不聊几天我就可以看完啦,加油! 看效果 1. CheckBox <TextBlock Grid.Row="0" Text="CheckBox" VerticalAlignment="Center" /> <StackPanel Grid.Column="1" Margin="20,10,0,10" Orientation="

UWP入门(一) -- 先写几个简单控件简单熟悉下(别看这个)

原文:UWP入门(一) -- 先写几个简单控件简单熟悉下(别看这个) 1. MainPage.xmal <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Pivot x:Name="rootPivot" Title="Pivot Title"> <PivotItem Header="Pivot Item 1&qu

UWP 入门教程2——如何实现自适应用户界面

系列文章 UWP入门教程1--UWP的前世今生   如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置.例如StackPanel 会水平或垂直排列界面元素.Grid 布局与CSS 中的表格控件类似,可将各元素按单元排列. 新提供的 RelativePanel 即相对布局,各个元素之间存在相对关系,可用来创建自适应界面.当用户设备发生变化时,用户界面也会重新排列重新组织,而有了RelativePanel就省去了界面元素重新排列. 如图所示,无论用户使用哪种设备,蓝色按钮始终放在文本

UWP入门(九)-- 枚举和查询文件和文件夹

原文:UWP入门(九)-- 枚举和查询文件和文件夹 核心 API 所在的命名空间: Windows.Storage Windows.Storage.Streams Windows.Storage.Pickers 用它们三可以实现在文件中读取和写入文本和其他数据格式并管理文件和文件夹 本文例子都是官方文档中的示例,只是里面代码对菜鸟不友好,我重新整理下.本文 github代码 1. GetFoldersAsync 首先使用 StorageFolder.GetFilesAsync 方法获取 Pict

Python入门(三)——list和tuple,条件判断和循环,dict和set

Python入门(三)--list和tuple,条件判断和循环,dict和set 好的,我们继续来学习python,这次我们讲容器,也就是list,我们可以这样表示 一.list student = ["zhangsan", "lisi", "wangwu"] print student print "长度为:",len(student) 这样我们可以看下输出的内容 我们可以看到打印的内容,以及他的长度是3,也就是有三个子集,