Silverlight学习笔记第一季(2)Listbox横向绑定数据

秒速五厘米 2022-04-01 14:50 206阅读 0赞

最终的效果图

![2010062018552835.jpg][]

**寻找最终的过程**

通常我们可以这样使用listbox

< ListBox  x:Name ="LB1" >   
 < ListBox.ItemTemplate >   
 < DataTemplate >   
 < StackPanel  Width ="50" >   
 < TextBlock  Text =" \{Binding Name\} " ></ TextBlock >   
 </ StackPanel >   
 </ DataTemplate >   
 </ ListBox.ItemTemplate >   
 </ ListBox >

**我想的办法：**

1 指定模板的排列方式 Orientation="Horizontal"

但是不能直接在页面上指定，为什么呢？因为无法直接给 DataTemplate 指定 样式。

**失败!**

2 动态添加到stackpanel

TextBlock textBlock  =  new  TextBlock();  
textBlock.Text  =  " 测试数据 " ;  
StackPanel stackPanel  =  new  StackPanel();  
stackPanel.Children.Add(textBlock);  
grid1.Children.Add(textBlock);  
grid1.Children.Add(stackPanel);

因为这种方法前后台并不分离，在做web开发这种方式是本人极力避免的。。。虽然可以，但是必须想其他办法。

**不好用**

3 很无赖的办法。旋转listbox

![2010062018191846.jpg][]

这个其实很郁闷的，我是通过把第二项右移一个项宽度，上移一个项高度实现的 “伪横向”。

但是第N项得移动N\*常数 的长度。太丑了。。。

纯属恶搞的做法，还是不行。

4 重写一个控件来显示。

找到了以下资料

## Silverlight控件开发 ##

[http://www.cnblogs.com/yingql/category/236862.html][http_www.cnblogs.com_yingql_category_236862.html]

还有一篇是一篇MSDN的杂志里面的一篇开发的。但是后来链接弄丢了。。。

如果你知道的话，麻烦告知。

就是在那篇文章里面，讲了开发一个 控件可以给定默认的 样式。

我发现这样是可行的。

于是在MSDN里面的 找到

[System.Windows.Controls.Control][]  
[System.Windows.Controls.ItemsControl][]  
[System.Windows.Controls.Primitives.Selector][]  
System.Windows.Controls.ListBox

然后跑去 [ItemsControl ][System.Windows.Controls.ItemsControl]里，准备继承他然后实现。

就在这个时候，悲剧发生了。。。。

答案已经在MS的示例里面了。

[http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm\#/?sref=System.Windows.Controls.ListBoxEx][http_samples.msdn.microsoft.com_Silverlight_SampleBrowser_index.htm_sref_System.Windows.Controls.ListBoxEx]

XAML代码

**正点解方法一**

< Style  x:Key ="horizontalListBoxStyle"  TargetType ="ListBox" >

< Setter  Property ="ItemsPanel" >   
 < Setter.Value >   
 < ItemsPanelTemplate >   
 < StackPanel  Orientation ="Horizontal"   
VerticalAlignment ="Center"   
HorizontalAlignment ="Center" />   
 </ ItemsPanelTemplate >   
 </ Setter.Value >   
 </ Setter >

< Setter  Property ="ItemTemplate" >   
 < Setter.Value >   
 < DataTemplate >

< StackPanel  Orientation ="Horizontal" >

< TextBlock  Padding ="5,0,5,0"   
Text =" \{Binding FirstName\} "  />   
 < TextBlock  Text =" \{Binding LastName\} "  />   
 </ StackPanel >   
 </ DataTemplate >   
 </ Setter.Value >   
 </ Setter >   
 </ Style >

效果图：

![2010062018482363.jpg][]

原来可以覆盖他默认的样式。

**正点解方法二**

还有另外一种方式，控件中指定

< ItemsControl.ItemsPanel >   
 < ItemsPanelTemplate >   
 < StackPanel  Orientation ="Horizontal" />   
 </ ItemsPanelTemplate >

我相信应该有很多人知道横向绑定数据这个问题，也许是因为太简单了。。。

但是我查了网上也没有，问了群里的人但是似乎没描述好。

反正是也没得到答案，于是把整个寻找答案的过程记录了下来，也分享给我这种初学者。

对于这种问题，首先我们得知道他是一个样式绑定的问题，其次我们得想办法改变它的样式(方法一和最终)

不行的话想想其他方法的实现，（方法2）。还是不行的话可以试试 邪门的办法(hack)(方法3)。

因为我的对控件的知识没掌握好，不知道ListBox 是由 itempanel 做容器。

要更改itempanel中的控件排列形式，肯定不能在ItemTemplate 那里指定。

因为**他只是用来指定重复的内容，一定要去他的ItemsPanel 指定他的容器。**

希望对Silverlight的初学者有所帮助。

**另外希望路过的牛人介绍一下如何系统的学习。**

**解决一下我这样学，不知道相对底一点的东西，遇到书上没有现成解决方案就困窘的这种状况。**

[2010062018552835.jpg]: /images/20220401/a401794f11054ffcadb2d68bf8364e32.png
[2010062018191846.jpg]: /images/20220401/cac9da6c141e47f187ab50b00d10b975.png
[http_www.cnblogs.com_yingql_category_236862.html]: http://www.cnblogs.com/yingql/category/236862.html
[System.Windows.Controls.Control]: http://msdn.microsoft.com/zh-cn/library/system.windows.controls.control%28v=VS.95%29.aspx
[System.Windows.Controls.ItemsControl]: http://msdn.microsoft.com/zh-cn/library/system.windows.controls.itemscontrol%28v=VS.95%29.aspx
[System.Windows.Controls.Primitives.Selector]: http://msdn.microsoft.com/zh-cn/library/system.windows.controls.primitives.selector%28v=VS.95%29.aspx
[http_samples.msdn.microsoft.com_Silverlight_SampleBrowser_index.htm_sref_System.Windows.Controls.ListBoxEx]: http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=System.Windows.Controls.ListBoxEx
[2010062018482363.jpg]: /images/20220401/9affb5db96ba42eb99f0c513ffb1017d.png