wpf Grid布局详解 `Auto` 和 `*` 是两种常见的设置方式 行或列占多个单元格,有点像excel里的合并单元格。使其余的列平均分配剩余的空间

news2024/11/23 14:58:46

比如只有行的界面

在这里插入图片描述

<Window x:Class="GenerateTokenApp.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:GenerateTokenApp"
        mc:Ignorable="d"
        Title="Generate Token App" Height="450" Width="800" Closed="Window_Closed">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Grid.Row="0" x:Name="SelectFileButton" Content="Select File" Margin="10,10,10,0" Height="100" Click="SelectFileButton_Click" FontSize="36"/>
        <Button x:Name="GenerateTokenButton" Content="Generate Token" HorizontalAlignment="Left" Margin="10,50,0,0" VerticalAlignment="Top" Width="200" Click="GenerateTokenButton_Click" Visibility="Collapsed"/>
        <TextBox Grid.Row="1" x:Name="LogTextBox" Margin="10" TextWrapping="Wrap" />
    </Grid>
</Window>

行或列占的比例

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="120*"/>
            <ColumnDefinition Width="167*"/>
            <ColumnDefinition Width="448*"/>
            <ColumnDefinition Width="65*"/>
        </Grid.ColumnDefinitions>

Width 属性的值在 WPF 中决定了一个元素在水平方向上的大小。Auto* 是两种常见的设置方式,它们有不同的含义:

  1. Width="Auto":

    • 当一个元素的宽度设置为 “Auto” 时,它的宽度会自动调整以适应其内容的大小。
    • 元素会根据内部的内容或子元素来决定其宽度,以确保内容完全可见。
    • 这通常用于文本框、按钮等元素,以使它们的宽度适应其文本内容。
  2. Width="*":

    • 当一个元素的宽度设置为 “*” 时,它会占据剩余的可用空间。
    • 如果容器中有多个元素,其中一个设置了宽度为 “*”,其余的元素可以是 “Auto” 或具有固定宽度,它们将平均分配可用的空间。
    • 这通常用于在容器中进行比例布局,以使元素根据其 “Weight” 来分配可用的水平空间。

示例:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />  <!-- 宽度适应内容 -->
        <ColumnDefinition Width="*" />      <!-- 占据剩余空间 -->
        <ColumnDefinition Width="2*" />     <!-- 占据剩余空间的两倍 -->
    </Grid.ColumnDefinitions>
    
    <Button Grid.Column="0" Content="按钮1" />     <!-- 宽度适应内容 -->
    <Button Grid.Column="1" Content="按钮2" />     <!-- 占据剩余空间 -->
    <Button Grid.Column="2" Content="按钮3" />     <!-- 占据剩余空间的两倍 -->
</Grid>

在上述示例中,第一个按钮的宽度适应其内容,第二个按钮占据剩余的空间,而第三个按钮占据了剩余空间的两倍。这是使用 Auto* 来定义列的一个简单示例。

行或列占多个单元格,有点像excel里的合并单元格。

比如 从第0列起占4列

Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="4"

如果你想要创建一个宽度为 120 个逻辑单位的列,并使其余的列平均分配剩余的空间,你可以这样做:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="120"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    
    <!-- 第一列宽度为 120 -->
    <Button Grid.Column="0" Content="按钮1" />
    
    <!-- 第二列和第三列平均分割剩余空间 -->
    <Button Grid.Column="1" Content="按钮2" />
    <Button Grid.Column="2" Content="按钮3" />
</Grid>

上述示例中,第一列的宽度是固定的 120 个逻辑单位,而第二列和第三列平均分配了剩余的可用空间。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1180213.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GoLong的学习之路(二十)进阶,语法之反射(reflect包)

这个是为了接上之前的语法篇的。按照我的学习计划&#xff0c;这里此时应该有一个小项目来做一个统合。但是吧&#xff0c;突然觉得&#xff0c;似乎也没必要。能学go的大部分肯定都是有其他语言的基础的。 接下来说反射 文章目录 反射介绍reflect包TypeOftype name和type kin…

重磅!OpenAI发布GPT-4 Turbo,史上最强ChatGPT来了!

11月7日凌晨&#xff0c;OpenAI在美国旧金山举办首届开发者大会&#xff0c;与来自全球的开发者、企业、合作伙伴分享了最新产品。 微软首席执行官Satya Nadella作为特邀嘉宾出席了此次盛会。 会上&#xff0c;OpenAI发布了128K 上下文的GPT-4 Turbo、自定义GPT、DALLE 3 API…

vscode中 vue3+ts 项目的提示失效,volar插件失效问题解决方案

文章目录 前情提要bug回顾解决方案最后 前情提要 说起来很耻辱&#xff0c;从mac环境换到window环境&#xff0c;vscode的配置都是云端更新过来的&#xff0c;应该是一切正常才对&#xff0c;奇怪的是我的项目环境出现问题了&#xff0c;关于组件的ts和追踪都没有效果&#xff…

Ansible入门—安装部署及各个模块应用案例(超详细)

目录 前言 一、环境概况 修改主机名&#xff08;可选项&#xff09; 二、安装部署 1.安装epel扩展源 2.安装Ansible 3.修改Ansible的hosts文件 4.生成密钥 三、Ansible模块使用介绍 Command模块 Shell模块 User模块 Copy模块 File模块 Hostname模块 Yum模块 Se…

企业数字展厅该如何设计?

设计企业数字展厅涉及创建一个虚拟空间&#xff0c;以引人入胜的沉浸式方式展示公司的产品、服务和品牌。以下步骤可帮助设计有效的数字展厅&#xff1a; 1.定义目标&#xff1a; 确定数字展厅的用途。是为了潜在客户开发、产品展示、品牌推广还是其他目的&#xff1f;明确的…

LoRaWan模块应用于智慧城市景观灯

智能路灯作为一种新型的市政公用设施&#xff0c;它不仅具备了常规的照明能力&#xff0c;还具备各种智能装置和感应器&#xff0c;能够实现对太阳的自发充电&#xff1b;视频监控&#xff0c;环境监测等多种应用。智能路灯集成了各种新型的设备&#xff0c;是智慧都市的基础&a…

还在按键进入BIOS?其实进入BIOS有更便捷的方法

在能够配置各种硬件参数之前,首先必须学习进入ASUS BIOS实用程序的正确方法。无论你面对的是PRIME、ROG、TUF GAMING还是任何其他型号,所涉及的步骤都是相同的。 华硕主板的BIOS访问键通常是“F2”或“Del”键。在启动或启动屏幕期间,只要ASUS徽标出现,就重复按下此键以进…

响应式建筑地产工程企业网站模板源码带后台

模板信息&#xff1a; 模板编号&#xff1a;9157 模板编码&#xff1a;UTF8 模板颜色&#xff1a;多色 模板分类&#xff1a;基建、施工、地产、物业 适合行业&#xff1a;建筑施工类企业 模板介绍&#xff1a; 本模板自带eyoucms内核&#xff0c;无需再下载eyou系统&#xf…

nuxt项目:vant打包后样式顺序错乱问题及解决方案

不要引入vant/nuxt这个 需要的时候引入即可

C++ set 的使用

set 的介绍 set是按照一定次序存储元素的容器在set中&#xff0c;元素的value也标识它(value就是key&#xff0c;类型为T)&#xff0c;并且每个value必须是唯一的。 set中的元素不能在容器中修改(元素总是const)&#xff0c;但是可以从容器中插入或删除它们。在内部&#xff0…

CSS时间线样式

css实现时间线样式&#xff0c;效果如下图&#xff1a; 一、CSS代码 .timeline {padding-left: 5px} .timeline-item { position: relative;padding-bottom: 20px;} .timeline-axis {position: absolute;left: -5px;top: 0;z-index: 10;width: 20px;height: 20px;line-he…

抢购狂欢:跨境电商的区域购物节

随着全球贸易的不断扩展和数字化技术的崭新发展&#xff0c;跨境电商行业已经蓬勃发展&#xff0c;为消费者和商家带来了前所未有的便捷和机会。 其中&#xff0c;区域购物节已成为跨境电商领域的一大亮点&#xff0c;为在线消费者和电商平台提供了一个令人兴奋的购物体验。本…

在web页面音视频录制并下载到本地——MediaRecorder

音视频录制前需要获取到流&#xff0c;使用 navigator.mediaDevices 来完成。 navigator.mediaDevices MediaDevices 接口提供访问连接媒体输入的设备&#xff0c;如照相机和麦克风&#xff0c;以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。 简单介绍一下MediaDe…

外贸SEO前景怎么样?外贸网站优化的方法?

网站做外贸SEO的前景如何&#xff1f;谷歌SEO对海洋建站的影响&#xff1f; 外贸SEO前景一直备受关注&#xff0c;特别是在全球化经济的今天。随着跨境电子商务的崛起&#xff0c;外贸企业越来越重视搜索引擎优化来提升他们的在线可见性。顺风船将探讨外贸SEO前景的各个方面&a…

Synchronized关键字使用不合理,导致的多线程下线程阻塞问题排查

在为客户进行性能诊断调优时&#xff0c;碰到了一个Synchronized关键字使用不合理导致多线程下线程阻塞的情况。用文字记录下了问题的整个发现-排查-分析-优化过程&#xff0c;排查过程中使用了商业化产品——XLand性能分析平台&#xff0c;通过文章主要希望跟大家分享下分析和…

pycharm pro v2023.2.4(Python开发)

PyCharm是一种Python集成开发环境&#xff08;IDE&#xff09;&#xff0c;PyCharm提供了强大的功能&#xff0c;包括语法突出显示、智能代码完成、代码检查、自动重构和调试等特性&#xff0c;这些都可以帮助Python开发人员更加高效地编写代码。 PyCharm Pro是PyCharm的高级版…

SSM整合redis及redis的注解式开发和解决Redis缓存问题

一.SSM整合Redis 1.pom配置 用于解决运行时没有将数据库配置信息jdbc.properites加载到target文件中 <resource><directory>src/main/resources</directory><includes><include>*.properties</include><include>*.xml</includ…

《巧用ChatGPT快速提高职场晋升力》书籍推荐【包邮送书五本】

文章目录 书籍介绍内容介绍ChatGPT 在人工智能助手领域的应用1 智能客服2 语音助手3 个人助手4 内容创作与编辑5 数据分析与报告生成6 社交媒体管理7 智能编程助手 抽奖送书 书籍介绍 ★超实用 通过30多个实战案例和操作技巧&#xff0c;使读者能够快速上手并灵活运用ChatGPT技…

操作系统:银行家算法

文章目录 银行家算法一、实验目的二、实验要求与内容、过程与结果 系列文章 银行家算法 一、实验目的 1、理解银行家算法。 2、掌握进程安全性检查的方法及资源分配方法。 二、实验要求与内容、过程与结果 1、将图5-1补充完整&#xff0c;画出银行家算法的流程图。 图5-1 银…

el-table给某一行加背景色

数据列表中总价大于100的一行背景色为红色&#xff0c;效果图如下&#xff1a; 代码示例&#xff1a; <template><div id"app"><!-- 测试区域&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&am…