Tuesday, June 25, 2013

How to show List Box Items Horizontally in CRM 2011 using Silverlight

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.







No comments:

Post a Comment