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.

How to debug XAML bindings in Silverlight 5

Microsoft has released Silverlight 5 !! A new feature is available in Silverlight 5 and it is XAML Data Binding debugging. For any data driven application with declarative data binding, within XAML, this brand new feature is the significant in various ways.

Prerequisites:

Silverlight 5 toolkit
Silverlight 5 Developer Runtime
Visual Studio 2010 SP1

The example demonstrated here implements basic XAML data binding. Below we have specified both the scenario when binding is correct and incorrect.

In below example we have given a simple binding for DataGrid.

When Binding is Correct:

Now you can apply a breakpoint to the binding syntax. Once the break point is applied, it hits the breakpoint whenever push and pull is triggered for that control. The below image shows the breakpoint applied within XAML


The XAML editor will not allow you to set breakpoint anywhere else other than Binding syntax.
Once Breakpoint is set, start debugging and wait for the compiler to hit the breakpoint.


You can find the debug information from Local tab.


The information shows up a BindingState object holding complete binding context information of the control. As in the above image, the BindingState value is UpdatingTarget so this way it shows that the binding is pushing data to control.

Going through the debugging information, it shows the complete picture on the nature of data and binding


Now another thing to know is, on TwoWay binding scenario once you change the data, The breakpoint again gets a hit as the binding source is getting updated. And the debug information shows the Binding state as Updating Source status. The breakpoint again gets a hit as the binding source is getting updated. And the debug information shows the Binding state as Updating Source status.


When Binding is Incorrect:

When binding is incorrect you will get the error while debugging the binding.


This will help you to find the incorrect bindings in your XAML.
Hope this helps you to get acquainted with the new feature of Silverlight 5