正文

wpf笔记(2.4grid)

杨铭宇  杨铭宇  2022-09-02  743

关键词：

第一章已经简单介绍过这个容器，这一节详细介绍。
Grid一般是用表格(Grid.Row 和Grid.Column )的，比StackPanel更细致一些，但是，这么玩很麻烦，先横着竖着定义一大堆，然后把元素指定其表格位置，即插入数据，和我们平常习惯的HTML表格不太一样，甚至更麻烦了。
原因如下：Html空单元格要放占位符，这样会放很多；Grid玩法则是用什么元素就指定单元格位置，不用的单元格默认是空，不用指定。另外，Grid单元格中的多个控件可以按照Z轴堆叠，这个顺序是由控件在xaml上的出现顺序决定的。

Grid列宽的定义：

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

第一种，固定长度——宽度不够，会裁剪，不好用。单位pixel。
第二种，自动长度——自动匹配列中最长元素的宽度。
第三种，比例长度——*表示占用剩余的全部宽度；两行都是*，将平分剩余宽度；像上面的一个2*，一个*，表示前者2/3宽度。

单元格合并，1.4已经介绍过，这里强调一点，虽然一个控件A跨越2个单元格，但是并未改变原来Grid的所有单元格，也就是说，这是两个对象Grid和控件A，互相不影响。那么，另一个控件B仍然可以使用这两个单元格中的一个，最后根据A与B的先后出现顺序会有重叠效果。这是不同于html单元格合并概念的。这段话是我自己想的，多精辟啊，一针见血。终于对xaml有点感觉了。

接下来讲的是多个Grid共享宽度组的技术。smaple讲的是把grid放入ScrollViewer中，但是一旦滚动ScollBar，grid的Title会跟着一起滚动，为了做到滚动时Title定住不动，要做两个Grid：一个放Title；另一个放主体，并嵌套进ScrollViewer中。这样滚动问题解决了，另一个问题又出现了，就是两个Grid的字段对不齐，于是要使用shared-size组。

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

//省略若干行代码

<Border Grid.Column="0" Grid.Row="0" BorderThickness="1"

Background="LightGray" BorderBrush="Gray">

<TextBlock>Title</TextBlock>

</Border>

<Border Grid.Column="1" Grid.Row="0" BorderThickness="1"

Background="LightGray" BorderBrush="Gray">

<TextBlock>Location</TextBlock>

</Border>

<Border Grid.Column="2" Grid.Row="0" BorderThickness="1"

Grid.ColumnSpan="2"

Background="LightGray" BorderBrush="Gray">

</Border>

<FrameworkElement Grid.Column="3"

Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />

</Grid>

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

//省略若干行代码

</Grid>

</ScrollViewer>

</DockPanel>

首先，在DockPanel 设置共享：Grid.IsSharedSizeScope="True"。这样做的目的是使得DockPanel外的同名列不受影响。
DockPanel中两个容器，Grid和ScrollViewer，前者设置标题，后者内嵌Grid，装载内容行(红色字体)。
先说Grid，有4列，接着，设置第二列第三列为Shared-size Group，第一列宽度为*(自适用)；第四列的增加是因为width=*对SharedSize无效，所以增加这一列为ScrollBar占位：
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />
                <ColumnDefinition Width="Auto" />

Rank跨占了2列，为了兼容多生成的第四列，
            <Border Grid.Column="2" Grid.Row="0" BorderThickness="1"
                    Grid.ColumnSpan="2"
                    Background="LightGray" BorderBrush="Gray">
                <TextBlock>Rank</TextBlock>
            </Border>
接着，设置Grid第4列为滚动条宽度，于是因为Rank跨占了2列，所以Rank宽度为自己最大宽度+滚动条宽度，这样就保证了后面的都对齐了，从而前面第一列也对齐了：
          <FrameworkElement Grid.Column="3"
               Width="{DynamicResource {x:Static SystemParameters.ScrollWidthKey}}" />

再说ScrollViewer容器，在内嵌的Grid中设置Shared-size Group与第一个Grid中的列相对应：
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Location" />
                    <ColumnDefinition Width="Auto" SharedSizeGroup="Rank" />

注：这里用到了DynamicResource ，而不是StaticResource，具体技术见第6章。

分析完毕。

《深入浅出wpf》学习笔记之绘图和动画

绘图通过WPF绘制的图形都是矢量图，可以通过Design或Blend工具绘制原型图然后导出XAML再在VisualStudio中调整。绘图可以在任意布局控件中完成，常用的为Canvas和Grid，WPF会自动根据容器的不同计算图形坐标。WPF基本图像都继承自Shape... 查看详情

[wpf]关于grid

设置某controller在Grid中的位置有两种方法：方法1：1textBlock1.SetValue(Grid.RowProperty,0);//设置控件textBlock1的行位置为第1行2textBlock1.SetValue(Grid.ColumnProperty,0);//设置控件textBlock1的列位置为第1列3textBlock2.SetValue(Grid.RowProper 查看详情

WPF 在 XAML 中使用 Grid 显示表格

】WPF在XAML中使用Grid显示表格【英文标题】：WPFshowingTableusingGridinXAML【发布时间】：2020-08-2009:53:36【问题描述】：我正在尝试在WPF中使用XAML中的Grid显示表格。我的WPF应用程序中的XAML代码是这样的-<GridShowGridLines="True"Background="Ye... 查看详情

wpf:共享grid宽度或高度的方法(代码片段)

需要两个属性：1.Grid.IsSharedSizeScope="True"2.SharedSizeGroup=名称 <StackPanelMargin="15"Grid.IsSharedSizeScope="True"><Grid><Grid.ColumnDefinitions><ColumnDefinitionWidth="Auto"Shar 查看详情

wpf绑定bindingelementnamepath(代码片段)

一：BindingElementName=grid0,Path=HeightElementName=grid0：查找到名为grid0的控件。,Path=Height：获取名为grid0的控件的Height属性值。即：将Lb1的属性值设置为grid0控件的Height属性设置值。<GridName="grid0"><Grid><StackPanelBackgroun 查看详情

代码中的 WPF 动画 Grid.VisibilityProperty

】代码中的WPF动画Grid.VisibilityProperty【英文标题】：WPFAnimateGrid.VisibilityPropertyincode【发布时间】：2017-03-0217:37:16【问题描述】：哪个动画类可以让我在代码（不是XAML）中使用Storyboard实例更改Grid对象的可见性（不是不透明度）？... 查看详情

wpfのgrid布局的深度理解

以下以row定义说明问题，列类似： <Grid> <Grid.RowDefinitions> <RowDefinition/ 查看详情

wpf打印控件内容

当我们想打印控件内容时，如一个Grid中的内容，可以用WPF中PrintDialog类的PrintVisual()方法来实现界面如下：XAML代码如下1<Grid>2<Grid.ColumnDefinitions>3<ColumnDefinition/>4<ColumnDefinitionWidth="300"/>5</Grid.ColumnD 查看详情

wpf里面如何用画线把两个grid连接起来

参考技术A两个grid怎么连钱起来？有示意图么？查看详情

在 WPF 中的许多控件中更改 Grid.Row 和 Grid.Column 的简单方法

】在WPF中的许多控件中更改Grid.Row和Grid.Column的简单方法【英文标题】：EasywaytochangeGrid.RowandGrid.ColumninmanycontrolsinWPF【发布时间】：2011-10-2706:03:59【问题描述】：我已经遇到过1000次这种情况：我有2列和多行的网格。大多数情况下... 查看详情

Grid.children.clear 线程错误 xmpp wpf

】Grid.children.clear线程错误xmppwpf【英文标题】：Grid.children.clearthreaderrorxmppwpf【发布时间】：2013-05-3107:01:45【问题描述】：我正在调用具有Grid.Children.Clear()功能的方法。从不同的方法调用它时效果很好。但是当我从xmpp_onmessage方法... 查看详情

wpfの获取任意元素的位置

原文:WPFの获取任意元素的位置如果布局在Grid中：方法一：　　//_stackPanel为子元素，_grid为父元素　　Pointpoint=_stackPanel.TranslatePoint(newPoint(0,0),(UIElement)_grid);　　方法二：　　//_stackPanel为子元素，_grid为父元素　　GeneralTransformgener... 查看详情

如何切换 WPF Grid 列的可见性

】如何切换WPFGrid列的可见性【英文标题】：HowtotoggleaWPFGridcolumnvisibility【发布时间】：2010-11-1603:25:01【问题描述】：我无法在我正在开发的WPF应用程序中使用它。基本上，我所追求的是类似于MMC中的任务窗格：该应用程序在显示... 查看详情

DockPanel 中的 WPF4 TabControl/Grid 隐藏了 StatusBar

】DockPanel中的WPF4TabControl/Grid隐藏了StatusBar【英文标题】：WPF4TabControl/GridinaDockPanelishidingStatusBar【发布时间】：2011-04-2715:54:45【问题描述】：我有一个窗口，里面有一个包含3个元素的DockPanel、一个停靠在顶部的MenuBar、一个停靠在... 查看详情

wpf中grid后面总是多一空白行(代码片段)

<Grid><dxg:GridControlName="gridErrorsInfo"AutoPopulateColumns="True"ShowBorder="False"ShowLoadingPanel="False"HorizontalAlignment="Stretch"VerticalAlignment="Stretch"AllowColumnMRUFilterList 查看详情

WPF Grid - 如何为一列应用样式？

】WPFGrid-如何为一列应用样式？【英文标题】：WPFGrid-Howtoapplyastyleforjustonecolumn?【发布时间】：2010-10-2511:45:14【问题描述】：我有一个WPF网格，其中包含许多行和列，都包含诸如TextBlocks和TextBoxes之类的内容。对于这种特定情况，... 查看详情

WPF Grid不显示滚动条

】WPFGrid不显示滚动条【英文标题】：WPFGridnotshowingscrollbars【发布时间】：2014-12-3111:03:57【问题描述】：在.NET3.5中，我在窗口中有一个网格。我正在用按钮填充这个网格。当按钮填满网格并消失时，网格不会显示滚动条。我已将... 查看详情

wpf中的grid使用分割器gridsplitter为啥拉不动

其实可以根据图片在Grid的行号和列号来指定图片的URL。grid的每行每列都放入一个image，可以对image的url在后台进行不同的设定参考技术A你能否贴上前台的xaml的代码，这样有助于分析查看详情