Displaying ListBox Items in Horizontal view and restriction items in rows And Columns
when we bind data to listbox the items are displayed row by row . What if we want to restrict the items to be display in rows say 3 items in each rows ( instead of displaying item row by row). In this article i will show how we can display the items in listview rows and columns with restricted items
when we bind data to listbox the items are displayed row by row . What if we want to restrict the items to be display in rows say 3 items in each rows ( instead of displaying item row by row).
Here we can use <UniformGrid Rows="5" Columns="4" />
Here is a sample application where I can add image and person information displayed in listbox 3 items in each row
Here I am using Listbox Inside the list box I am Using UniformGrid with 5 rows and 2 items in each columns
I am using a grid with one column which is used to display the image and information of the person
Here is my XAML Coding
<Window x:Class="listWPFdel.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="725">
<Grid>
<ListBox Height="300" Width="500" Margin="5,5,0,0" Name=" lstboxperson" ItemsSource="{Binding}"
VerticalAlignment="Top" SelectedValuePath="{Binding Path=Person_id}"
Background="Transparent" HorizontalAlignment="Left" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="5" Columns="2" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="300" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Row="2" Orientation="Horizontal">
<Button Width="300" Background="Transparent">
<StackPanel Grid.Column="1" Orientation="Horizontal" >
<Image Grid.Column="0" Source="{Binding Path=Image}" Height="100" />
<StackPanel Grid.Column="1" Orientation="Vertical" Width="200">
<TextBlock Text="{Binding Path=Person_Name}" Padding="2" FontWeight="Bold" />
<TextBlock Text="{Binding Path=Person_Address1}" />
<TextBlock Text="{Binding Path=Person_Address2}" />
<TextBlock Text="{Binding Path=Person_Address3}" />
<TextBlock Text="{Binding Path=Email}" />
<TextBlock Name="txtblkUmcode" Text="{Binding Path=Person_id}" />
</StackPanel>
</StackPanel>
</Button>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
Create A class File to assign temporary data to list view
Cs file I have created a temporary class which contains properties like Person_id, Person_Name, Address1, Address2, Address3 Email Address And image of the person
namespace listWPFdel
{
public class Swapnesh
{
public int Person_id
{
get;
set;
}
public string Person_Name
{
get;
set;
}
public string Person_Address1
{
get;
set;
}
public string Person_Address2
{
get;
set;
}
public string Person_Address3
{
get;
set;
}
public string Email
{
get;
set;
}
public string Image
{
get;
set;
} } }
In XAML.cs file I am adding persons to list of presons
Here image of the path of the that is saved in the application
I am assigning 5 persons and I am adding to list of persons for sample you can add number of persons or you can bind the listbox from data base
namespace listWPFdel
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
List<Swapnesh> PersonInfo = new List<Swapnesh>();
PersonInfo.Add(
new Swapnesh
{ Person_id = 1,
Person_Name = "Tom& co",
Person_Address1 = "ad v",
Person_Address2 = "AAD 2",
Person_Address3 = "AA3",
Email = "ddd@ddd.com",
Image = "/listWPFdel;component/Images/Chrysanthemum.jpg" });
PersonInfo.Add(
new Swapnesh
{ Person_id = 2,
Person_Name = "BB& co",
Person_Address1 = "ad v",
Person_Address2 = "AAD 2",
Person_Address3 = "AA3",
Email = "ddd@ddd.com",
Image = "/listWPFdel;component/Images/Desert.jpg" });
PersonInfo.Add(
new Swapnesh
{ Person_id = 3,
Person_Name = "CC& co",
Person_Address1 = "ad v",
Person_Address2 = "AAD 2",
Person_Address3 = "AA3",
Email = "ddd@ddd.com",
Image = "/listWPFdel;component/Images/Jellyfish.jpg" });
PersonInfo.Add(
new Swapnesh
{ Person_id = 4,
Person_Name = "FF& co",
Person_Address1 = "ad v",
Person_Address2 = "AAD 2",
Person_Address3 = "AA3",
Email = "ddd@ddd.com",
Image = "/listWPFdel;component/Images/Chrysanthemum.jpg" });
PersonInfo.Add(
new Swapnesh
{ Person_id = 5,
Person_Name = "GG& co",
Person_Address1 = "ad v",
Person_Address2 = "AAD 2",
Person_Address3 = "AA3",
Email = "ddd@ddd.com",
Image = "/listWPFdel;component/Images/Hydrangeas.jpg" });
lstboxperson.DataContext = PersonInfo.ToList();
}
}
}