开发学院图形图像 Flash Silverlight 2 : 关于ListBox的一个Layout Bug及其... 阅读

Silverlight 2 : 关于ListBox的一个Layout Bug及其解决方法

　2009-03-04 11:58:41　来源：WEB开发网　闂傚倸鍊搁崐鎼佸磹妞嬪孩顐芥慨姗嗗厳缂傛氨鎲稿鍫罕闂備礁婀遍搹搴ㄥ窗閺嶎偆涓嶆い鏍仦閻撱儵鏌ｉ弴鐐测偓鍦偓姘炬嫹

闂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗〒姘ｅ亾妤犵偛顦甸弫鎾绘偐閹绘帞鈧參姊哄Ч鍥х仼闁诲繑鑹鹃悾鐑藉蓟閵夛妇鍘甸梺瑙勵問閸犳牠銆傛總鍛婄厱閹艰揪绱曟牎闂侀潧娲ょ€氫即鐛幒妤€绠ｆ繝闈涘暙娴滈箖鏌ｉ姀鈶跺湱澹曟繝姘厵闁绘劦鍓氶悘杈ㄤ繆閹绘帞澧涚紒缁樼洴瀹曞崬螖閸愬啠鍓濈换娑樼暆婵犱胶鏁栫紓浣介哺閹瑰洤鐣烽幒鎴僵闁瑰吀鐒﹂悗鎼佹⒒娴ｇ儤鍤€闁搞倖鐗犻獮蹇涙晸閿燂拷

濠电姷鏁告慨鐑藉极閸涘﹥鍙忔い鎾卞灩缁狀垶鏌涢幇闈涙灈鐎瑰憡绻冮妵鍕箻鐎靛摜鐣奸梺纭咁潐濞茬喎顫忕紒妯肩懝闁逞屽墮宀ｈ儻顦查悡銈夋煏閸繃鍋繛宸簻鎯熼梺瀹犳〃閼冲爼宕濋敃鈧—鍐Χ閸℃鐟愰梺鐓庡暱閻栧ジ宕烘繝鍥у嵆闁靛骏绱曢崢顏堟⒑閹肩偛鍔楅柡鍛⊕缁傛帟顦寸紒杈ㄥ笚濞煎繘鍩℃担閿嬵潟闂備浇妗ㄩ悞锕傚箲閸ヮ剙鏋侀柟鍓х帛閺呮悂鏌ㄩ悤鍌涘闂傚倸鍊搁崐鎼佸磹妞嬪孩顐芥慨姗嗗厳缂傛氨鎲稿鍫罕闂備礁婀遍搹搴ㄥ窗閺嶎偆涓嶆い鏍仦閻撱儵鏌ｉ弴鐐测偓鍦偓姘炬嫹　　闂傚倸鍊搁崐鎼佸磹閻戣姤鍤勯柤鍝ユ暩娴犳氨绱撻崒娆掑厡缂侇噮鍨堕妴鍐川閺夋垹鍘洪悗骞垮劚椤︻垶宕￠幎鑺ョ厪闊洦娲栨牎闂佽瀵掗崜鐔奉潖閾忓湱纾兼俊顖氭惈椤秴顪冮妶鍡楀闁告鍥х叀濠㈣泛谩閻斿吋鐓ラ悗锝庡厴閸嬫挻绻濆顓涙嫼閻熸粎澧楃敮鎺撶娴煎瓨鐓曢柟鎯ь嚟閳藉鏌嶇紒妯荤叆妞ゎ偅绻堥幊婊呭枈濡顏归梻鍌欑閹诧紕绮欓幋锔哄亼闁哄鍨熼弸鏃堟煛閸愶絽浜剧紓浣虹帛缁嬫挻绂掗敃鍌氱＜婵﹩鍓﹂悗鎶芥⒒娴ｅ摜锛嶇紒顕呭灦楠炴垿宕堕鍌氱ウ闁诲函缍嗘禍鏍绩娴犲鐓欓梺顓ㄧ畱婢ь垱銇勯弬鍨偓瑙勭┍婵犲洦鍊锋い蹇撳閸嬫捇寮借濞兼牕鈹戦悩瀹犲闁稿被鍔庨幉姝岀疀濞戞ḿ鐤呴梺鍦檸閸犳寮查幖浣圭叆闁绘洖鍊圭€氾拷

核心提示：本文示例源代码或素材下载 Silverlight 2 在其前一个版本的基础上, 功能集及开发人员友好性方面有了较大的提升; 这同时也带动了用户体验向前迈了一大步. 毫无疑问, Silverlight自身的问题越来越少. 我想从事Silverlight开发的同行们, 尤其是老Silverlighter们肯定也有这

本文示例源代码或素材下载

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

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

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

Silverlight 2 : 关于ListBox的一个Layout Bug及其解决方法　

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

按照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>