1. WPF布局一个表单
<Grid Width="400" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="用户名" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="4" />
<TextBox Grid.Column="1" Margin="4" />
<TextBlock Text="密码" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="4" Grid.Row="1" />
<PasswordBox Grid.Row="1" Grid.Column="1" Margin="4" />
<TextBlock Grid.Row="2" Text="确认密码" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="4" />
<PasswordBox Grid.Column="1" Grid.Row="2" Margin="4" />
</Grid>
在WPF中布局表单一直都很传统,例如使用上面的XAML,它通过Grid布局一个表单。这样出来的结果整整齐齐,看上去没什么问题,但当系统里有几十个表单页以后需要统一将标签改为上对齐,或者标签和控件中加一个:
号等需求都会难倒开发人员。一个好的做法是使用某些控件库提供的表单控件;如果不想引入一个这么“重”的东西,可以自己定义一个简单的表单控件。
这篇文章介绍一个简单的用于布局表单的Form
控件,虽然是一个很老的方案,但我很喜欢这个控件,不仅因为它简单实用,而且是一个很好的结合了ItemsControl、ContentControl、附加属性的教学例子。
Form是一个自定义的ItemsControl,部分代码可以参考自定义ItemsControl这篇文章。
2. 一个古老的方法
即使抛开验证信息、确认取消这些更高级的需求(表单的其它功能真的很多很多,但这篇文章只谈论布局),表单布局仍是个十分复杂的工作。幸好十年前ScottGu分享过一个简单的方案,很有参考价值:
WPF & Silverlight LOB Form Layout - Searching for a Better Solution: Karl Shifflett has another great WPF blog post that covers a cool way to perform flexible form layout for LOB scenarios.
<pt:Form x:Name="formMain" Style="{DynamicResource standardForm}" Grid.Row="1">
<pt:FormHeader>
<pt:FormHeader.Content>
<StackPanel Orientation="Horizontal">
<Image Source="User.png" Width="24" Height="24" Margin="0,0,11,0" />
<TextBlock VerticalAlignment="Center" Text="General Information" FontSize="14" />
</StackPanel>
</pt:FormHeader.Content>
</pt:FormHeader>
<TextBox pt:FormItem.LabelContent="_First Name" />
<TextBox pt:FormItem.LabelContent="_Last Name" />
<TextBox pt:FormItem.LabelContent="_Phone" Width="150" HorizontalAlignment="Left" />
<CheckBox pt:FormItem.LabelContent="Is _Active" />
</pt:Form>
使用代码和截图如上所示。这个方案最大的好处是只需在Form中声明表单的逻辑结构,隐藏了布局的细节和具体实现,而且可以通过Style设定不同表单的外观。
3. 我的实现
从十年前开始我就一直用这个方案布局表单,不过我对原本的方案进行了改进:
- 由于原本的代码是VB.NET,我把它改为了C#。
- 原本的方案提供了十分多的属性,我只保留了最基本的几个,其它都靠Style处理。因为我希望Form是一个80/20原则下的产物,很少的代码,很短的编程时间,可以处理大部分的需求。
3.1 用FormItem封装表单元素
在文章开头的表单中,TextBox、Password等是它的逻辑结构,其它都只是它外观和装饰,可以使用自定义的ItemsCntrol控件分离表单的逻辑结构和外观。之前自定义ItemsControl这篇文章介绍过,自定义ItemsControl可以首先定义ItemContainer,所以在实现Form
的功能前首先实现FormItem
的功能。
3.1.1 如何使用
<StackPanel Grid.IsSharedSi