How to create Grid with same Row Size in a ListBox
In this article we will see How to create Grid with same Row Size in a ListBox. We are going to use one of the important properties of Grid control "IsSharedSizeScope". Using this property along with the SharedSizeGroup property in the Grid's Column Definition we will make the width of equal sizes in every grid or using the Grid's Row Definition we will make the height of equal sized in every grid.
In this article we will see How to create Grid with same Row Size in a ListBox. We are going to use one of the important properties of Grid control "IsSharedSizeScope". Using this property along with the SharedSizeGroup property in the Grid's Column Definition we will make the width of equal sizes in every grid or using the Grid's Row Definition we will make the height of equal sized in every grid.
Step 1 Create a new WPF application project.
Step 2 In the xaml.cs file add a Employee class and create a list of Employee objects as shown below:
public class Employee
{
public string Name { get; set; }
public int Age { get; set; }
}
public partial class SharedRowOrColumnSizeDemo : Window
{
public SharedRowOrColumnSizeDemo()
{
InitializeComponent();
List
{
new Employee(){ Name="Vaishali", Age=20},
new Employee(){ Name="Nita", Age=35},
new Employee(){ Name="Rakhi", Age=65},
new Employee(){ Name="Robert", Age=91}
};
this.DataContext = lstPerson;
}
}
Step 3 Now in the .xaml file, create a Grid which contains a ListBox control. In order to display the data in ListBox, we are using Grid. The first column definition of the Grid is marked with SharedSizeGroup="abc" and the Grid.IsSharedSizeScope property of the ListBox is set to True that means now every grid in the ListBox, i.e., every Grid containing the Employee object will have first column of same size(shared).
<Grid>
<ListBox ItemsSource="{Binding}" Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="abc">
</ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" FontSize="20" Margin="4"></TextBlock>
<TextBlock Grid.Column="1" FontSize="16" Text="{Binding Age, StringFormat=is {0} years old}" VerticalAlignment="Bottom" Margin="4"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
The output is as shown below all the items are aligned properly in the grid.
If we remove the SharedSizeGroup="abc" from the ColumnDefinition in the Grid and execute the program, the output will not be aligned properly as shown below:
Important Points
1. Here Grid.IsSharedSizeScope is an attached property that means this property is defined in Grid class but here it is being used in ListBox class. Attached Property is a property which is defined in one class but used in another class.
2. Grid.IsSharedSizeScope property must be set on the parent of all involved Grid objects.
3. In the ListBox we have used DataTemplate to display data and in the DataTemplate Grid instance is created. Now for every Employee object in the ListBox a Grid instance is created. In every Grid, every columndefinition will be of equal width as we have set SharedSizeGroup to same string.
4. In the .xaml.cs file, we have set this.DataContext = lstPerson;
this implies that the datacontext of the current Window(parent of all controls in our window) is set to list of person objects. Setting ItemsSource property of ListBox to {Binding} will automatically use this dataContext for databinding.
Follow