Controls Repositioning issue when using SharedSizeGroup in ItemsControl

I have two item controls that are sharing the width using SharedSizeGroup. Now the issue is whenever i am updating the text inside the textbox,say the setting the text in the second row to 999999999 & then deleting the text,controls are not repositioning themselves.

Here is my code :-

XAML :-

<Window x:Class="BindingGroupSample.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:BindingGroupSample"
    Title="Window2" Height="300" Width="300">
<Window.Resources>
    <local:GroupNameGenerator x:Key="GroupNameGenerator1" />
    <local:GroupNameGenerator x:Key="GroupNameGenerator2" />
</Window.Resources>
<Grid>
    <StackPanel Grid.IsSharedSizeScope="True">
            &l开发者_JS百科t;ItemsControl Name="ItemsControl1">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition SharedSizeGroup="{Binding Converter={StaticResource GroupNameGenerator1}}" />
                        </Grid.ColumnDefinitions>
                        <TextBox Text="{Binding Index}" Background="Gray"/>
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
            <ItemsControl Name="ItemsControl2">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition SharedSizeGroup="{Binding Converter={StaticResource GroupNameGenerator2}}" />
                        </Grid.ColumnDefinitions>
                            <TextBox Text="{Binding Name}" />
                    </Grid>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </StackPanel>
</Grid>
</Window> 

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace BindingGroupSample
{
public partial class Window2 : Window
{
    ObservableCollection<Temp> list1 = new ObservableCollection<Temp>();
    ObservableCollection<Temp> list2 = new ObservableCollection<Temp>();  

    public Window2()
    {
        InitializeComponent();


         for (int i = 0; i < 25; i++)    
         {
             list1.Add(new Temp() { Index = i });   
             list2.Add(new Temp() { Name = "AA" + i +i });      
         }  
        ItemsControl1.ItemsSource = list1;    
        ItemsControl2.ItemsSource = list2;        

    }
}


public class GroupNameGenerator : IValueConverter
{
    public Int32 Index { get; set; }
    public GroupNameGenerator()
    {
        Index = 0;
    }

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return String.Format("Group{0}", ++Index);
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}


public class Temp
{
    public int Index { get; set; }
    public string Name { get; set; }
}
}

Please suggest something to achieve w/o taking any events to refresh the control items.

Actually I want to achieve my UI something like below:-

                Item 1     Item 2     Item3    Item 4
    Heading 1:    AA        AA1        AA2      AA3
    Heading 2:    20        10         11       89
    Heading 3:    10        11         89        7
    Heading 4:   Expand     Expand    Expand    Expand

Also there will be a horizontal scrollbar from Item 1 to Item 4 visible all the times.

Maybe you should go another way. Let's fill one list with all values and use UniformGrid in ItemTemplate.

C#:

for (int i = 0; i < 25; i++)
{
    list1.Add(new Temp()
    {
        Index = i,
        Name = "AA" + i + i
    });
}
ItemsControl3.ItemsSource = list1;

XAML:

<ItemsControl Name="ItemsControl3">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <UniformGrid Rows="2">
                <TextBox Text="{Binding Index}" Background="Gray" />
                <TextBox Text="{Binding Name}" />
            </UniformGrid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

I hope that's what you needed!