As we know default List box shows list of items in vertical Format. We need to scroll down to view all Items. If you want to show Items horizontally with the horizontal Scrollbar then it can be done with the following way:
1) You need to first setup <ListBox> in XAML Design. <ListBox> should contain <ItemsPanelTemplate> to where it will change the default template of <ListBox> from vertical to horizontal by adding <StackPanel> with its orientation as "Horizontal".
<ListBox Name="imageList">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Name="horizontalOrientation"VerticalAlignment="Top"Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1">
<StackPanel Name="DataStack" Height="Auto" Width="Auto" Orientation="Vertical">
<StackPanel Orientation="Horizontal" Name="AccountName">
<TextBlock Name="Account" Text="Sub Account:" Width="100"/>
<Image Name="AccountImage" Source="/HorizontalListImagesView;component/Images/ico_16_1.png" Height="20" Width="20"/>
<TextBlock Name="AccountName" Text="{Binding Path=Name, Mode=TwoWay}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Name="Contact" Text="Primary Contact:" Width="100"/>
<Image Name="ContactImage" Source="/HorizontalListImagesView;component/Images/ico_16_2.png" Height="20" Width="20" />
<TextBlock Name="ContactName" Text="{Binding Path=PrimaryContactId.Name, Mode=TwoWay}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Name="EmailAddress" Text="Email:" Width="100"/>
<TextBlock Name="Email" Text="{Binding Path=EMailAddress1,Mode=TwoWay}"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Name="PhoneNumber" Text="Main Phone:" Width="100"/>
<TextBlock Name="Phone" Text="{Binding Path=Telephone1,Mode=TwoWay}"/>
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
2) Now just design your List in Data Template and bind item Source to it. It will show following output.
![]()
-------------------------------------------------
Posted by: Inogic
For more information/discussions (documents, sample code snippets, detailed work flow or diagrams)
Please be free to visit the following links or email us:
Web: http://www.inogic.com
Blog: http://inogic.blogspot.com
Email: news@inogic.com
--------------------------------------------------
