2013-05-14 3 views
0

Я хотел сделать экран, похожий на то, что я поделился. Идея состоит в том, чтобы вытащить предметы слева направо. Я прошел через панель инструментов WPF и не нашел виджет, который соответствует именно этому. Или это всего лишь состав из двух простых виджетов с >> служением в качестве помощника.Форма Wpf для перемещения элементов слева направо

Может кто-нибудь сказать мне, что это за виджет и как это сделать? Я попытался найти, но не смог придумать хорошие условия поиска для этого :-((я даже не можешь найти хорошее название для вопроса)

enter image description here

+2

Это всего два DataGrids/ListViews. Кнопка принимает selectedItems из списка 1 и перемещает (добавить вправо, удалить слева) в новый список. – Jras

+0

@ Jras спасибо. Полезно. Я пойду так. Я обновлю, как только я это сделаю. Надеюсь, у меня будет хороший код для обмена :-) – rockstar

+0

@RockStar с точки зрения UX, я лично думаю, что интерфейсы действительно плохие и были в значительной степени обходным путем для более старых технологий. Почему бы вам просто не сделать один ListBox с защищенным/незащищенным «ComboBox» или просто «CheckBox»? Мы заменили много таких вещей из предыдущей версии нашего продукта (VB6 + некоторые winforms) с единственными списками с CheckBoxes и тому подобным. –

ответ

2

Там нет предопределенного контроля, как и выше, но должен быть довольно просто чтобы

Вот основной план, чтобы вы начали

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> 

Код:

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; } 
} 

Результат:

enter image description here

+0

1+ Хороший пример. За исключением Resharper будет отмечать те 'ObservableCollections' как« конвертировать в свойство auto »(просто Alt + Enter + Enter + Enter) = P –

+0

@HighCore, я не использую reshaper, я считаю, что это самый раздражающий продление, когда-либо созданное для VS, но это только я :) –

+0

@ sa_ddam213 Я никогда не ожидал такого хорошего примера. бесконечно благодарен . – rockstar

Смежные вопросы