代码改变世界

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

2010-06-20 19:17  撞破南墙  阅读(3268)  评论(3编辑  收藏  举报

最终的效果图

寻找最终的过程


通常我们可以这样使用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

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

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

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

 

4  重写一个控件来显示。

找到了以下资料

Silverlight控件开发

还有一篇是一篇MSDN的杂志里面的一篇开发的。但是后来链接弄丢了。。。
如果你知道的话,麻烦告知。
就是在那篇文章里面,讲了开发一个 控件可以给定默认的 样式。
我发现这样是可行的。
于是在MSDN里面的 找到

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

然后跑去 ItemsControl 里,准备继承他然后实现。

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

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

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>
                   <!-- item模板 -->
<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>

效果图:

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

正点解方法二

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

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

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

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

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

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

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

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

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

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

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

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

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