07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件

如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点)

一、布局类控件

Grid、StackPanel、Canvas、 VariableSizedWrapGrid

1.布局控件 - Grid

  网格控件,网格布局;

  相当于 HTML 中的 Table 标签;

  但是注意 Table 更重要的是展示数据,而 Grid 则是专门为布局所生;

  属性标记

    Grid.RowDefinitions:行定义,元素类型 RowDefinition,必要属性 Height

    Grid.ColumnDefinitions:列定义,元素类型 ColumnDefinition,必要属性 Width

    Width 和 Height属性单位为像素,有两个特殊值“*”、“auto”

   

  常用附加属性

    Grid.Row:定义当前元素所出现的行号

    Grid.Column :定义当前元素所出现的列号

    Grid.RowSpan :定义当前元素所跨的行数

    Grid.ColumnSpan:定义当前元素所跨的列数

    

  1.案例:定义一个3行2列的表格,在其中放元素

  

  效果:

  

  2.综合案例:计算器页面模仿

  创建一个基本页(WP统一样式)

  

  生成的页面,代码放在下面grid里面

  

  布局分析:(对空格和=来说,实现的话就要合并单元格)

  

  定义部分(上面的样式先忽略,和css有点相似,不会用的话在每个控件后面打属性值就可以了,后面会讲)

  

  下面是ui部分:(注意:row从0开始,colunm也是从0开始)

  

       <!--输出框-->
            <TextBox x:Name="RLog" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Stretch" Grid.ColumnSpan="5" Margin="0,0,0,20"></TextBox>

            <!--第1行按键-->
            <Button Grid.Row="2" Click="Button_Click">MC</Button>
            <Button Grid.Row="2" Grid.Column="1" Click="Button_Click">MR</Button>
            <Button Grid.Row="2" Grid.Column="2" Click="Button_Click">MS</Button>
            <Button Grid.Row="2" Grid.Column="3" Click="Button_Click">M+</Button>
            <Button Grid.Row="2" Grid.Column="4" Click="Button_Click">M-</Button>

            <!--第2行按键-->
            <Button Grid.Row="3" Click="Button_Click">←</Button>
            <Button Grid.Row="3" Grid.Column="1" Click="Button_Click">CE</Button>
            <Button Grid.Row="3" Grid.Column="2" Click="Button_Click">C</Button>
            <Button Grid.Row="3" Grid.Column="3" Click="Button_Click">?</Button>
            <Button Grid.Row="3" Grid.Column="4" Click="Button_Click">√</Button>

            <!--第3行按键-->
            <Button Grid.Row="4" Click="Button_Click">7</Button>
            <Button Grid.Row="4" Grid.Column="1" Click="Button_Click">8</Button>
            <Button Grid.Row="4" Grid.Column="2" Click="Button_Click">9</Button>
            <Button Grid.Row="4" Grid.Column="3" Click="Button_Click">/</Button>
            <Button Grid.Row="4" Grid.Column="4" Click="Button_Click">%</Button>

            <!--第4行按键-->
            <Button Grid.Row="5" Click="Button_Click">4</Button>
            <Button Grid.Row="5" Grid.Column="1" Click="Button_Click">5</Button>
            <Button Grid.Row="5" Grid.Column="2" Click="Button_Click">6</Button>
            <Button Grid.Row="5" Grid.Column="3" Click="Button_Click">*</Button>
            <Button Grid.Row="5" Grid.Column="4" Click="Button_Click">1/x</Button>

            <!--第5行按键-->
            <Button Grid.Row="6" Click="Button_Click">1</Button>
            <Button Grid.Row="6" Grid.Column="1" Click="Button_Click">2</Button>
            <Button Grid.Row="6" Grid.Column="2" Click="Button_Click">3</Button>
            <Button Grid.Row="6" Grid.Column="3" Click="Button_Click">-</Button>
            <Button Grid.Row="6" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Stretch" Click="Button_Click">=</Button>

            <!--第6行按键-->
            <Button Grid.Row="7" Grid.ColumnSpan="2" VerticalAlignment="Stretch" Click="Button_Click"></Button>
            <Button Grid.Row="7" Grid.Column="2" Click="Button_Click">.</Button>
            <Button Grid.Row="7" Grid.Column="3" Click="Button_Click">+</Button>

 

<!--TODO: 应将内容放入以下网格-->
        <Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">

            <!-- 设置样式 -->
            <Grid.Resources>
                <Style TargetType="Button">
                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                    <Setter Property="Margin" Value="2,0,2,0"/>
                    <Setter Property="MinWidth" Value="0"/>
                </Style>
            </Grid.Resources>

            <!--在grid里面自定义8行-->
            <Grid.RowDefinitions>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
                <RowDefinition></RowDefinition>
            </Grid.RowDefinitions>
            <!--在grid里面自定义5列-->
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <!--输出框-->
            <TextBox x:Name="RLog" Grid.Row="0" Grid.RowSpan="2" VerticalAlignment="Stretch" Grid.ColumnSpan="5" Margin="0,0,0,20"></TextBox>

            <!--第1行按键-->
            <Button Grid.Row="2" Click="Button_Click">MC</Button>
            <Button Grid.Row="2" Grid.Column="1" Click="Button_Click">MR</Button>
            <Button Grid.Row="2" Grid.Column="2" Click="Button_Click">MS</Button>
            <Button Grid.Row="2" Grid.Column="3" Click="Button_Click">M+</Button>
            <Button Grid.Row="2" Grid.Column="4" Click="Button_Click">M-</Button>

            <!--第2行按键-->
            <Button Grid.Row="3" Click="Button_Click">←</Button>
            <Button Grid.Row="3" Grid.Column="1" Click="Button_Click">CE</Button>
            <Button Grid.Row="3" Grid.Column="2" Click="Button_Click">C</Button>
            <Button Grid.Row="3" Grid.Column="3" Click="Button_Click">?</Button>
            <Button Grid.Row="3" Grid.Column="4" Click="Button_Click">√</Button>

            <!--第3行按键-->
            <Button Grid.Row="4" Click="Button_Click">7</Button>
            <Button Grid.Row="4" Grid.Column="1" Click="Button_Click">8</Button>
            <Button Grid.Row="4" Grid.Column="2" Click="Button_Click">9</Button>
            <Button Grid.Row="4" Grid.Column="3" Click="Button_Click">/</Button>
            <Button Grid.Row="4" Grid.Column="4" Click="Button_Click">%</Button>

            <!--第4行按键-->
            <Button Grid.Row="5" Click="Button_Click">4</Button>
            <Button Grid.Row="5" Grid.Column="1" Click="Button_Click">5</Button>
            <Button Grid.Row="5" Grid.Column="2" Click="Button_Click">6</Button>
            <Button Grid.Row="5" Grid.Column="3" Click="Button_Click">*</Button>
            <Button Grid.Row="5" Grid.Column="4" Click="Button_Click">1/x</Button>

            <!--第5行按键-->
            <Button Grid.Row="6" Click="Button_Click">1</Button>
            <Button Grid.Row="6" Grid.Column="1" Click="Button_Click">2</Button>
            <Button Grid.Row="6" Grid.Column="2" Click="Button_Click">3</Button>
            <Button Grid.Row="6" Grid.Column="3" Click="Button_Click">-</Button>
            <Button Grid.Row="6" Grid.Column="4" Grid.RowSpan="2" VerticalAlignment="Stretch" Click="Button_Click">=</Button>

            <!--第6行按键-->
            <Button Grid.Row="7" Grid.ColumnSpan="2" VerticalAlignment="Stretch" Click="Button_Click"></Button>
            <Button Grid.Row="7" Grid.Column="2" Click="Button_Click">.</Button>
            <Button Grid.Row="7" Grid.Column="3" Click="Button_Click">+</Button>
        </Grid>

完整代码

  补充点:* 和 auto (举一个简单例子)

  

  

2.布局控件 - StackPanel

  类似于 HTML 中的 DIV 标签;

  用于将子元素沿 垂直/水平(Orientation)方向排布;

  如果子内容超出面板,则会超出面板边界,但视觉上会被截断。

  案例

  

我们平时对齐方式是 HorizontalAlignment和VerticalAlignment,Orientation是StackPanel等的排布方式,不要搞混淆

  

3.布局控件 - Canvas(画布)

  Canvas 中的每一个元素就相当于在 HTML 中设置了 “position:absolute”;

  可以通过 Canvas.Left、Canvas.Top 设置定位位置;

  可以使用 Canvas.ZIndex 附加属性明确指定分层

  案例:(图形化设置背景用 fill 来填充)

  

  效果:

  

 <!--
    可以把他理解为绝对定位
    Top 距离顶端
    Left 距离左边
    ZIndex Z坐标轴
    -->
    <Canvas>
        <Button Background="Beige" Width="100" Height="100"></Button>
        <Button Background="Blue" Canvas.Left="50" Canvas.Top="50" Width="100" Height="100"></Button>
        <Button Background="Chartreuse" Canvas.ZIndex="1" Canvas.Left="100"  Canvas.Top="100" Width="100" Height="100"></Button>
        <Button Background="Red" Canvas.Left="150"  Canvas.Top="150" Width="100" Height="100"></Button>

        <!--图形系列(Canvas里面用的比较多):背景用Fill来填充-->

        <!--正方形-->
        <Rectangle Width="300" Height="300" Fill="Yellow" Opacity="0.7" Canvas.ZIndex="-1"></Rectangle>

        <!--矩形-->
        <Rectangle Width="300" Height="200" Fill="Yellow" Opacity="0.7" Canvas.Top="50" Canvas.ZIndex="-1"></Rectangle>

        <!--圆形-->
        <Ellipse Width="100" Height="100" Fill="Pink" Opacity="0.9" Canvas.ZIndex="9" Canvas.Left="120" Canvas.Top="120"></Ellipse>

        <!--椭圆-->
        <Ellipse Width="100" Height="50" Fill="Black" Opacity="0.1" Canvas.ZIndex="9" Canvas.Left="120" Canvas.Top="150"></Ellipse>
    </Canvas>

4.布局控件 - VariableSizedWrapGrid

  元素以行或列排列,当达到 MaximumRowsOrColumns 值会时会自动换行至新行或新列。

  由 Orientation 属性指定是按行还是列排列元素。

  通过使用附加属性 VariableSizedWrapGrid.RowSpan 和 VariableSizedWrapGrid.ColumnSpan,内容可跨越多行和多列。

  根据 ItemHeight 和 ItemWidth 属性的指定设置元素大小。

  不需要定义行和列的 Grid

  案例:(磁贴和非正常布局使用,一般不怎么用)

  

  效果:

  

<Page
    x:Class="_05.AllControls._1.Layout._VariableSizedWrapGrid"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:_05.AllControls._1.Layout"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3">
        <Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
        <Rectangle VariableSizedWrapGrid.ColumnSpan="2" Fill="Yellow" Width="100" Height="100"></Rectangle>
        <Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
        <Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
        <Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
        <Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
        <Rectangle VariableSizedWrapGrid.RowSpan="2" Fill="Yellow" Width="100" Height="100"></Rectangle>
        <Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
        <Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
        <Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
    </VariableSizedWrapGrid>
</Page>

注意:如果发现打完代码没反应==>按图示操作:

时间: 2024-10-21 14:50:31

07.移动先行之谁主沉浮----控件之轮流轰炸——布局类控件的相关文章

09.移动先行之谁主沉浮----控件之轮流轰炸——高级控件

如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 移动先行之谁主沉浮? 带着你的Net飞奔吧! 链接======>(点)

08.移动先行之谁主沉浮----控件之轮流轰炸——常用控件

如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 移动先行之谁主沉浮? 带着你的Net飞奔吧! 链接======>(点)

布局与控件(一)——布局与控件的常用概念

第1节 布局与控件的常用概念 界面设计中的控件,就是我们常常看到的按钮 滑动条 文字显示区等等,它们就像房间里的家具,是界面设计的最小单位. 布局是一个可以容纳别的布局(或者控件)的容器.它就像是一个大的房间,房间里面可以放各种家具(控件),也可以再隔离成更多的房间(放入别的布局). 不过,两者有很多共同的地方,例如定义它们的大小.边距等等. 1.1 尺寸单位 在使用布局或控件时,有时需要指定它们的尺寸.安卓系统提供了三种单位: px:以像素为单位进行设置,屏幕上每一个点,就是一个像素,例如一部

重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性

[源码下载] 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性 作者:webabcd介绍重新想象 Windows 8.1 Store Apps 之控件增强 文本类控件的增强 为一些控件增加了 Header 属性和 HeaderTemplate 属性 为一些控件增加了 PlaceholderText 属性 示例1.演示

转载几篇别人写的皮肤类控件的技术文章

原连接:http://blog.sina.com.cn/s/blog_4c3538470100ezhu.html 实现控件的透明背景 很多情况下,我们需要控件 的背景是透明的,就是要求直接看到控件父窗口的背景颜色.背景位图,比如标签控件.单选Radio控件.复选Check控件,通常都要求在父窗口的背景上 进行绘制.然而要求控件的画布透明,这个技术在GDI的文档中没有看到Microsoft作任何说明,当然还是有别的办法. 其一: 如果程序支持桌面主题服务的话,则可调用主题服务的API来实现背景.我

第一篇:初识ASP.NET控件开发_第一节:控件类及其继承关系

1)System.Web.UI.Control(以下简称Control) Control 类是包括自定义控件.用户控件和页在内的所有 ASP.NET 服务器控件的基类..定义由所有 ASP.NET 服务器控件共享的属性.方法和事件. 命名空间:System.Web.UI程序集:System.Web(在 system.web.dll 中) 2)System.Web.UI.WebControls.WebControl(以下简称WebControl) WebControl 类是 System.Web.

Atitit. BigConfirmTips 控件 大数据量提示确认控件的原理and总结O9

Atitit. BigConfirmTips 控件 大数据量提示确认控件的原理and总结O9 1. 主要的涉及的技术 1 2. 主要的流程 1 3. 调用法new confirmO9t(); 1 4. 设置确认在后的回溯事件 c.backHandle="window.opener.confirmSubmitBackeventHandle"; 2 5. 设置详细表格显示模板  c.tmplt="/publish/lookOverdetail_templt.jsp";

C#控件系列--文本类控件

C#控件系列--文本类控件 文本类控件主要包括Label.LinkLabel.Button.TextBox以及RichTextBox. Label 功能 Label用来显示用户不能直接改变的文本信息. 属性 Image--指定标签上显示的图像. Text--此属性是与文件相关联的文本. Name--标识对象的名称. AutoSize--如果此属性为true,则启用了根据字号自动调整大小.请注意,这只对文本不换行的标签控件有效. Enabled--是否启用该控件. Visible--可见还是隐藏.

谷歌约束控件(ConstraintLayout)扁平化布局入门

序 在Google IO大会中不仅仅带来了Android Studio 2.2预览版,同时带给我们一个依赖约束的库. 简单来说,她是相对布局的升级版本,但是区别与相对布局更加强调约束.何为约束,即控件之间的关系. 她能让你的布局更加扁平化,一般来说一个界面一层就够了:同时借助于AS我们能极其简单的完成界面布局. 准备 1.准备好Android Studio 2.2预览版,在这里给大家准备好了下载链接: https://dl.google.com/dl/android/studio/ide-zip