首页 > 代码库 > ItemsPanelTemplate的用法

ItemsPanelTemplate的用法

 

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

 1  <!-- 2     注意点 31)ItemsPanel中ItemsPanelTemplate模板 指定用于项的布局的面板。 4          这个很重要,用来设置ListBox.ItemTemplate中DataTemplate中的StackPanel排列样式。 5          它不光能控制StackPancel的排列样式,还能控制其他控件(Image,Grid..) 6      (2)为了展示形同工具栏的效果要隐藏ListBox的水平滚动和垂直滚动。 7          ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" 83)数据时通过数据源绑定的,这样给人简洁的感觉 9     -->10     <Grid x:Name="LayoutRoot" Background="White" DataContext="{StaticResource ToolsDatasDataSource}" >11 12         <ListBox Height="30" HorizontalAlignment="Left"  Name="listBox1" VerticalAlignment="Top" Width="500" ItemsSource="{Binding}" FlowDirection="LeftToRight" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden">13             <ListBox.ItemsPanel>14                 <ItemsPanelTemplate>                    15                     <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/>16                 </ItemsPanelTemplate>17             </ListBox.ItemsPanel>18                 <ListBox.ItemTemplate>                19                 <DataTemplate >20                     <StackPanel Orientation="Horizontal" >21                         <Image Width="20" Height="20" Source="{Binding Path=ImageName}" Margin="10,0,0,5" />22                         <TextBlock Text="{Binding Path=Title,Mode=TwoWay}" Margin="5,0,0,10"/>23                     </StackPanel>24                 </DataTemplate>25             </ListBox.ItemTemplate>26         </ListBox>27     </Grid>

 

 

  后台代码:

 1 public class ToolsDatas:ObservableCollection<ToolsData> 2     { 3         public ToolsDatas() 4         { 5             string strDir = "/ListBoxDemo;component/Images/";            6             Add(new ToolsData(strDir+"Layer18.png", "图层")); 7             Add(new ToolsData(strDir+"range18.png", "测距")); 8             Add(new ToolsData(strDir+"surface18.png", "测面")); 9             Add(new ToolsData(strDir+"mark18.png", "标注"));          10             Add(new ToolsData(strDir+"scale18.png", "标尺"));11             Add(new ToolsData(strDir+"xy18.png", "坐标"));           12             Add(new ToolsData(strDir+"screenshot18.png", "截屏"));         13         }14       15     }

 

 

  运截图行

  

 

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

ItemsPanelTemplate的用法