ListBox items orientation horizontal when using image in ItemTemplate in silverlight
MainPage.xaml
<UserControl
x:Class="SilverlightApps.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="600"
d:DesignWidth="800"
xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
>
<Grid x:Name="LayoutRoot" Background="White">
<Rectangle
Name="Rectangle1"
Fill="AliceBlue"
HorizontalAlignment="Left"
Height="82"
Margin="20,12,0,0"
Stroke="Black"
VerticalAlignment="Top"
Width="750"
StrokeThickness="0"
/>
<TextBlock
Name="TextBlock1"
Height="82"
HorizontalAlignment="Left"
Margin="20,9,0,0"
Text="ListBox items orientation horizontal when using image in ItemTemplate in silverlight"
VerticalAlignment="Top"
TextWrapping="Wrap"
FontSize="20"
FontStyle="Italic"
Foreground="MidnightBlue"
Width="600"
Padding="25,10,10,0"
/>
<ListBox
Name="ListBox1"
BorderThickness="1"
BorderBrush="LightSkyBlue"
Margin="20,116,0,382"
HorizontalAlignment="Left"
FontSize="13"
Width="750"
Padding="5,10,5,10"
>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top" Width="280">
<Image
Source="{Binding ImageURL}"
Width="75"
/>
<StackPanel Orientation="Vertical">
<TextBlock
Text="{Binding BookName}"
Foreground="MidnightBlue"
FontFamily="Georgia"
FontWeight="Bold"
FontSize="14"
TextWrapping="Wrap"
Width="200"
Padding="5,0,0,0"
/>
<TextBlock
Text="{Binding Author}"
Foreground="DimGray"
FontFamily="Comic Sans MS"
FontStyle="Italic"
TextWrapping="Wrap"
Width="200"
Padding="5,0,0,0"
/>
<TextBlock
Text="{Binding Price}"
Foreground="Magenta"
FontFamily="Courier New"
FontWeight="ExtraBlack"
TextWrapping="Wrap"
Width="200"
Padding="5,0,0,0"
/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightApps
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
List<Book> Books = new List<Book>();
// this blog are not the books images owner
//we uses those images here only for examples
//image collect from as ImageURL (image source)
Books.Add(
new Book(
"ASP.NET 4 24-Hour Trainer",
"Toi B. Wright",
"US $44.99",
"http://media.wiley.com/product_data/coverImage/10/04705969/0470596910.jpg"
)
);
Books.Add(
new Book(
"Beginning Flash, Flex, and AIR Development for Mobile Devices",
"Jermaine G. Anderson",
"US $39.99",
"http://media.wiley.com/product_data/coverImage/59/04709481/0470948159.jpg"
)
);
Books.Add(
new Book(
"SharePoint Server 2010 Administration 24 Hour Trainer",
"Bill Crider, Martin Reid, Clint Richardson",
"US $34.99",
"http://media.wiley.com/product_data/coverImage/60/04709390/0470939060.jpg"
)
);
Books.Add(
new Book(
"Professional Mobile Web Development with WordPress, Joomla! and Drupal",
"James Pearce",
"US $29.99",
"http://media.wiley.com/product_data/coverImage/58/11180876/1118087658.jpg"
)
);
Books.Add(
new Book(
"Beginning iOS Game Development",
"Patrick Alessi",
"US $39.99",
"http://media.wiley.com/product_data/coverImage/22/11181073/1118107322.jpg"
)
);
ListBox1.ItemsSource = Books;
}
public class Book
{
public String BookName { get; set; }
public String Author { get; set; }
public String Price { get; set; }
public String ImageURL { get; set; }
public Book(String bookname, String author, String price, String imageurl)
{
this.BookName = bookname;
this.Author = author;
this.Price = price;
this.ImageURL = imageurl;
}
}
}
}
