wpf研究之道-grid控件

时间：2023-12-24 10:36:43

　　想要说些什么，却不知道从哪开始。”形而上谓之道，形而下谓之器”。与其坐而论道，不如脚踏实地，从最实用的地方开始。

我们先来看看wpf中的grid控件。grid控件是个网格的布局控件，类似于网页中的table。我们看看一个例子：

     <Grid x:Name="condtionGrid" Height="">

             <Grid.ColumnDefinitions>

                 <ColumnDefinition></ColumnDefinition>

                 <ColumnDefinition></ColumnDefinition>

                 <ColumnDefinition></ColumnDefinition>

                 <ColumnDefinition></ColumnDefinition>

             </Grid.ColumnDefinitions>

             <Grid.RowDefinitions>

                 <RowDefinition></RowDefinition>

                 <RowDefinition></RowDefinition>

                 <RowDefinition></RowDefinition>

             </Grid.RowDefinitions>

             <Label Content="数据库表中文名称："/>

             <TextBox Grid.Column="" TextWrapping="Wrap" Text="{Binding TableShowName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="txtTableShowName"/>

             <Label Content="搜索框默认显示：" Grid.Column=""/>

             <TextBox Grid.Column="" TextWrapping="Wrap" Text="{Binding SearchDefaultShowName,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="txtSearchDefaultShowName"/>

             <Label Content="首页标题：" Grid.Row=""/>

             <TextBox Grid.Row="" Grid.Column="" TextWrapping="Wrap" Text="{Binding PageIndexTitle,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="txtPageIndexTitle"/>

             <Label Content="自定义字段：" Grid.Row="" Grid.Column=""/>

             <TextBox Grid.Row="" Grid.Column="" TextWrapping="Wrap" Text="{Binding SelfDefineField,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="txtSelfDefineField"/>

             <Label Content="自定义字段描述：" Grid.Row=""/>

             <TextBox Grid.Row="" Grid.Column="" TextWrapping="Wrap" Text="{Binding SelfDefineFieldDescribe,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" x:Name="txtSelfdescribe"/>

         </Grid>

运行后：

wpf研究之道-grid控件

　　这是一个常规的grid的用法，它定义了一个3行4列的表格。也许你看到这里，觉得这个比较简单有什么好说的。如今的web设计，讲求响应式设计，grid也可以做到响应式。啥是响应式？我觉得我们的页面能够适应不同的分辨率的设备，而不会导致页面布局的乱套。我们看看grid如何做到这一点？

修改我们上面的代码：

  <Grid x:Name="condtionGrid" Height="">

             <Grid.ColumnDefinitions>

                 <ColumnDefinition Width="auto"></ColumnDefinition>

                 <ColumnDefinition Width="1.5*"></ColumnDefinition>

                 <ColumnDefinition Width="2*"></ColumnDefinition>

                 <ColumnDefinition></ColumnDefinition>

             </Grid.ColumnDefinitions>

             <Grid.RowDefinitions>

                 <RowDefinition></RowDefinition>

                 <RowDefinition></RowDefinition>

                 <RowDefinition></RowDefinition>

             </Grid.RowDefinitions>

运行后：

　　wpf研究之道-grid控件

图1

wpf研究之道-grid控件

图2

第一列，我们定义为auto，自动宽度，其实是按内容的最小宽度来计算的。

第二列，1.5*，第三列，2*，第四列，没有定义宽度，其实，默认值为1*。

这些带*的宽度定义，wpf在绘制界面的时候，会按比例计算当前列的宽度。假设当前屏幕宽度为w,第一列的宽度为x,剩余宽度：z=w-x,那么第二列的宽度计算为：z*1.5/（1.5+2+1），剩下列的宽度计算同理。图1和图2，是不同屏幕下的运行结果。

　　有人看到这里会觉得，这个也是比较简单的。“道生一，一生二，二生三，三生万物。”，所谓复杂的东西都是从最简单的开始，本质的东西永远都是最简单的，但不明了。如果需求比较复杂的话，grid也就变复杂了，因为它可以嵌套使用。

好了，grid的控件的布局，我就点到为止。

相关文章