Silverlight 2解决ListBox中一个Layout Bug

开发 后端
Silverlight 2 在其前一个版本的基础上, 功能集及开发人员友好性方面有了较大的提升。毫无疑问, Silverlight自身的问题越来越少. 我想从事Silverlight开发的同行们, 尤其是老Silverlighter们肯定也有这样的感受。

Silverlight自身还有没有问题? 谁也没法回答.

工作中遇到了一个关于ListBox的问题. 简单描述一下: 使用ListBox来显示某对象集合, 在排版的时候, 发现无论怎么调整ListBox的属性, 都无法让ListItem充满整个空间; 令人郁闷的是,ListItem中排放的TextBlock/TextBox总会根据自身文本的大小, 自动设定自己的长度; ListItem中的所有控件都自动向左对齐,造成了一副"甘特图"式的图像, 举例(姓名, 年龄, 邮件地址)如下:

在设置了浅蓝色的Border之后, 这个现象实在是太明显了!

按照MSDN的说法, 我们只需要在ListBox的属性中加入如下设定语句, 就会强制长度自动Fill了:

HorizontalContentAlignment="Stretch"
但是加入之后没有效果! 这显然是Silverlight 2的又一个bug.

我们可以在MSDN上看到ItemContainer的默认Style(你也可以从这里看: http://msdn.microsoft.com/en-us/library/cc278062%28vs.95%29.aspx):

   1: <Style TargetType="ListBoxItem">
   2:   <Setter Property="Padding" Value="3" />
   3:   <Setter Property="HorizontalContentAlignment" Value="Left" />
   4:   <Setter Property="VerticalContentAlignment" Value="Top" />
   5:   <Setter Property="Background" Value="Transparent" />
   6:   <Setter Property="BorderThickness" Value="1"/>
   7:   <Setter Property="TabNavigation" Value="Local" />
   8:   <Setter Property="Template">
   9:     <Setter.Value>
  10:       <ControlTemplate TargetType="ListBoxItem">
  11:         <Grid Background="{TemplateBinding Background}">
  12:           <vsm:VisualStateManager.VisualStateGroups>
  13:             <vsm:VisualStateGroup x:Name="CommonStates">
  14:               <vsm:VisualState x:Name="Normal" />
  15:               <vsm:VisualState x:Name="MouseOver">
  16:                 <Storyboard>
  17:                   <DoubleAnimation Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity" Duration="0" To=".35"/>
  18:                 </Storyboard>
  19:               </vsm:VisualState>
  20:             </vsm:VisualStateGroup>
  21:             <vsm:VisualStateGroup x:Name="SelectionStates">
  22:               <vsm:VisualState x:Name="Unselected" />
  23:               <vsm:VisualState x:Name="Selected">
  24:                 <Storyboard>
  25:                   <DoubleAnimation Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity" Duration="0" To=".75"/>
  26:                 </Storyboard>
  27:               </vsm:VisualState>
  28:             </vsm:VisualStateGroup>
  29:             <vsm:VisualStateGroup x:Name="FocusStates">
  30:               <vsm:VisualState x:Name="Focused">
  31:                 <Storyboard>
  32:                   <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility" Duration="0">
  33:                     <DiscreteObjectKeyFrame KeyTime="0">
  34:                       <DiscreteObjectKeyFrame.Value>
  35:                         <Visibility>Visible</Visibility>
  36:                       </DiscreteObjectKeyFrame.Value>
  37:                     </DiscreteObjectKeyFrame>
  38:                   </ObjectAnimationUsingKeyFrames>
  39:                 </Storyboard>
  40:               </vsm:VisualState>
  41:               <vsm:VisualState x:Name="Unfocused"/>
  42:             </vsm:VisualStateGroup>
  43:           </vsm:VisualStateManager.VisualStateGroups>
  44:           <Rectangle x:Name="fillColor" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
  45:           <Rectangle x:Name="fillColor2" Opacity="0" Fill="#FFBADDE9" IsHitTestVisible="False" RadiusX="1" RadiusY="1"/>
  46:           <ContentPresenter
  47:             x:Name="contentPresenter"
  48:             Content="{TemplateBinding Content}"
  49:             ContentTemplate="{TemplateBinding ContentTemplate}"
  50:             HorizontalAlignment="Left"
  51:             Margin="{TemplateBinding Padding}"/>
  52:           <Rectangle x:Name="FocusVisualElement" Stroke="#FF45D6FA" StrokeThickness="1" Visibility="Collapsed" RadiusX="1" RadiusY="1" />
  53:         </Grid>
  54:       </ControlTemplate>
  55:     </Setter.Value>
  56:   </Setter>
  57: </Style>


可以看出来, 值设置为Left的属性仅有2个:

第3行 HorizontalContentAlignment

第50行 HorizontalAlignment

问题出在了第50行的这个Left,它默认将一个List Item中的所有内容都按照想做对齐的方式排列,由于这个style已经写在了Silverlight Runtime内,所以我们只能重写这个Style去掉这一行并为ListBox指定新的Style。

解决方法:

为ListBox添加属性 HorizontalContentAlignment="Stretch", 强制Fill

在App.xaml中添加命名空间: xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

在App.xaml中添加去掉了HorizontalAlignment="Left"的Style, 并给它的key命名为ListBoxItemContainerStyle ---x:Key="ListBoxItemContainerStyle"

为ListBox添加属性 ItemContainerStyle="{StaticResource ListBoxItemContainerStyle}, 指定用户自定义Style
Done!

现在你可以看到这个运行结果了:

 中间的年龄部分是可以随着窗体大小变化自动变化宽度的.

【编辑推荐】

  1. 在Silverlight中进行基本的数据验证
  2. 详解Silverlight中的Downloader对象
  3. Silverlight 2 Twitter 例程
责任编辑:彭凡 来源: cnblog
相关推荐

2017-10-10 15:14:23

BUGiOS 11苹果

2021-10-08 07:50:57

软件设计程序

2009-09-14 17:08:02

WebFormView

2014-12-17 09:40:22

dockerLinuxPaaS

2021-07-24 13:11:19

Redis数据技术

2012-07-09 09:31:53

silverlight

2011-08-01 09:25:32

SQL Server数

2009-08-26 17:53:31

C# DropDown

2011-03-03 21:04:08

bug程序员

2014-07-07 10:58:22

SQL Server

2018-11-22 15:50:27

MySQL数据库双引号

2023-11-23 16:46:55

LinuxAWK运维

2022-05-16 08:42:26

Pandasbug

2021-09-13 08:41:52

职场互联网自闭

2022-11-21 18:37:40

漏测BugSOP

2022-08-11 12:28:09

For-elsePython

2021-11-03 16:48:55

Flex前端特性

2021-02-01 10:42:47

MySQL双引号数据库

2017-05-22 08:35:07

MySQL双引号错位

2019-03-31 15:39:31

自主身份SSI身份验证
点赞
收藏

51CTO技术栈公众号