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