ItemsPanelTemplate的用法

　

　　项目里想用Silverlight制作工具栏，之前用的是Image和TextBlock完成的，但是代码混乱，在后来版本中突然想到ListBox可以实现这样的效果。使用后效果确实不错。下面是我的笔记

 <!--
    注意点
    （1）ItemsPanel中ItemsPanelTemplate模板 指定用于项的布局的面板。
         这个很重要，用来设置ListBox.ItemTemplate中DataTemplate中的StackPanel排列样式。
         它不光能控制StackPancel的排列样式，还能控制其他控件（Image,Grid..)
     (2)为了展示形同工具栏的效果要隐藏ListBox的水平滚动和垂直滚动。
         ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden"
     （3）数据时通过数据源绑定的，这样给人简洁的感觉
    -->
    <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource ToolsDatasDataSource}" >

        <ListBox Height="30" HorizontalAlignment="Left"  Name="listBox1" VerticalAlignment="Top" Width="500" ItemsSource="{Binding}" FlowDirection="LeftToRight" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>                    
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>                
                <DataTemplate >
                    <StackPanel Orientation="Horizontal" >
                        <Image Width="20" Height="20" Source="{Binding Path=ImageName}" Margin="10,0,0,5" />
                        <TextBlock Text="{Binding Path=Title,Mode=TwoWay}" Margin="5,0,0,10"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

 

 

　　后台代码：

public class ToolsDatas:ObservableCollection<ToolsData>
    {
        public ToolsDatas()
        {
            string strDir = "/ListBoxDemo;component/Images/";           
            Add(new ToolsData(strDir+"Layer18.png", "图层"));
            Add(new ToolsData(strDir+"range18.png", "测距"));
            Add(new ToolsData(strDir+"surface18.png", "测面"));
            Add(new ToolsData(strDir+"mark18.png", "标注"));          
            Add(new ToolsData(strDir+"scale18.png", "标尺"));
            Add(new ToolsData(strDir+"xy18.png", "坐标"));           
            Add(new ToolsData(strDir+"screenshot18.png", "截屏"));         
        }
      
    }

 

 

　　运截图行

　　

 

　　本文来自焦涛的博客，原文地址：http://www.cnblogs.com/Joetao/articles/2128646.html