Silverlight2是怎么解決ListBox中一個(gè)LayoutBug

本篇文章為大家展示了Silverlight 2是怎么解決ListBox中一個(gè)Layout Bug，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司主營(yíng)師宗網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開發(fā)公司,師宗h5小程序制作搭建,師宗網(wǎng)站營(yíng)銷推廣歡迎師宗等地區(qū)企業(yè)咨詢

Silverlight自身還有沒有問(wèn)題? 誰(shuí)也沒法回答.

工作中遇到了一個(gè)關(guān)于ListBox的問(wèn)題. 簡(jiǎn)單描述一下: 使用ListBox來(lái)顯示某對(duì)象集合, 在排版的時(shí)候, 發(fā)現(xiàn)無(wú)論怎么調(diào)整ListBox的屬性, 都無(wú)法讓ListItem充滿整個(gè)空間; 令人郁悶的是,ListItem中排放的TextBlock/TextBox總會(huì)根據(jù)自身文本的大小, 自動(dòng)設(shè)定自己的長(zhǎng)度; ListItem中的所有控件都自動(dòng)向左對(duì)齊,造成了一副"甘特圖"式的圖像, 舉例(姓名, 年齡, 郵件地址)如下:

在設(shè)置了淺藍(lán)色的Border之后, 這個(gè)現(xiàn)象實(shí)在是太明顯了!

按照MSDN的說(shuō)法, 我們只需要在ListBox的屬性中加入如下設(shè)定語(yǔ)句, 就會(huì)強(qiáng)制長(zhǎng)度自動(dòng)Fill了:

HorizontalContentAlignment="Stretch"
但是加入之后沒有效果! 這顯然是Silverlight 2的又一個(gè)bug.

我們可以在MSDN上看到ItemContainer的默認(rèn)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>

可以看出來(lái), 值設(shè)置為L(zhǎng)eft的屬性僅有2個(gè):

第3行 HorizontalContentAlignment

第50行 HorizontalAlignment

問(wèn)題出在了第50行的這個(gè)Left，它默認(rèn)將一個(gè)List Item中的所有內(nèi)容都按照想做對(duì)齊的方式排列，由于這個(gè)style已經(jīng)寫在了Silverlight Runtime內(nèi)，所以我們只能重寫這個(gè)Style去掉這一行并為L(zhǎng)istBox指定新的Style。

解決方法：

為L(zhǎng)istBox添加屬性 HorizontalContentAlignment="Stretch", 強(qiáng)制Fill

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

在App.xaml中添加去掉了HorizontalAlignment="Left"的Style, 并給它的key命名為L(zhǎng)istBoxItemContainerStyle ---x:Key="ListBoxItemContainerStyle"

為L(zhǎng)istBox添加屬性 ItemContainerStyle="{StaticResource ListBoxItemContainerStyle}, 指定用戶自定義Style
Done!

現(xiàn)在你可以看到這個(gè)運(yùn)行結(jié)果了:

中間的年齡部分是可以隨著窗體大小變化自動(dòng)變化寬度的.

上述內(nèi)容就是Silverlight 2是怎么解決ListBox中一個(gè)Layout Bug，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：Silverlight2是怎么解決ListBox中一個(gè)LayoutBug
網(wǎng)站路徑：http://muchs.cn/article8/ippsop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、建站公司、全網(wǎng)營(yíng)銷推廣、Google、網(wǎng)站建設(shè)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)