wpf - Connecting width/height of cell in two different controls? -

i need create 2 controls contain same amound of items (a dynamic amount), first control represents keys, second represents values.

i need when user resizes upper column width should affect same column in lower row (of values).

here example desire:

<window    datacontext="{binding relativesource={relativesource self}}"   x:class="mainwindow"   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">   <window.resources>     <itemspaneltemplate x:key="itemspaneltemplate">       <virtualizingstackpanel orientation="horizontal"/>     </itemspaneltemplate>   </window.resources>   <stackpanel>     <itemscontrol itemssource="{binding keys}"                    itemspanel="{staticresource itemspaneltemplate}"/>     <itemscontrol grid.row="1" itemssource="{binding values}"                    itemspanel="{staticresource itemspaneltemplate}"/>   </stackpanel> </window> 

---

imports system.collections.specialized class mainwindow   private sub window_loaded(byval sender object,                             byval e routedeventargs) handles mybase.loaded     datacontext =       new stringdictionary       {         {"key1", "value1"},         {"key2", "value2"},         {"key3", "value3"},         {"key4", "value4"}       }   end sub end class 

result:

again, want able create datagrid-like control supports cell borders , cell widths , heights should connected other controls' width + allow resize.

i prefer done xamly. note: it's custom control, can declare appropriate properties if necessary. remember cells' heights , width has dynamic , individual specific columns/rows.

in reference this question, created in different way (having third control cells), question still same, want height width of columns , cells dynamic, , give user ability resize them affecting each other.

update

decyclone's answer love implement, tried example provided setting itemscontrols' grid.issharedsizescope property true, didn't work, here result (cropped):

is possible apply shared size scope between 2 different controls?

i tried , seems work :

xaml :

<window x:class="wpfapplication2.mainwindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:local="clr-namespace:wpfapplication2"         title="mainwindow"         height="350"         width="525">     <window.resources>         <local:groupnamegenerator x:key="groupnamegenerator1" />         <local:groupnamegenerator x:key="groupnamegenerator2" />     </window.resources>     <grid>         <stackpanel grid.issharedsizescope="true">             <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>                             <border borderbrush="black"                                     borderthickness="1"                                     margin="5"                                     padding="5">                                 <textblock text="{binding}" />                             </border>                         </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>                             <border borderbrush="black"                                     borderthickness="1"                                     margin="5"                                     padding="5">                                 <textblock text="{binding}" />                             </border>                         </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.navigation; using system.windows.shapes; using system.collections.objectmodel;  namespace wpfapplication2 {     /// <summary>     /// interaction logic mainwindow.xaml     /// </summary>     public partial class mainwindow : window     {         observablecollection<int32> list1 = new observablecollection<int32>();         observablecollection<string> list2 = new observablecollection<string>();          public mainwindow()         {             initializecomponent();              (int = 0; < 25; i++)             {                 list1.add(i + 1);                 list2.add(new string('0', ((i + 1) / 3)));             }              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();         }     } }