WPF教程(三十二)使用Grid:一个联系人表格

在前面几章,我们学习了很多理论知识,用到了很多理论上的例子。在这一章,将把我们在前面所学到的东西运用到一个实际的例子当中:一个简单的联系人表格。

这个联系人表格的好处是它只是普遍使用的一个对话框,你可以将用到的技术用到几乎任何你想要创建的对话框里。

第一个要测试的东西非常简单,是一个基本的联系人表格。总共使用三行,两行自动高度,最后一行使用*号高度,它占据剩余的可用空间。

<Window x:Class="WpfTutorialSamples.Panels.GridContactForm"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactForm" Height="300" Width="300">
    <Grid>
                <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                </Grid.RowDefinitions>          
                <TextBox>Name</TextBox>
                <TextBox Grid.Row="1">E-mail</TextBox>
                <TextBox Grid.Row="2" AcceptsReturn="True">Comment</TextBox>            
        </Grid>
</Window>
A simple contact form using the Grid
如上所示,最后一个TextBox占据了剩余空间,前两个只占据它们所需要的空间。尝试拖拉窗口,你会发现comment文本框会跟随窗口改变。

上面这个简单的例子里,并没有指定每个文本框用来干什么。相反,文本框里显示了一些说明性的文字,这并不是一个Windows对话框该有的样子。我们尝试来改善外观和实用性:

<Window x:Class="WpfTutorialSamples.Panels.GridContactFormTake2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridContactFormTake2" Height="300" Width="300">
        <Grid Margin="10">
                <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label>Name: </Label>
                <TextBox Grid.Column="1" Margin="0,0,0,10" />
                <Label Grid.Row="1">E-mail: </Label>
                <TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10" />
                <Label Grid.Row="2">Comment: </Label>
                <TextBox Grid.Row="2" Grid.Column="1" AcceptsReturn="True" />
        </Grid>
</Window>
A simple contact form using the Grid - take two

但是,说明字段有时候是很明显的,无需再加说明两个字。那么我们跳过标签,而使用ColumnSpan来得到更多的说明文本框空间:

<TextBox Grid.ColumnSpan="2" Grid.Row="2" AcceptsReturn="True" />
A simple contact form using the Grid - take three

以上展示了Grid面板强大的功能。希望你在设计对话框的时候能用上这里所学的全部技术。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值