代码改变世界

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的初学者有所帮助。

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

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