c# - Wpf form to pull elements from left to right -

i wanted make screen similar have shared . idea pull items left right . went through wpf toolbox , did not find widget meets . or composition of 2 simple widgets >> serving helper .

can tell me kind of widget , how go doing ? tried searching couldnt come search terms :-( ( cant find title question )

there no predefined control above, should pretty simple make

here basic outline started.

xaml:

<window xmlns:controls="clr-namespace:system.windows.controls;assembly=presentationframework"          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         x:class="wpflistboxgrouptest.mainwindow"         title="mainwindow" height="438" width="557"  x:name="ui">     <grid datacontext="{binding elementname=ui}" >         <grid.rowdefinitions>             <rowdefinition height="181*"/>             <rowdefinition height="23*"/>         </grid.rowdefinitions>         <grid.columndefinitions>             <columndefinition width="240*"/>             <columndefinition width="68*"/>             <columndefinition width="241*"/>         </grid.columndefinitions>         <button content=">>" grid.column="1" command="{binding adddevice}" commandparameter="{binding selecteditem, elementname=unsecure}" horizontalalignment="center" verticalalignment="center" height="33"  width="48"/>         <dockpanel >             <textbox dockpanel.dock="top" text="unsecured devices" />             <datagrid x:name="unsecure" itemssource="{binding unsecureddevices}" />         </dockpanel>         <dockpanel  grid.column="2">             <textbox dockpanel.dock="top" text="secured devices" />             <datagrid itemssource="{binding secureddevices}" />         </dockpanel>     </grid> </window> 

code:

public partial class mainwindow : window {     private observablecollection<device> _unsecureddevices = new observablecollection<device>();     private observablecollection<device> _secureddevices = new observablecollection<device>();      public mainwindow()     {         adddevice = new relaycommand(o => secureddevices.add(o device), o => o != null);         initializecomponent();         unsecureddevices.add(new device { name = "jonathan mac", macaddress = "00:1a:8c:b9:cc" });         unsecureddevices.add(new device { name = "jonathan mobile", macaddress = "00:1a:8c:b9:cc" });         unsecureddevices.add(new device { name = "samsung s3", macaddress = "00:1a:8c:b9:cc" });         unsecureddevices.add(new device { name = "blackberry bb102", macaddress = "00:1a:8c:b9:cc" });     }      public icommand adddevice { get; set; }      public observablecollection<device> unsecureddevices     {         { return _unsecureddevices; }         set { _unsecureddevices = value; }     }      public observablecollection<device> secureddevices     {         { return _secureddevices; }         set { _secureddevices = value; }     } }  public class device  {     public string name { get; set; }     public string macaddress { get; set; } } 

result: