Wpf form to pull elements from left to right

Question

I wanted to make a screen which is similar to what i have shared . The idea is to pull items from the left to the right . I went through the WPF toolbox and did not find a widget that meets exactly this . Or is this just a composition of 2 simple widgets with the >> serving as a helper .

Can someone tell me what kind of widget this is and how to go about doing it ? I tried searching but couldnt come up with good search terms for this :-( ( I even cant find a good title for the question )

enter image description here

This is just two datagrids/listviews. The button takes selectedItems from list one and moves (add to right, remove from left) to the new list. — Jras, May 14 '13 at 02:27
@Jras thanks . Useful . I shall go about it this way . I will update once i get it done . Hopefully i will have some good code to share :-) — rockstar, May 14 '13 at 02:37
@RockStar in terms of UX, I personally think does interfaces are really poor and were pretty much a workaround to older technologies' limitations. Why don't you just do a single ListBox with a Secured/Unsecured `ComboBox` or just a `CheckBox`? We have replaced a lot of these kind of things from the previous version of our product (VB6 + some winforms) with single lists with CheckBoxes and stuff like that. — Federico Berasategui, May 14 '13 at 02:49
@HighCore thanks i shall bring it up with our architect . The UI wasnt exactly designed by . Appreciate your help though . — rockstar, May 14 '13 at 03:09

score 3 · Accepted Answer · answered May 14 '13 at 03:01

There is no predefined control like above, but should be pretty simple to make

Here is a basic outline to get you 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 as 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
    {
        get { return _unsecuredDevices; }
        set { _unsecuredDevices = value; }
    }

    public ObservableCollection<Device> SecuredDevices
    {
        get { return _securedDevices; }
        set { _securedDevices = value; }
    }
}

public class Device 
{
    public string Name { get; set; }
    public string MacAddress { get; set; }
}

Result:

enter image description here

1+ Nice example. Except Resharper would mark those `ObservableCollections` as "convert to auto property" (just Alt+Enter+Enter+Enter) =P — Federico Berasategui, May 14 '13 at 03:13
@HighCore, I don't use reshaper, I find it to be the most annoying extension ever developed for VS, but thats just me :) — sa_ddam213, May 14 '13 at 03:32
@sa_ddam213 i never expected such a good example . thanks a million . — rockstar, May 14 '13 at 03:38
@sa_ddam213 I could literally not live without the single best feature ever developed for VS, which is R#'s ability to convert auto properties `"to property with backing field"`. — Federico Berasategui, May 14 '13 at 03:39
@HighCore, I use CodeSnippets for all that junk, but I am the only one in the office that hates R# so perhaps its just me beinig eccentric — sa_ddam213, May 14 '13 at 03:42
@RockStar because WPF is so amazing and pleasant to work with (in contrast to almost every other UI framework I've heard of), we WPFers here at StackOverflow tend to provide full working examples for these kind of questions, such as [this](http://stackoverflow.com/a/16227842/643085) or [this](http://stackoverflow.com/questions/15579069/graph-nodes-coordinates-evaluation/15580293#15580293) or even [this](http://stackoverflow.com/a/15821573/643085) — Federico Berasategui, May 14 '13 at 03:46

Wpf form to pull elements from left to right

1 Answers1