WPF深入浅出学习笔记 UI布局

WPF 专栏收录该内容
19 篇文章 0 订阅

         WPF布局元素:Grid、StackPanel、DockPanel、Canvas、WarpPanel

 一、   Grid:网格。可以通过自定义行列并通过行列的数量、行高和列宽来调整控件的布局。

  1、Grid行列的定义

   <Grid>
        <!--划分列-->
        <Grid.ColumnDefinitions>
            <!--有多少个<ColumnDefinition/>则代表分为几列-->
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <!--划分行-->
        <Grid.RowDefinitions>
            <!--有多少个<RowDefinition/>则分为多少列-->
            <RowDefinition />
            <RowDefinition/>
        </Grid.RowDefinitions>
    </Grid>
</Window>

  2、列宽和行高的控制,注意列只能控制宽度,行只能控制高度

对于行高和列宽的我们可以设置为三类值:

        绝对值:double 数值加单位后缀

        比例值:double数值加一个星号 *

        自动值:字符串Auto

        三者对比:当改变容器的尺寸时,使用绝对值的行高列宽不会改变而使用比例值的行高会保持固有的比例。当使用自动值为行高列宽赋值时,行高列宽的实际值将由行列内控件的高度和宽度决定,如果行列中没有控件则行高列宽均为0

行高:

 <!--划分行-->
        <Grid.RowDefinitions>
            <!--有多少个<RowDefinition/>则分为多少行-->
            <RowDefinition Height="25"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="4"/>
            <RowDefinition Height="25"/>
        </Grid.RowDefinitions>

列宽:

 <!--划分列-->
        <Grid.ColumnDefinitions>
            <!--有多少个<ColumnDefinition/>则代表分为几列-->
            <ColumnDefinition Width="Auto" MinWidth="120" />
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="80"/>
            <ColumnDefinition Width="4"/>
            <ColumnDefinition Width="80"/>
        </Grid.ColumnDefinitions>

 3、插入控件

控件相关知识:

WPF深入浅出学习笔记 控件_陈先生☁的博客-CSDN博客

  <!--使用Grid.Column="" Grid.Row=""为控件指定行列-->
        <TextBlock Text="请选择您的部门并留言;" Grid.Column="0" Grid.Row="0" VerticalAlignment="Center"/>
        <ComboBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="4"/>
        <TextBox Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="5" BorderBrush="Black"/>
        <Button Grid.Column="2" Grid.Row="4" Content="确定"/>
        <Button Grid.Column="4" Grid.Row="4" Content="清除"/>

二、StackPanel(堆栈面板)

        1、三个属性

     2、特点和适用场合

        特点:移除元素后,它后面的元素会整体向前移动、补占原有元素的空间

        适用场合:

                同类元素需要紧凑排列(如制作菜单表格)

                移除其中元素后能够自动补缺的布局或者动画

      3、实践:选择题界面制作

<Window x:Class="StackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:StackPanel"
        mc:Ignorable="d"
        Title="选择题" Height="190" Width="300">
    <Grid>
        <GroupBox Header="请选择没有错别字的成语" BorderBrush="Black" Margin="5">
            <StackPanel Margin="5">
                <CheckBox Content="A.迫不及待"/>
                <CheckBox Content="B.背曲一指"/>
                <CheckBox Content="C.陈词烂调"/>
                <CheckBox Content="D.唉声叹气"/>
                <CheckBox Content="E.不可礼喻"/>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Content="清空" Width="60" Margin="5"/>
                    <Button Content="确定" Width="60" Margin="5"/>
                </StackPanel>
            </StackPanel>
        </GroupBox>
    </Grid>
</Window>

三、WrapPanel

        特点:流布式布局,Orientation  控制流延伸的方向 ,会排列尽可能多的控件,排不下的控件将会新起一行或一列继续排列

未完成

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

谨以《深入浅出WPF》,呈现一种掌握WPF的轻松方式,分享一个微软技术粉丝的治学精神。深入之美 精辟分析WPF源代码,洞察功能背后隐藏的深刻设计理念,浅出之美 最浅显的生活案例,融化最抽象的高级概念。   分离之美 掌握UI与逻辑如何真正分离,享受变与不变的快感,自然之美 全新的数据驱动UI理念,让数据重归核心地位。   感观之美 强大的图形引擎,实现绝对震撼的UI视觉   《深入浅出WPF》精华:   深入浅出话XAML   深入浅出话Binding   深入浅出话属性   深入浅出话事件   深入浅出话命令   深入浅出话资源   深入浅出话模板   深入浅出话绘图及动画 目录 写作缘起 WPF之What & Why 致谢 第一部分 深入浅出话XAML 第1章 XAML概览 1.1 XAML是什么 1.2 XAML的优点 第2章 从零起步认识XAML 2.1 新建WPF项目 2.2 剖析最简单的XAML代码 第3章 系统学习XAML语法 3.1 XAML文档的树形结构 3.2 XAML中为对象属性赋值的语法 3.2.1 使用标签的Attribute为对象属性赋值 3.2.2 使用TypeConverter类将XAML标签的Attribute与对象的Property进行映射 3.2.3 属性元素 3.2.4 标记扩展(Markup Extensions) 3.3 事件处理器与代码后置 3.4 导入程序集和引用其中的名称空间 3.5 XAML的注释 3.6 小结 第4章 x名称空间详解 4.1 x名称空间里都有什么 4.2 x名称空间中的Attribute 4.2.1 x:Class 4.2.2 x:ClassModifier 4.2.3 x:Name 4.2.4 x:FieldModifier 4.2.5 x:Key 4.2.6 x:Shared 4.3 x名称空间中的标记扩展 4.3.1 x:Type 4.3.2 x:Null 4.3.3 标记扩展实例的两种声明语法 4.3.4 x:Array 4.3.5 x:Static 4.4 XAML指令元素 4.5 小结 第5章 控件与布局 5.1 控件到底是什么 5.2 WPF的内容模型 5.3 各类内容模型详解 5.3.1 ContentControl族 5.3.2 HeaderedContentControl族 5.3.3 ItemsControl族 5.3.4 HeaderedltemsControl族 5.3.5 Decorator族 5.3.6 TextBlock和TextBox 5.3.7 Shape族元素 5.3.8 Panel族元素 5.4 UI布局(Layout) 5.4.1 布局元素 5.4.2 Grid 5.4.3 StackPanel 5.4.4 Canvas 5.4.5 DOCkPanel 5.4.6 WrapPanel 5.5 小结 第二部分 游历WPF内部世界 第6章 深入浅出话Binding 6.1 Data Binding在WPF中的地位 6.2 Binding基础 6.3 Binding的源与路径 6.3.1 把控件作为Binding源与Binding标记扩展 6.3.2 控制Binding的方向及数据更新 6.3.3 Binding的路径(Path) 6.3.4 “没有Path”的Binding 6.3.5 为Binding指定源(Source)的几种方法 6.3.6 没有Source的Binding——使用DataContext作为Binding的源 6.3.7 使用集合对象作为列表控件的ItemsSource 6.3.8 使用ADO.NET对象作为Binding的源 6.3.9 使用XML数据作为Binding的源 6.3.10 使用LINQ检索结果作为Binding的源 6.3.11 使用ObjectDataProvider对象作为Binding的Source 6.3.12 使用Binding的RelativeSource 6.4 Binding对数据的转换与校验 6.4.1 Binding的数据校验 6.4.2 Binding的数据转换 6.5 MultiBinding(多路Binding) 6.6 小结 第7章 深入浅出话属性 7.1 属性(Property)的来龙去脉 7.2 依赖属性(DependencyProperty) 7.2.1 依赖属性对内存的使用方式 7.2.2 声明和使用依赖属性 7.2.3 依赖属性值存取的秘密 7.3 附
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

陈先生☁

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值